How to Add a Social Content Locker for Blogger [Fixed Facebook Buttons]

Update on How to Add a Social Content Locker for Blogger: One of our readers remind us about Facebook button issue. Actually, Facebook has changed the programming of Link and Share button, so our buttons are not working. But, We have updated {Fixed} the code and now it is working very well without any issue.

Social Content Locker for Blogger

Blogger is the biggest and free platform for hosting website. It is free, so this is the first choice of newbies. Many people are using social networking sites to boost their site’s traffic.

Professional bloggers also depend on upon this strategy; they also rely on the social network traffic. But, for a newbie, it is too difficult to gain followers.

Social Content Locker for Blogger Posts

There are many widgets by using which a newbie can increase their followers on social networking profiles. Social Content Locker Widget is also one of them.

So, today we have come up with social content locker widget by using which you can boost your blog traffic from social sites because this widget can increase followers.

What is Social Locker & Why to Use it?

A Social Content Locker allows you to lock any part of your content on a web page until a user clicks one the social buttons (Tweet, G+, Facebook Like). This way you get more tweets, likes, shares, etc. thus giving you massive exposure.

Way to Add Social Content Locker for Blogger Blog?

  • Go to Blogger >> Template >> Edit HTML.
  • Search for </head> tag and paste following jquery library just above if it. Most of the templates already come with it. If your template has already this library code, then skip this step and move on next.

<script src=’’ type=’text/javascript’/>

  • Now, again Search for </head> tag and paste the following code just above if it.

<link href=’’ rel=’stylesheet’ type=’text/css’/>
<script src=’’ type=’text/javascript’/>
<script type=’text/javascript’>
$(‘.socialLocker .to-lock’).sociallocker({
buttons: {order:[“facebook-like”,”twitter-tweet”,”google-plus”]},
twitter: {url:”“},
facebook: {url:”“},
google: {url:”“},
text: {
header: “Like us To Unlock This Content”,
message: “This content is locked. Like us on Twitter, Facebook or Google plus to unlock it.”
locker: {close: false, timer: 0,},
theme: “secrets”

  • Replace the links with your links where you want likes or shares.
  • Now, whenever you want to show this social content locker on any of your blogger post or pages, just add this code in your Blogger HTML Post Editor.
<article class=”socialLocker”>  <div class=”to-lock” style=”display:none;”>    — ADD YOUR CONTENT HERE —   </div> </article>
  • Replace — ADD YOUR CONTENT HERE — with your content which you want to lock.
  • Hit on publishing button.
  • That’s it. Now Open your blog post where you have added this social locker and see it live.

Recommended Blogger Guides & Widgets

  1. How To Add AdSense Page-level Ads in Blogger for Mobile View
  2. How To Add Materialized Ripple Effect on Blogger Elements
  3. How To Add Sitelinks to Google Search Result for your Blog/Website

In Conclusion of Social Content Locker for Blogger Blog

So above guide is about How To Add A Social Content Locker for Blogger Blog? We hope this tutorial will help you in creating a social content locker & this tutorial will still help you gain some social signals and boost your traffic. Do Share.

Thank You! Stay Blessed!

Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 11 comments