Social Content Locker for Blogger


After using multiple sharing widget in your blogger, is your social exposure is on the lower side? Do you think that people read your content, but in spite of sharing or liking your content, they just read and leave? Do you have a feeling that they completely ignore whether your website has traffic or not. Well, in that case you have to drive your readers to like or share your page in order to discover your content. This is likely the best means to increase your social traffic, especially for those design sites that shares free resources. Locking the entire page by some pop up probably the worst idea because this fails to showcase the importance of your content. That's why this locker is designed to lock a specific part of your page instead of the entire page. It can lock any part of your webpage and can be implemented infinite times on a single page. You can even change the appearance of this locker to your custom style.

Before you proceed to make any customization in your blogger template, it is recommended to backup your blog template if anything goes wrong.
Demo #1: See all 'Themes' are in action
Demo #2: See all 'Buttons' are in action !!

Let's start.
  1. Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
  2. Click 'Edit HTML'.
  3. Make sure whether jQuery library is already included in your blog. If not, search for (Ctrl+F) <head> and paste (Ctrl+V) the following line just after <head>.
  4. <script src='' type='text/javascript'/>
  5. Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>.
  6. <link href='' rel='stylesheet'/>
    <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"
    Buttons: button{}
    There are seven buttons available for content locking. These are,
    • Facebook Like : facebook-like
    • Facebook Share : facebook-share
    • Google Plus One : google-plus
    • Google Plus Share : google-share
    • Twitter : twitter-tweet
    • Twitter Follow :twitter-follow
    • Linkedin Share : linkedin-share
    You can apply any number of buttons for your blog. You can even change the order of these buttons in the order:[] option.
    Separate each button with a comma (,).
    Text: text{}
    This section consists of two sub-sections; 'Header' and 'Message'. Both are basically description about your locker and what to do in order to unlock your content. Message section appears below Header section. You can modify these two sub-sections of your own or you can leave these fields empty. Detailed description is depicted below.
    • Header header
    • Message message
    Theme: theme
    This specifies the visual aspect of your locker. There are five predefined locker themes available. You can select any of the following styles or leave this field empty. The style is starter by default.
    • Secrets: secrets
    • Dandyish: dandyish
    • Flat: flat
    • Glass: glass
    • Starter: starter
    Timer: timer
    A countdown timer will be displayed. The timer option takes only integer values.
    Close: close
    A close button will be displayed at the top right corner of locker. The close option takes only Boolean value ( true or false ).
  7. Click 'Save template'.
  8. Now whenever you are interested to display social content locker in your blog post, wrap your code within the following snippet of code.
  9. <article class="socialLocker">
     <div class="to-lock" style="display:none;">
      -- Your Content --
    Facebook Share Button
    A lot of people have been asking me that they are having problem whenever they are trying to implement Facebook share button. Well, first I've to clarify that Facebook share button does not work the way as Facebook like button. For integrating Facebook like button in your website pages you don’t need an App ID, a unique identifier for your website, but for integrating Facebook share button App ID is must required.
    Get a Facebook App ID for your website. Follow the steps carefully and comeback when you're done.
    Once you have your App ID, you can insert it in your code. To do this, change the facebook option as follows.
    facebook: {
      appId:1234567890, //write your actual App ID
      url:"", //replace with your Facebook url
    But wait. What if your Facebook like button and share button url are not the same.
    Different URL for Facebook
    Well, fortunately this also possible with social content locker. You have to declare url twice. For example, write the facebook option as follows.
    facebook: {
        url:"" //replace with your Facebook url
        appId:1234567890, //write your App ID,
        url:"", //replace with your blog name
    You got it, right? But wait again. What if your like button url remains same all the time but your share button url is dynamic and it is same as your blog current url.
    Dynamic URL for Facebook
    For this purpose you have to declare dynamic url for 'Facebook' share. One of the many ways of doing that is url: location.href;.
    Hope your problems will be solved by now.


This awesome widget is created and maintained by Onepress-media for Wordpress blog.

I tried my best to keep things as uncomplicated as possible. Any type of question related to this will be appreciated.
Happy Blogging.
Join the Conversation

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.

Comments so far on 'Social Content Locker for Blogger'

  • 34 comments on Blogger
  • on Disqus
  1. When I try to Add facebook share button, an error appears "[Error]: The button 'facebook-share:' not found. "

    What could the problem be ?

  2. I try to make share button work, but it's not working. Can you help me, please?

    1. Follow those steps carefully, it'll surely work. Sorry for the delay though.

  3. Hello,

    Where is the code. Can you please share the coding of this locker with us so we can make some changes in close and in timer button.


  4. facebook like button not work in my blog :(

    1. Facebook like was not working because facebook changed their code for like button. As I updated social content locker code, it is working now.

  5. Thanks Man It is Working Thanks A Lot

  6. para compartir contenido de blogger. No pagina :/

  7. Thanks for sharing :D
    How if I want to edit the "tweet" that it share to twitter. By deafult the tweet is set to the Title of the post. I want to edit it if its possible..

    1. Add 'title' variable within 'twitter' variable, e.g.

      title:"YOUR DESIRED NAME",

      Don't forget to include inverted commas(" ") around your desired name and a comma(,) after title variable as shown. :)

  8. great but it's not working with firefox! how can i fix this?

  9. I must Say U R The Best Blogger I have Ever Seen . What A class I love r blogger And u Inspired me So much That I will Try To make My Blog Jst Like U .
    If Make Videos It wIll be Great.

  10. hello,
    you can create "youtube subscriber lock content"

    sr my eng not good

  11. facebook share still not working !!! Please fix it !

    1. Facebook like and share was not working because facebook changed their code. As I updated social content locker code, it is working now.

  12. facebook share occurs but its not unlocking the content !!!

  13. facbook like not working :( Why ????

    1. Facebook like was not working because facebook changed their code for like, share button. As I updated social content locker code, it is working now.

  14. facebook button and twitter button doesn't show, i get error:

    Unable to load SDK script for twitter. Please make sure that nothing blocks loading of social scripts in your browser. Some browser extentions (Avast, PrivDog, AdBlock etc.) can cause this issue. Turn them off and try again.

    how to fix this?

  15. I Also tried to make it work but i could not !
    it does not appear at all .. is there anything to make it working ?
    i followed all steps as mentioned

  16. can you add the Youtube Subscribe to Unlock Content button on blogger?

    sorry for my bad english

  17. FaceBook Buttom doesn't work | Date : 21/11/2016

  18. Hello Can I change the social buttons for an ads url button ? how i might to get to do that?!

  19. Hello bro!

    Facebook like and share buttons doesn't work.. I guess because of the latest facebook update.

    Looking forward for the updated script. :D


© 2016 Bloganalyzer. All rights Reserved. Designed By meNight Fury. Protection Status