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>.
<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/priosoft"}, facebook: {url:"https://www.facebook.com/priosoft.bd"}, google: {url:"https://plus.google.com/114226931796628368753"}, 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:
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
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
starterby default.- Secrets:
secrets
Dandyish: dandyish
Flat: flat
Glass: glass
Starter: starter
- 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.
<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//priosoft.bd/", //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/priosoft.bd" //replace with your Facebook url
},
share:{
appId:1234567890, //write your App ID,
url:"http://4techblogger.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.