How To Create a Social Content Locker in Blogger BlogSpot


ATTENTION: The Tutorial is Update, Please Update Your Scripts or it will not work!
How many people are using Social networking websites to boost their Website’s Traffic? There are tons of professional Bloggers who entirely depends on the Social Traffic. However, it is extremely difficult to get social exposure quickly. Though, there are some widgets which help to increase social followers, but it is not enough. If we want to dominate the social web, then we have to make use of each and every opportunity that we have. For that reason, we have come up with one of the much anticipated Social Widget of all time, Social Content Locker. 

Do you use multiple social sharing widgets on each and every page of your site? However, still your social exposure is on the lower side. Actually, the problem is that, people love your content. Therefore, they don’t click the social buttons and instead Read and leave your website because they don’t care about your traffic or your website. Asking people to like, +1 or tweet to get access to your content is indeed an ideal way of forcing users to share it on the social web. 

Social Locker consists of three social buttons and a locker displaying horizontally. The Social buttons consist of Facebook, Twitter and Google plus. Whenever, a person would either press Like, Tweet or Plus one button it would display the hidden content. This allows a person to get more real social followers. Feel Free to enjoy the Following Real time Demo. 

How To Install Social Content Locker in Blogger?

The Steps are extremely straightforward that even a small kid can follow it. There is no need of learning any Html coding because all we have to do is to copy paste the coding. Just follow the following instructions. 
  • Go To >> Template >> Edit HTML >> Proceed.
  • Search for </head> just and above it paste the following CSS Coding.

<link href='' rel='stylesheet' type='text/css'/>

  • After pasting the coding save the template and proceed to next step.

How To Add Social Content Locker in Blogger:

Now whenever a person wants to add a Social content locker in his specific article, then he can follow the following instructions. (Remember: The same steps can also be used on Gadget Area and even in a template).  

  • Go To >> New Post.
  • Select the HTML Tab from the blogger post editor and paste the following coding.
<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->

<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />

<div style="text-align: justify">
Add Your Hidden Text Here

<!--Hidden Content Ends (You can Use HTML ABOVE)-->

</div><div id="mblunlocker"> </div>
<script type="text/javascript" src=""></script>

jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({

text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."

style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]

// twitter options
twitter: {
url: "",
text: "Upgrade your social buttons to get more social traffic!"

// facebook options
facebook: {
url: "",
appId: "418044881593120"

google: {
url: ""


  • For Facebook: Replace with your Facebook Page.
  • For Twitter: Replace with your Website's URL or etc. 
  • For Google+: Replace with the URL of your website or post.
  • Replace Add_Hidden_Image_Here with the Image that you want to Hide.
  • Replace "Add Your Hidden Text Here" With the text that you want to hide from users.
Remember: Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace 418044881593120 from above coding. 

All Done: That's All, we hope this widget would help everyone to magnetize more social followers on your website. Feel free to leave your comment.

From The Editor's Desk:

We are sure this widget would act as an icing on the top. However, using source code a user can easily get access to the hidden content but he should be smart enough to do that. Mostly visitors are not that smart so don't worry about it. What are your thoughts about this widget? Suggest would be welcomed  Take a lot care of yourself till then, Peace, Blessing and Happy socializing. 

Original Resource


The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


December 24, 2012 at 11:35 AM

Your way of thinking is very smart and that nice widget is proving it . well done

Editorial Team MOD
December 24, 2012 at 11:37 AM

@Raheem Ahmed Khan!

Sorry Sis Your Comment Was Removed Due to some technical Problem I Republished the Article. Yes, Well actually there are tons of Social Content Locker for WordPress and many other Platform so we decided to create one for Blogger. Yeah, The whole code is Written By MBL Developers. Take Care Peace

Editorial Team MOD
December 24, 2012 at 11:39 AM

@Rounak Baral

Bro, Due to some Technical Problem With Blogger the Article on which you comment was removed. Therefore, We Republished it. The WordPress plugin you are talking about has different Dynamics because Blogger is entirely different From WordPress. We have not used any WP source. We have used a Jquery File that does the Job Quite perfectly.

December 24, 2012 at 11:50 AM

Ohh Its Cool Dear Sir

Editorial Team MOD
December 24, 2012 at 11:51 AM

Its out Pleasure Atif Bro, Thanks for leaving positive reviews. Peace

December 24, 2012 at 11:53 AM

why m i feeling impressed by the MBL developers:-p

Editorial Team MOD
December 24, 2012 at 11:57 AM

LOL :) We would Continue to Impress you Miss..

Editorial Team MOD
December 24, 2012 at 2:23 PM

Yeah, You can also use it for that Purpose. But we already, have a Widget Called. Like To Enter Social POP For that Purpose. Any Ways. Peace

December 24, 2012 at 5:45 PM

Cool locker..
Great work MBL Developers

December 24, 2012 at 7:03 PM

great work

December 24, 2012 at 7:42 PM

Wow bro it's great... Can you make it for wordpress ?

December 24, 2012 at 9:59 PM

nice one . it is awesome sharing button. thanks for this :)

December 24, 2012 at 10:36 PM

Claps Cool bro amazing :)

December 25, 2012 at 1:20 AM

mashaallah. amazing, how can you do that? oh yeah, btw how can i lock youtube video?

December 25, 2012 at 1:37 AM

This is a cool widget however, don't you think it will require a criteria to be able to put this on site. Especially for the new blogs.

December 25, 2012 at 1:58 AM

mmmm,yummy, Tasty . Even This Widget Tests more Sweet than a Christmas cake!! Really You are the Real Santa For Bloggers, and this is the best gift for them!!:-)

December 25, 2012 at 2:24 AM

what's About FB App Coding !What To do with FB App id?/

Editorial Team MOD
December 25, 2012 at 3:18 AM

Keep the FB App ID Unchanged. Peace

December 25, 2012 at 6:06 AM

Tooooooooooooooooo Cooooooooooooooooooooooooooool!!!!!!!!!!!!!!!!!!!!!! Wonderful Piece of work syed! Really impressed! :D

December 25, 2012 at 9:40 AM

My blogger tricks ... we found a better blog helper :D

December 25, 2012 at 9:12 PM

replace facebook app id with what ?

Editorial Team MOD
December 25, 2012 at 10:58 PM

You have to create a App To Get the ID. However, if you don't have one then Use the Default ID that we have used in the widget!

Editorial Team MOD
December 25, 2012 at 10:59 PM

Well, It Depends on a Person that Where and How He use it. Peace

December 26, 2012 at 2:22 AM

The facebook button is not showing up ... :(
I tried making an app but with no fruits
See here :

Editorial Team MOD
December 26, 2012 at 2:31 AM

Use the Default one i.e. 418044881593120

December 26, 2012 at 5:19 AM

Not working bro .... even with the default app !

Editorial Team MOD
December 26, 2012 at 5:20 AM

Hmm! its working fine at our End. No Idea why its not working for you. May be you have to create an APP Id of yours!

December 26, 2012 at 10:21 PM

Brother I want to learn Jquery Tutorials pls put the series post ...

// Peace

Editorial Team MOD
December 28, 2012 at 11:43 AM


ATTENTION: Redirecting to MyBloggerLab Bug Fixed! Please Reapply the Steps as mentioned Above!

Syed Faizan Ali

December 31, 2012 at 10:17 PM

Very smart and beautiful widget Locked widget. Thank you for creating and sharing it.

January 7, 2013 at 10:46 PM

Its keep redirecting to your site my friend :/ Happy new year!

Editorial Team MOD
January 8, 2013 at 7:20 AM

Thats Because you are trying to Remove the Credits. :). If you keep the coding as it is then it would not redirect to our site. Peace

January 9, 2013 at 4:14 PM

cool man !!!! nice script.

but i wants to lock my whole post. and want users to share that post on fb, twitter etc....

pls tell me about that

Editorial Team MOD
January 10, 2013 at 12:06 AM

If You want to Lock Your Whole Content then Simply Paste the Following Codinging in the HTML TAB of POST

<article id="default-usage">
<div class="to-lock" style="display: none;">

<!--Hidden Content Starts (You can Use HTML BELOW)-->

Paste Your Hidden HTML HERE

<!--Hidden Content Ends (You can Use HTML ABOVE)-->

</div><div id="mblunlocker"> </div>

Well, That thing might Annoy users that's why we think 1 Like or Tweet or Google +1 Should unlock the article.

Hope that Helps Peace

January 24, 2013 at 1:21 AM

This is nice widget dude! Thanks a lot for sharing this content locker.

January 24, 2013 at 8:37 PM

will you plz provide locker for facebook follow(as newly introduced).

February 20, 2013 at 10:44 PM

Hi, it seems ur an expert on blogging stuff, i am in deep need of help, can u plzzzzz help me with this 1 query plzzzzz

I installed fb comment box from this tutorial:

My fb comment box is working but i have a big question to ask, hope u solve my query...

this is the link to my blog:

when u go to any individual post on my blog, like for example this one:

as u can see, i get my fb comment box below the pic and below fb comment box i get my social sharing buttons, my problem is that the social media sharing button comes below fb comment box whereas i want first social media icons and below that i want fb comment box, as i don't know anything about coding can u plzzzzzzzzz reply in as simple steps as possible, plzzzzzz my e mail id is desperately waiting for ur reply...

Editorial Team MOD
February 21, 2013 at 1:22 AM

Email Us your Full Blogger Template in XML Format.

Go To >> Template >> Backup/Upload >> Download Full Template.

Email that XML File to

We would Do the rest!

February 21, 2013 at 3:20 AM

Done, waiting for ur reply, just make sure that below my every post these things should come in this order

1) Rate this posting
2) MY social sharing buttons
3) Facebook comment box

Thanks a zillion in advance...

February 22, 2013 at 7:55 AM

No reply from ur side? u got my e mail or not? Waiting...

February 22, 2013 at 11:52 PM

Really cool widget !

But I want only the +1 content locker not the tweet & Facebook !

Can you help ?

plz reply soon :)

Editorial Team MOD
February 23, 2013 at 1:44 AM

Currently we don't have an Google+ Locker but surely would develop it sooner

March 2, 2013 at 4:43 AM

woooo ...
thanks syed. this is a important article for social media marketing :D

March 18, 2013 at 12:00 PM

I read on internet that using social locker in blogger may land your blog in trouble, like the blog can be blocked permanently? is it true? i really love your social content locker but i am scared to use as i dont want my blog to get blocked. pl throw some light on this as i dont know much in this? waiting. Thanks

Editorial Team MOD
March 19, 2013 at 5:44 AM

No, there is no problem with using Social lockers on your Site. Since, you're using jQuery to all the work so there is no reason for banning or limiting your account. Feel free to use it.

March 25, 2013 at 1:29 AM

ok so finally i used this locker, it works like a charm , no doubt about it, but i have now 2 problems, 1 small problem and 1 big problem after using this,

Small problem is that when i lock a content which has no text (Apart from the blog post title) only 1 image which is locked, so after unlocking such posts there is a big gap between blog post title and the start of the image. like 4-5 blank lines?? dont know how to get rid of that

and second big problem is that my blogs home page gets redirected to your site (mybloggerlab), i can go to individual posts without any problem but as soon as i go to my homepage it gets redirected to ur site? did i do something wrong?

plzzzzzz reply, as i want to use this locker but without this problems. (As of now i have removed the locker because of the redirect problem)
Desperately waiting for ur reply...

Editorial Team MOD
March 25, 2013 at 2:03 AM

To Stop redirection Do as follows.

<b:if cond='data:blog.pageType == "item"'>



Provide your blog URL so we can see what is the problem with padding

March 25, 2013 at 2:50 AM

Ok it works amazing now, no redirects and no padding, just 1 last thing, in social locker when i click on tweet option, a new tweet window opens, so far so good, but my website message in that window is 8 characters more than 140 (which twitter allows to tweet), i tried all settings in blogger blog but i am unable to find the place where i set this message edit? plz tell me how to edit this default twitter message which comes when u click on tweet in this social locker. Thanks a zillion.

April 12, 2013 at 7:04 AM

Hey! Mybloggerlab Team. You guys are doing so Wonderful job. I really appreciate your work. You have made blogging at blogspot So easy! Your Widgets make blogger one strong opponent of Wordpress.. :D

Now my question regarding this widget is that..

Can I make those like google+ tweet buttons Sharing/liking my Post instead of just following my facebook/google+/twitter fanpages?.. I want users to like my Post .. Share it on Google+ .. tweet its link on twitter.

can it be done?


Editorial Team MOD
April 12, 2013 at 10:56 AM

Its very simple keep the Facebook and Twitter Field empty so it would become a Google+ Locker.

April 14, 2013 at 8:15 AM

why redirect to your blog bro
my blog

April 14, 2013 at 8:16 AM

To Stop redirection Do as follows.


i use this code also but still redirect to yours

Editorial Team MOD
April 14, 2013 at 11:22 AM

You must have Removed some credits. Otherwise it never redirects. Peace.

May 2, 2013 at 12:49 PM

as you might like buttons for sharing?

May 3, 2013 at 4:04 AM

I bought the original license Codecanyon, how could it work in blogger, if files are disferentes to your you provide here?. Try uploading the files to dropbox, I insert those files with your code you provide but still does not work, the original version can not work in blogger jquery?

Editorial Team MOD
May 3, 2013 at 6:24 AM

I am afraid you should have purchased a Licence from us if you wanted to use it on your Blogger site. Since, you have purchased it from then you should as their support. We cannot help in this case.

May 3, 2013 at 7:05 AM

and you sell the license? what is the price?

Editorial Team MOD
May 3, 2013 at 7:16 AM

21$ For one licence.

May 3, 2013 at 8:58 AM

The licence of wordpress value 21$, Blogger more cheap no?

Editorial Team MOD
May 3, 2013 at 10:00 AM

You get the same thing but tweaked for blogger.

May 3, 2013 at 10:36 AM

but has the option of sharing instead of I like? and has no advertising mybloggerlab?. I want no advertising or visible (not even in the code)

Editorial Team MOD
May 3, 2013 at 11:43 AM

Yes in paid version, you won't see any credit links.

May 3, 2013 at 12:30 PM

but I'm interested in all the buttons are to share content (The only thing that is good is to twitter), because I want the one I like is to share and +1 also is to share. If this is possible, tell me how to do the transaction for payment.

Editorial Team MOD
May 3, 2013 at 12:40 PM

Well, any optimization is not possible. You would get the same thing that is listed above.

You can Pay through Payza(AleryPay)

May 7, 2013 at 8:50 AM

First of i want to say thanks for creating such a wonderful widget. It works perfectly on my blog, however it displaced my sidebar. Can you provide me with some assistance on how to eliminate this minor issue.

Thanks in advance...

Editorial Team MOD
May 7, 2013 at 9:37 AM

Yes Sure.

June 29, 2013 at 2:05 PM

Could you provide me the code of link locker for blogger, in which i want to add yocaptcaptcha's captcha. anyone will click on link in my post get a popup captcha after solving it he will redirected to the actual link

July 10, 2013 at 4:17 AM

where can we add this code in our template

September 2, 2013 at 12:57 PM

its good but how do i add embedden code to youtube insted of the text? plzz help

Editorial Team MOD
October 14, 2013 at 5:17 PM

Please Change the JS and CSS File with the new one. We have updated our code.

October 16, 2013 at 6:13 PM

I was looking for this
thank you for sharing

October 20, 2013 at 10:30 PM

bro i want to remove powered by

how to remove

Editorial Team MOD
October 27, 2013 at 4:45 PM

In this case you have to buy a licence to remove the credits.

November 5, 2013 at 1:49 AM

hi dear I want to buy this script please send me your price please

Editorial Team MOD
November 5, 2013 at 3:05 PM

30$ email:

November 16, 2013 at 4:29 PM

hold on a second... first, you write a post about a plugin thats is not even yours, then you brand it as yours, (even if the code isnt the exact same,the look is identical) , you not even mention about the backlink/credits and you ask DOUBLE the price that original plugins are? 30$ to remove a text link? Are your serious? I am sorry to tell you but something is wrong with you. i used to like this website, but this is really greedy...

Editorial Team MOD
November 19, 2013 at 11:32 AM


We have made contracts with the Original developer of this Plugin, So these price are made up with the same standards as it is available on the marketplace You can check at the bottom of the article there are credits mentioned to the original source

It is a Partnership

Yet we are giving it for FREE, just for the sake of your great readership :) with a small credit at the bottom nothing else

December 11, 2013 at 5:08 PM

I really need help, WHY THE FACEBOOK LIKE BUTTON is not showing up?
-I've tried to use my APP ID and the default ID but still not showing.. Please help...

Editorial Team MOD
December 12, 2013 at 2:00 AM

This might be a FB problem

January 21, 2014 at 9:56 AM

It does not work. All i see is the credit to your website, nothing else shows up. What could the problem be?
My website is

January 21, 2014 at 10:50 AM

There must be something wrong with my template, because i tried it on another blog (with different template), and it worked. Can you help me please? Thanks

Editorial Team MOD
January 22, 2014 at 6:16 AM

This Depends on the template. Some custom template doesn't support multiple scripts.

January 25, 2014 at 12:54 PM

Is this legal? Blogger will not delete my blog because of this?

Editorial Team MOD
January 27, 2014 at 2:25 PM

Yes its legit, we are using it on this post and works fine.

Editorial Team MOD
January 27, 2014 at 2:26 PM

I couldn't understand your query sir

January 27, 2014 at 3:35 PM

And what if I use this content locker with a site with adsense?
They will not suspend my adsense account? Thanks for the answer.

Editorial Team MOD
January 28, 2014 at 6:12 AM

Yes, Feel free to use it with any Ad network. AdSense too

Editorial Team MOD
January 28, 2014 at 8:37 AM

Yes you can use Generate Permalinks before publishing posts. And Add that link to share the url of the same post.

January 30, 2014 at 12:33 AM

Facebook like note active for blogger

January 30, 2014 at 10:51 PM

It's stopped working on my site yasterday, after it's worked great till then...
Please fix asap!

My site:

Editorial Team MOD
January 31, 2014 at 9:57 AM

Hi, The scripts are down. We are updating it ASAP

February 1, 2014 at 4:02 AM

Hi MBL team, just want to ask how to customize the header of this widget because in my blogger themes, the header seems white and can't read. Please check it for you to find out, I put the locker at my blog at Hope to get a response from you, thanks in advance.

Editorial Team MOD
February 1, 2014 at 11:30 AM

I am not sure what you meant?

February 2, 2014 at 2:56 AM

The widget looks like this on my browser...

Editorial Team MOD
February 2, 2014 at 3:02 PM
February 10, 2014 at 6:31 AM

Thanks for this awesome tutorial. I only have one problem, TWITTER option does not work. When I click TWEET nothing happens. Could you check?

Editorial Team MOD
February 10, 2014 at 11:08 AM

Hi, Make sure you have Twitter JS in your template to show up the twitter button

February 13, 2014 at 7:56 AM

That's a great code! but it seems not to work on Chrome. The twitter box is not working well and the g+1 box is empty...

Editorial Team MOD
February 14, 2014 at 11:01 PM

Hi, You can see the demo it works well with Chrome. And tweet has no options to display 2 tweet button in one page. So make sure you have 1 tweet button on a single page.

February 20, 2014 at 3:00 AM

How can i remove the credits?

Editorial Team MOD
February 20, 2014 at 7:23 AM

It cost 30$ to get Credits removed.

February 28, 2014 at 5:05 AM

Thanks for this script, works fine and I make some good traffic using this share content and have good profit. Actually I make 40 dollars a day when my traffic increase.

June 15, 2014 at 1:52 AM

Hey, I love this :)
But whenever I open my homepage it keeps redirecting me to your homepage, I didn't touch the credits like, I don't care if its there(you deserve the credit for this awesome widget), but I don't like that it's redirecting.
Help ?
My web :

July 16, 2014 at 12:11 PM

HI!!! Great locker, but from today is not all

July 17, 2014 at 9:19 AM

HI!!! Im using this locker for 1 year, but from yesterday it doesnt seems that needs to be updated.

Editorial Team MOD
July 18, 2014 at 5:36 AM

You need to buy the script. Currently you are using Public links (that goes down when a lot of user use it). So buy script form us and host it on your own :)

July 18, 2014 at 5:54 AM

Thanks for reply!!! How can I buy this script? from where? Can u help me with this?

Editorial Team MOD
July 21, 2014 at 6:44 PM

Please contact

December 20, 2014 at 8:23 PM

Hi admin this was a nice article but please can you tell where to find our applID of Facebook?

Editorial Team MOD
December 21, 2014 at 2:06 AM

You can get your APP ID from here

January 11, 2015 at 10:35 AM

You can share the css files and js to my email please. or send the original links droopbox.


January 14, 2015 at 11:48 AM

Hello, I could explain how to place the code on the tickets?
In "Add_Hidden_Image_Here" I put the URL of the image?
.. The truth Explain that part because I do not understand much, sorry for English, is to use google translator.
I appreciate your response

Editorial Team MOD
January 27, 2015 at 7:38 AM

Hi, things are same for custom domain and blogspot domain. You must be not following steps correctly.

March 4, 2015 at 5:25 PM

Bro its css host is not working

April 18, 2015 at 2:13 AM

It works properly on without custom domain in blogger but do not work on custom domain as i remove custom domain it works good but when i use custom domain it don't work properly. Please help us?

May 9, 2015 at 11:08 AM

In this social lock facebook links are not working. It saying an error that Unable to load SDK.Please make sure that nothing blocks loading of social scripts on your browser.

September 3, 2015 at 6:28 AM

Its work perfectly for me, i need one suggestion shall i change the google plus into the google plus follower option , i need more friends follow me thats y i ask , can u give me the solution

December 12, 2015 at 5:10 AM


January 31, 2016 at 6:06 PM

Css File not Found !? Can you upload again

Editorial Team MOD
February 14, 2016 at 10:47 AM

Its Fixed! working fine.

Editorial Team MOD
February 14, 2016 at 10:48 AM

Working fine now!

March 7, 2016 at 9:30 AM

apparently the CSS document is not available.

March 29, 2016 at 3:50 PM

facebook button not working anymore

March 30, 2016 at 9:24 AM

Facebook like button not showing ?? why ?

May 15, 2016 at 3:08 AM

how get facebook app id?

Editorial Team MOD
May 27, 2016 at 11:20 PM

Follow this tutorial:

June 1, 2016 at 12:15 PM

Facebook button is not working. It give the error: "Param width must be a number"

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.