Navigation Menu

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='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
  5. Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>.
  6. <link href='http://cdn.rawgit.com/menightfury/social-locker/master/style-ver2.css' rel='stylesheet'/>
    <script src='http://cdn.rawgit.com/menightfury/social-locker/master/script-ver2.js' 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/menightfury"},
        facebook: {url:"https://www.facebook.com/bloganalyzer.nightfury"},
        google: {url:"https://plus.google.com/+BloganalyzerBlogspot"},
    
        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
    Buttons buttons: {}
    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 --
    
     </div>
    </article>
    Update
    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:"https://www.facebook.com/bloganalyzer.nightfury", //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: {
      like:{
        url:"https://www.facebook.com/bloganalyzer.nightfury/" //replace with your Facebook url
      },
      share:{
        appId:1234567890, //write your App ID,
        url:"http://bloganalyzer.blogspot.com", //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.

Credit

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.

Related Stories

Join Conversation

46 comments

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

    What could the problem be ?
    Thanks

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

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

      Delete
  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.

    Thanks,
    Piyush

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

    ReplyDelete
    Replies
    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.

      Delete
  5. Thanks Man It is Working Thanks A Lot

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

    ReplyDelete
  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..

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

      twitter:{
      tweet:{
      title:"YOUR DESIRED NAME",
      url:.....,
      }
      }

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

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

    ReplyDelete
  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.

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

    sr my eng not good

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

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

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

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

    ReplyDelete
    Replies
    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.

      Delete
  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?

    ReplyDelete
  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
    regards

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

    sorry for my bad english

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

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

    ReplyDelete
  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

    ReplyDelete
  20. Hello.

    I've been tried many many tutorials similar to this one and noone has facebook working.

    So when I was giving up thiking it would never work I realize they one you using by example is working perfeclty

    Pls tell us the secret ='(

    ReplyDelete
  21. Hi admin, fb and twitter not working, gplus its ok! Please help, update script, iv try to my blog http://sedotcode.blogspot.com

    ReplyDelete
  22. for dynamic url on facebook share you have to use url: document.url

    ReplyDelete
  23. Facebook like button is not working but other all buttons are working fine. Please help.

    ReplyDelete
  24. Hi Bro

    "Unable to load SDK script for facebook. 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 it?

    ReplyDelete
  25. when i test with default template: fb button works fine.
    when i put it in my blog it doesn't work. Maybe because the code conflict with code inside my template (i'm using free soratemplate).

    ReplyDelete
  26. well after playing with the code for an hour,
    i manage to clearly get the content locker working....
    damn it...
    its working when i put the code, both code
    1. code.jquery and
    2. the locker code
    just below the <head...
    right below <head tag...
    and YES! thats solve my problem after wasting my one hour of my lifetime

    ReplyDelete
  27. another note
    on normal template that i used (that google provided), i put just below the <head
    but on template that i download around the net, i put just above the </head
    maybe its depend on the template
    btw love this is a working script you have provided
    5 star

    ReplyDelete
  28. Hi bro, google plus button doesn't work. After shared, contents doesn't unlock.

    ReplyDelete

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.