Aug 2, 2016

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

data:blog.title
social content locker for blogger
Update on How to Add a Social Content Locker in 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.

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 in 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='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
  • Now, again Search for </head> tag and paste the following code just above if it.
<link href='https://www.dropbox.com/s/6qd3m0lkch2oirl/MyBloggerGuides-Social-Locker.css?dl=1' rel='stylesheet' type='text/css'/>
<script src='https://www.dropbox.com/s/rtbr4bakvd7xjuy/MyBloggerGuides-Social-Locker.js?dl=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
    twitter: {url:"http://twitter.com/mybloggerguides"},
    facebook: {url:"https://www.facebook.com/mybloggerguides"},
    google: {url:"https://plus.google.com/+MyBloggerGuides"},
    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"
  });
});
//]]>
</script>
  • 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 page, 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 publish.
  • That's it. You are done.
  • 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
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.



Conclusion:

So above guide is about How To Add A Social Content Locker in 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!
Search Tags: Social Content Locker for Blogger, How to Add a Social Content Locker in Blogger, social content locker script, social locker HTML, social content locker HTML code, social locker jQuery.

5 comments:

  1. facebook box doesn't works it looks empty, no FB like button at all

    ReplyDelete
    Replies
    1. There is a problem with FB button due to Facebook updates
      this will be fixed in the new release.
      Thank You! Keep In Touch With Us.

      Delete
    2. @Oussama, We have updated the code. Now Facebook Like & Share button of social locker working perfectly.

      Delete
  2. it's working now, I was looking for this content locker for long time, thank you.

    ReplyDelete
    Replies
    1. Welcome @Oussama.
      Glad to help you.
      Keep in touch with us.

      Delete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.