How To Use Social Locker Plugin In Blogger [Easiest Steps]

For the ones who do not know that what a Social Locker Plugin means, then let me tell you. Some years back, Onepress, a plugin developer (most probably a team of developers) developed a plugin for WordPress that was able to lock content (text, images). Later, this plugin came for Blogger but not by Onepress, I mean it has not been officially released for Blogger by the developers but, people have made a clone of it by using official CSS files and JavaScript files and in this blog post, I am going to show you about how can you use Social Locker in your blogger blog's post to drive traffic to your social media pages.

You're interested, huh?

But still, the way the people and Bloggers have provided the steps for adding it is so challenging for newbie Bloggers and non-developer Bloggers. So today we are going to tell you the easiest way of adding a social locker in your Blogger blog with the easiest points ever. So without talking anymore about it, let us add it.

How To Add Social Locker Plugin In Blogger?

This method was available to read on the internet for many years, but the files that were used in those methods were not compressed and in most of the places, the links were expired. By following the steps I'm stating here, you'll add the social locker in your blogger blog with highly compressed files of both, CSS and JavaScript, which will not drastically affect your blog's loading speed. But still, this plugin would lightly increase your blog's loading speed...but very lightly (it will affect the loading speed of only the post in which you will add the social locker, not the whole blog).

Click To See Demo
Steps are following:

• It is quite easy to add it. Firstly, go to the Post Editor's HTML Mode,
• Now, where you want to add the Social Locker, just copy and paste the following code:

<script src='https://www.dropbox.com/s/m6ubtyqs414pwk6/Social-Locker.js?dl=1' type='text/javascript'></script>
<link href='https://www.dropbox.com/s/y7ql1y0nrowkid5/Social-Locker.css?dl=1' rel='stylesheet' type='text/css'></link>
<script>
jQueryundefineddocument).readyundefinedfunctionundefinede){eundefined"#default-usage .to-lock").sociallockerundefined{buttons:{order:["facebook-share","twitter-follow","google-share"]},twitter:{url:"http://twitter.com/BloggerGuider"},facebook:{url:"https://www.facebook.com/BloggerGuider"},google:{url:"https://plus.google.com/+BloggerGuider1"},text:{header:"Do any of the following task!",message:"This content is locked. Do any of the following task and get this content unlocked for you. :)"},locker:{close:1,timer:300},theme:"glass"})});
</script>
<article id="default-usage">
<div class="to-lock" style="display: none;">
Hello. Thanks a lot for unlocking me. :)
</div>
</article>

• Now, save the post after doing all the customizations. (Customization instructions are given below).

Customize The Social Locker

Now, you will need to change some URLs and text according to your needs. To do the same, please refer to the following instructions:

1. Firstly, there are three background highlighted words. You can reorganize them to change the button orders or even change them with some other words to make different types of buttons. You can replace the existing words with the following words to create different buttons:
1. facebook-share with facebook-like
2. twitter-follow with twitter-tweet
3. google-share with google-plus
4. linkedin-share
So, if you want a Facebook like button, Twitter Tweet button and Linkedin's share button, you can replace the three highlighted codes above with the following line:

["facebook-like","twitter-tweet","linkedin-share"]

You can even add more buttons using the following line:


["facebook-share","twitter-follow","google-share","google-plus","facebook-like","twitter-tweet","linkedin-share"]

2. Now, it's time to change the URLs which want your visitors on unlockers to like, share or follow (twitter handler). Change the URLs in this color with your Twitter handler, this color with your Facebook page URL and this color with your Google+ Page or your profile's URL.
3. Now change yellow color words with the heading you want and green color words with the sentence you want to be displayed on the Social Locker widget.
4. Now, you have to make choice that you want a timer on the widget or not. If yes, then change the value with is in aqua color (1 = 1 second; 300 = 300 seconds;).
5. Next options are for, you want a close button or not (if you want, change the value in purple color to 1 and if you don't want, change it to !1).
6. Now, locker's theme. There are six different different themes available for the social locker widget. You need to change the words (glass) which are in dark purple colour, with any of the theme names to change the look of the social locker widget:

"dandyish"
"starter"
"glass"
"secrets"
"flat"

* some buttons are not available in some themes.
7. Now, at last, change the code in dark yellow color to edit what the unlocker or your visitors will get after unlocking the social locker.

Social Locker Not Working?

If you social locker is not working after you followed all the steps above, please make sure you have the jQuery library installed in your template. If you don't have it right now, just follow the steps given below:

• Go to Blogger Dashboard > Template > Edit HTML
• Now, find <head> and below it, place the following code:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

Would You Like Us To Make A "Social Locker Shortcode"?

We just want to ask you that, would you like us to make a social locker shortcode? I think this would be fabulous, as presently, adding it is a time taking task and this time, can be preserved using a shortcode. Kindly share your views in comments about it and then we shall decide to make a social locker shortcode or not.

Need Help? Any Queries?

I think that those steps could have confused you. If I am saying right, then feel free to comment below for any help and don't forget about telling us in the comment section about the shortcode. At last, kindly share this post in your own globe (social profiles) to make more people know about this fabulous widget. This widget can increase any blog's or website's social performance nicely and fastly. Thanks!

Share this post