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.
Let's start.
- 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.
- Click 'Edit HTML'.
- 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>. - Search for (Ctrl+F)
</head>and paste (Ctrl+V) the following code before</head>. - 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"
order:[]option.
Separate each button with a comma (,). - Facebook Like:
- 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:
- Header
- 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"
- Secrets:
- Timer
timer: - A countdown timer will be displayed. The
timeroption takes only integer values.
- Close
close: - A close button will be displayed at the top right corner of locker. The
closeoption takes only Boolean value (trueorfalse).
- Click 'Save template'.
- Now whenever you are interested to display social content locker in your blog post, wrap your code within the following snippet of code.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/><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
<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
},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
},
},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.
When I try to Add facebook share button, an error appears "[Error]: The button 'facebook-share:' not found. "
ReplyDeleteWhat could the problem be ?
Thanks
I try to make share button work, but it's not working. Can you help me, please?
ReplyDeleteFollow those steps carefully, it'll surely work. Sorry for the delay though.
DeleteHello,
ReplyDeleteWhere 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
thx very nice for your tutorial
ReplyDeleteThanks Man It is Working Thanks A Lot
ReplyDeletepara compartir contenido de blogger. No pagina :/
ReplyDeleteAdd 'title' variable within 'twitter' variable, e.g.
ReplyDeletetwitter:{
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. :)
great but it's not working with firefox! how can i fix this?
ReplyDeleteI 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 .
ReplyDeleteIf Make Videos It wIll be Great.
me too :(
ReplyDeletehello,
ReplyDeleteyou can create "youtube subscriber lock content"
sr my eng not good
Dynamic code didn't work!
ReplyDeletefacbook like not working :( Why ????
ReplyDeleteFacebook like was not working because facebook changed their code for like, share button. As I updated social content locker code, it is working now.
Deletefacebook button and twitter button doesn't show, i get error:
ReplyDeleteUnable 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?
BOTÃO FACEBOOK NÃO FUNCIONA.
ReplyDeleteAll codes are updated.
DeleteFacebook like was not working because facebook changed their code for like button. As I updated social content locker code, it is working now.
ReplyDeleteFacebook like and share was not working because facebook changed their code. As I updated social content locker code, it is working now.
ReplyDeleteI Also tried to make it work but i could not !
ReplyDeleteit does not appear at all .. is there anything to make it working ?
i followed all steps as mentioned
regards
can you add the Youtube Subscribe to Unlock Content button on blogger?
ReplyDeletesorry for my bad english
FaceBook Buttom doesn't work | Date : 21/11/2016
ReplyDeleteHello Can I change the social buttons for an ads url button ? how i might to get to do that?!
ReplyDeletefacebook share not working
ReplyDeleteThanks, it works :v
ReplyDeleteHello bro!
ReplyDeleteFacebook like and share buttons doesn't work.. I guess because of the latest facebook update.
Looking forward for the updated script. :D
Hello.
ReplyDeleteI'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 ='(
Hi admin, fb and twitter not working, gplus its ok! Please help, update script, iv try to my blog http://sedotcode.blogspot.com
ReplyDeletefor dynamic url on facebook share you have to use url: document.url
ReplyDeleteFacebook like button is not working but other all buttons are working fine. Please help.
ReplyDeleteHi Bro
ReplyDelete"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?
I Fix It
ReplyDeleteI want to subscribe youtube channel to open my content not fb, tweet and others. Can you help make it?
ReplyDeletewhen i test with default template: fb button works fine.
ReplyDeletewhen 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).
Hi,
ReplyDelete+1 button let people share post forever and won't unlock content. Pls fix
not working
ReplyDeletewell after playing with the code for an hour,
ReplyDeletei 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
another note
ReplyDeleteon 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
Hello Admin, it's not working for Facebook like and share bottoms. Please fix it. I will eagerly waiting for your response.
ReplyDeleteHi bro, google plus button doesn't work. After shared, contents doesn't unlock.
ReplyDeleteHi Bro
ReplyDelete"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?
please help
Nice code, Thanks
ReplyDeleteNew Pk Media
Thanks ! But I Want To Add YouTube Subscribe Button In This Locker How To Do This
ReplyDeletePost is worth sharing! Unlimited followers and promotions leads to successful marketing. Already paid to one of the highly reviewed facebook ads management Los Angeles for promotional activities on our website. Want to earn a hug traffic including postings, likes, clicks, back linking and many more.
ReplyDeletehave u any post about Instagram Follow?
ReplyDeleteCan't understand what to do from option 6.
ReplyDeletehow to add youtube subscrubers button
ReplyDeletethe code is working but after liking and sharing the content wont unlock,.. pls can you fix?
ReplyDelete