How To Create a Social Content Locker In Blogger

Social content locker is a premium Wordpress plugin (also available For blogger using source code) which is used to lock a specific part of  blog posts content until a  user clicks one of the social button (Facebook,Tweet,Google Plus).

You used to put social share option in every page on the blogger, but  user's don't click on any one of the button. Now, social content locker is a best choice for those who wants to increase their Facebook likes, Tweets and google Plus share. Demo
Must Read: Get 1 month Google Apps for Work for Free

Installation :

Blogger : As, Social content locker is created for Wordpress Users, but we can also install it on Blogger using source code (available on Github under creative common licence).

 How to /

  1. Go to Blogger template Editor and find </head>

  2. Now, Paste the below code just before, </head>

 

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='http://hostnetwork.netau.net/lockercss.css' rel='stylesheet'/>
<script async='true' src='http://hostnetwork.netau.net/lock.js' type='text/javascript'/>
<script type='text/javascript'>
  //<![CDATA[
jQuery(document).ready(function ($) {
  $('#default-usage .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
    twitter: {url:"http://twitter.com/Hugestreet"},
    facebook: {url:"https://www.facebook.com/Hugestreet"},
    google: {url:"https://plus.google.com/+Hugestreet"},
    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>

Customization :
   * Replace 'Hugestreet' with your social usernames.

 3. Now , whenever , you want to add social content locker in your blog posts. Then simply switch to Html box and then paste the below div tag,
       

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

Note : Replace ' --Hidden Content Starts --' with your blog posts or content or files.done .