We got many requests from our readers to write a tutorial on how to install a social content locker in Blogger because it’s a bit technical in comparison with WordPress. As far as WordPress is concerned, you just need to install a simple plugin named as One press social locker.

Why we use social locker:

You should have something really interesting or informative, if you want to use social locker on your website, otherwise, your visitor will just leave without thinking much.

How you can add a social locker in your blogger account:

  • Visit Blogger.com->Template->Edit HTML->Proceed.
  • Search </head> and paste the CSS code shown below:

<link href=’https://dl.dropboxusercontent.com/u/137869302/lockercss.css’ rel=’stylesheet’ type=’text/css’/>

  • After inserting the code, you need to save the (template) & proceed further.

Now, if you want to use social locker in any specific article, you need to follow the below mentioned instructions.

Remember, you can also use all these steps in the template and the gadget area as well.

  • Go to-> Blogger.com->New Post
  • Choose the TAB of HTML from blogger’s post editor & paste the code mentioned below:
<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>
<div style=”text-align: justify”>
Add Your Hidden Text Here
</div>
<!–Hidden Content Ends (You can Use HTML ABOVE)–>
</article> 
</div><div id=”mblunlocker”> </div>
<script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/137869302/lockers.js”></script>
<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: “http://www.bloggingheat.com”,
text: “Upgrade your social buttons to get more social traffic!”
},
// facebook options
facebook: {
url: “http://www.facebook.com/bloggingheat”,
appId: “418044881593120”
},
google: {
url: “http://www.bloggingheat.com”
}
});
});;;;
        
</script>

Customization process:

  • For Facebook= Replace this http://www.facebook.com/bloggingheat with your Facebook Page.
  • For Twitter= Replace http://www.bloggingheat.com with your Website’s URL or etc.
  • For Google+= Replace http://www.bloggingheat.com with your websites address.
  • Replace (Add_Hidden_Image_Here) with an image that you are looking to hide.
  • Replace (Add Your Hidden Text Here) With text that you are looking to hide.

Remember! don’t forget to add your (Facebook app ID) otherwise, your Facebook like button won’t show up properly, for example: you need to replace 418044881593120 from the code mentioned above.

Alert: To download .doc file of the code, visit this link: https://www.facebook.com/groups/bloggingmadness/639722019484271/

How To Install Social Content Locker in Blogger?

Thats all, its done!

Don’t forget to add your valuable comments, suggestions and Subscribe us via Email.

About The Author

I am a full time blogger and a content writer as well. I try to help my readers and solve their problems related to SEO, web hosting, freelancing and other related stuff.

6 Responses

  1. Anmoldeep Singh

    not working.. suppose if you make 2 different posts with social locker, if you like or tweet first post’s locker then the 2nd post’s locker will automatically opened.. so this is working on only one time at one post

    Reply
  2. Piyush

    hello,

    Can you please remove copy security from your post else we are unable to copy the code.

    Or you can either upload some txt .

    Thanks,
    Piyush

    Reply

Leave a Reply

Your email address will not be published.

CAPTCHA

*