This Social Locker (Share-To-Unlock) widget 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.

How To Add Social Content Locker in Blogger?

The Steps are extremely straightforward and easy that even a novice can do it. You musnt be a HTML guru or whatever because all we have to do is to copy paste the code into your blogger template editor. Follow the following instructions. 

  • Go To >> Template >> Edit HTML.
  • 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

Whenever you wants to add a Social Content locker in an article or post, just 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: "408184442589211"

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 408184442589211 from above coding. 

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

Widget Created By :  
Syed Faizan Ali (Founder of MyBloggerLab)]

Post a Comment

  1. This can be one particular of the most beneficial blogs We’ve ever arrive across on this subject. Actually Wonderful. I’m also a specialist in this topic therefore I can understand your hard work.
    website design