How can we Add Social Content Locker by JQuery in Our Blogspot Blog with Simple Method.
Today PK Helper will share this Interesting and Must Have Widget in Blogger for Bloggers so we can easily increase our followers and Facebook Page Likes.You can also check other Blogspot Tricks.
Social Content Locker
Why You Need It?
The Reason we Need this widget is that we make posts and many useful tricks for free and people who visit our blog post do not like or recommend our post or page.This is totally unfair for bloggers.We are helping them and they do not even like our pages.So it is now our main need in hour to have such a widget or script so that people like us our pages and so that increase our exposure on social networks too.You may Have tried many Widgets on the Internet but all in vein and with no fruits.So This method will surely work for you just Follow us.
What Will We Do?
We will add a Jquery Script so that people who want to see our post or our content which we have made with our precious time.We will Add a Content Locker in which our Social Bookmarks will be added that are Facebook, Twitter and Google+ Pages.
Method:
2Now Go to Your Blogger, Log in and Move on to Template Section and Click on Template and then on Edit HTML. Like in Picture Below.
3Now this is the Part of Trick.You need to make sure that the Jquery Script is already added in your HTML or not.For this Purpose in HTML Section,Click CTRL + F to open the search bar and search for below HTML Script.If you find the below script in your HTML then no need of adding it again but if there is no such script then add it manually just below <head> or after it.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/> 
4Now search for </head> in your HTML and before or above it, Paste the below code
<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
$('#default-usage .to-lock').sociallocker({
buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {url:"http://twitter.com/PKHelper18"},
facebook: {
like:{
url:"https://www.facebook.com/PKHelper18"
},
share:{
appId:1644466799163691,
url:"http://www.pkhelper.com/"
},
},
google: {url:"http://www.pkhelper.com/"},
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>5Now whenever you want to Hide some Content, either images,videos or article, Just paste the below HTML code in your HTML section of Post as described in the Video and Replace it with -Your Content-
<article id="default-usage">
<div class="to-lock" style="display:none;">
-- Your Content which you want to Lock or Hide --
</div>
</article>Note:If you like or Unlock the Locker Once,It will not appear for you on that page again within some time so Don't worry if it is not appearing again for you, it will be there for every new Comer.
If This Helped You,Don't Forget to Share it and Plus 1
If This Helped You,Don't Forget to Share it and Plus 1
Watch This in Video
You Should Also Read: Update Old Posts to Re-Appear as New Posts - SEO Tips
Customizations in Social Content Locker
You can customize many things in above locker.You can Change Locker Theme, Actions like " Like Us Follow Us Tweet Follow Recommend" and some others i will mention Below.Social Locker Actions:
You can change these actions.Just Replace One of the following according to your Need.Actions are mentioned in the Image.
Replace them with any of these in the code.
buttons: { order:[ "facebook-like","twitter-follow","google-plus" ] },
Heading and Message in Locker
You can also change the text which appears when content is locked in locker.In the Above code Heading is Like us to unlock this content and Message is This part of post is locked .......
Locker's Theme and Look
In the above code we have selected secrets theme which is
But You can also use below mentioned themes
1.dandyish
2.starter
3.glass
4.flat
Just Replace any of the above with the secrets in your code.
Timer and Close Button:
You can also change timer and close button options.Just replace timer: 0 with any number in above code and set a time in seconds after which locker will automatically close.Also if you want to place a close button after on the upper right corner so that users can easily close your locker if they want to without liking then change close; false to true.
So We have successfully added a Social Content Locker in our Blogger Blog and also we can custimize it according to our will.Anything if you want to ask then you can comment or can Ask in comments.
39 comments
Nice tutorial it works...
:-bd
thank u so much
Glad
Greate Post and Help.
You know if I use tweet and follow on Twitter I could use 2 different urls like on Facebook?
If yes, how?
I did not try that but you can try by replacing the Google or Facebook Button url with one that you want. if not works then comment i will have to make new script
what is appid?
App id is you application id given by the platform like google and facebook. But what we need is facebook app id which can be found in developers mode in facebook by verifying our website adress.
Need your help!!!
After i follow everything that you mentioned in your blog, but my blog still shows nothing. please show an example of inserting those code and how to add content into html tab.
+Best Entertainment Sure i will soon re-add a video into this post because spmedays before youtube removed one of my channel on which my that video was hosted. So i will re-upload it to some other place and add a link in this post.
facebook like , share button stop working ........ droidtechteach.com
acebook like , share button stop working :(
Yes I have seen, there is something wrong with the script host server. I will replace it as soon as i find a working one
But Google+ and Twitter are working
like button not work. please help
How to the code to locker to subscribe to youtube?
Facebook Share button is not working, also twitter button is not showing details, Please check on this post.
please help me, facebook button does not appear
you can view it directly on my blog http://darezsourcecode.blogspot.co.id/2016/05/two-dots-admob-leaderboards-share.html
Tried today, the fb like and share still not working. Google+ and twitter working nicely. Please help us.
Thank you for the good work
Thanks for this ~ i like it
can I use it in my own single page website
Facebook Like Is Not Working......
any news about facebook like and share buttons?
good but in mobile it is showing only onc item
only working social locker for blogger, thanks
Sorry, it's not working for facebook. Even your inside this post =\ I've been searching a thousand solutions like this but no one can make it works for facebook =(
Mine Is not working!
Help me :(
Brother Facebook Like Button Not Showing, Please Check it.
Hi. I need facebook share function and button as my contect locker. Can you please help me? Thanks
hello. pls help me. the facebook like and share is showing ERROR
bie sab fbb ka share button kam nahi kar raha ha kia karun
facebook like and share buttons not working not working help
It doesn't worked when I installed it on my blog
when i change it to my social links..not shownig.how can it fix?
share button not working
app id is invalid
not working bro not showing anything plz help me
bro it works but when i publish the post it's not showing what should i do plz contact me 9076387566
email-akshaykerkar12@gmail.com
plz help me
I visited 7 or 8 websites but there codes was not working. Finally i got this code on your Blog. I used it on Blogging Efforts and it is working great. Great work Thanks for sharing :)
EmoticonEmoticon