How To Add Social Locker To View Blog Post in Blogger

Social Locker now days is a best way to get more fans to your social pages like facebook fan page Google+ or to twitter from your blogger traffic. This method will lock the blog post and will make hide post until visitors like your social site. Many of blogger are using this awesome social like locker in their blogger and they are getting bundles of fans daily on facebook fan pages and many followers to their twitter.

 How To Add Social Locker  in Blogger

To add This Social Locker widget in your blogger please follow the steps below carefully

• Open your Blogger Blog Dashboard
• Go to template section
• Open Edit HTML section to integrate the code in blogger template
• Now find the Code and paste the below code under/below it

<link href='https://googledrive.com/host/0B34mC1Fbl7PmQnFySC1jaGs1OUU/tronicflow-social-locker-css.css' rel='stylesheet' type='text/css'/>

• Then You have to put below code end of the blog post in HTML section where you want to show your Social Locker widget

<article id="default-usage">
    <div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
 
    <br />
<div style="text-align: justify;">
THIS IS YOUR HIDDEN TEXT! </div>
<!--Hidden Content Ends -->
 
    </div>
</article>
    <br />
<script src="https://googledrive.com/host/0B34mC1Fbl7PmdFFLRVVvOG5iNkk" type="text/javascript"></script>
 
    <script>
    jQuery(document).ready(function ($) {
    $("#default-usage .to-lock").socialLock({
 
    text: {
    header: "THE CONTENT IS LOCKED!",
    message: "To unlock the content, Please use one of the social buttons below. Thank you for your support!"
    },
 
    style: "ui-social-locker-secrets",
    buttons: {
    order: ["twitter", "facebook", "google"]
    },
 
    // twitter options
    twitter: {
    url: "HTTP://YOURSITE.COM",
    text: "TWEET TEXT"
    },
 
    // facebook options
    facebook: {
    url: "http://www.facebook.com/yourpage",
    appId: "337462366354755"
    },
 
    google: {
    url: "YOUR DOMAIN OR POST URL"
    }
    });
    });;;;
       
    </script> 

 Social Locker Widget Customization

Change All Above Highlighted code with your own codes.

• THIS IS YOUR HIDDEN TEXT! : You can use any hidden text or HTML code here which will be show when some one like your social site / pages.
• HTTP://YOURSITE.COM :  Replace it with your site URL or post URL.
• TWEET TEXT : Put Your site meta content here so the people see and they tweet it on twitter.
• yourpage : Replace it with your facebook fan page name .
• YOUR DOMAIN OR POST URL:  Your post URL or domain name to put here .

After customization publish your post and watch out your social locker is working awesome in your blogger.

Share on Google Plus

About Abdul Nafeh

Abdul Nafeh is the founder and editor of Computer and Internet Tricks.