How to Create social Content Beautiful Locker in Blogger
We all cannot deny the beauty and power of social media and the tons of people that are engaged on social media networks these days. And if you have highly relevant and quality contents, but quite to be widely shared by itself, then you should definitely use the Social Share Content Locker or Share to Unlock Content, to lock your contents until your reader unlocks it by promoting it on social media sites. If you are not familiar with What Share to Unlock Content or Social Content Locker is, then let me describe it briefly.What is Share to Unlock Content or Social Content Locker? Share to Unlock Content or Social Content Locker is a feature or widget that is used to lock your most valuable contents behind a set of social media buttons until your visitors' Likes, Shares or Tweets your contents or page on social media networking sites, like Facebook, Google+, Twitter, etc. In other words, it asks your visitors to pay with a Tweet, Like, Share if they want to access your content.
How to Add a Share to Unlock Content Locker in Blogger Adding Share to Unlock Content is very simple, just follow the below steps and you will be done within no time.
Step 1. Login to your Blogger blog and select Template and click on Edit HTML.
Step 2. Search for the </head> tag and paste the Query code just above the </head> tag and save your settings. You can also skip this step if you already added the JQuery code earlier on your Blogger template.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
Step 3. Now again Copy and paste the below code just above the </head> tag.
<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:"https://twitter.com/shaampc"},
facebook: {url:"https://www.facebook.com/shaampc01"},
google: {url:"https://plus.google.com/u/0/b/767940575958828586/767940575958828586"}, 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>
Note:
Replace Twitter and Google+ link with your own links and URL and change Facebook page URL with your own at link number; Now create a new post and follow the following steps:
Step 4. Edit your post on HTML editor and paste the below code.
<article class="socialLocker">
<div class="to-lock" style="display:none;">
-- Add Your Hidden Text Here --
</div>
</article>
Note:
Replace the “Add Your Hidden Text Here” with the entire text or whatever you want to lock at line number 8.
