Social Content Locker for Blogger
 |
| social-content-locker-for-blogger |
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 in case something goes wrong.
Let's start.
Go to 'Template' and click 'Edit HTML'.
Step 2:
Make sure whether jQuery library is already included in your blog. If not, search for (Ctrl+f) <head> and write down the following line just below <head>.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>Step 3:
Now search for (Ctrl+f) </head> and paste the following code before </head>.
Customization
Buttons- There are seven buttons available for content locking. These are,
- You can apply any number of buttons for your site. You can even change the order of these buttons in the order:[] option (index 8 of the code). Separate each button by a comma (,).
Remember, for every button you inserted, you have to provide an URL link of your social media page. However for buttons of similar type like "facebook-like" and "facebook-share", you may provide only one link. For instance, my facebook page is https://www.facebook.com/infopoint11 which I can use for both "facebook-like" and "facebook-share" buttons.
Text
This section consists of two sub-sections. These are "header" and "message"; "message" appears under the "header". You can modify the content of these two sub-sections of your own or you can leave these fields empty. Detailed description of "header" and "message" is depicted below (index 15 and 16 of the code).
header
message
Theme
This specifies the visual aspect of your locker. There are five predefined locker themes available. You can select any of the following styles (index 20 of the code).
secrets
dandyish
flat
glass
Additional Customization
Timer
A countdown timer will be displayed if you choose any integer value. For instance, if you want to close your social locker after 300secs, you can insert timer: 300 in your code. A 0 value of timer indicates infinite time (index 19 of the code).
Close
Change your code from close: false to close: true in order to display a close icon at the corner of your locker (index 19 of the code).
Now whenever you are interested to display social content locker in your blog post, wrap your code within this snippet of code.
<articleid="default-usage"><divclass="to-lock"style="display:none;">-- Hidden Content Starts --</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 have 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. In order to do this, change the facebook option as follows.
facebook: {appId:1234567890,//write your actual App ID},
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:{},share:{appId:1234567890,//write your App ID,},},
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 a variable where you can pass your current blog url and write that variable in facebook share section. Sounds dumb, right? Well if you are familiar with web designing you would probably understand what I'm talking about. But the purpose of this blog is to provide code for everyone. So the entire code is written below (for this last customization only).
<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({varcurrent_url = $(location).attr('href');buttons: {order:["facebook-like","facebook-share","google-plus"]},facebook: {share:{appId:1234567890, url:current_url},},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"});
Hope your problems will be solved by now.
Credit
This awesome widget is created 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.
Thank u infopoint11 for this amazing,helpful trick, i will definitly try it on my blog
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSavvy post . Incidentally , if your business is wanting a a form , my boss saw a sample form here http://pdf.ac/5Arwo6.
ReplyDeletefor the best coupons and deals you can go on paybackdollar.Paybackdollar have more then 5000 store of the world
ReplyDeleteand paybackdollar have the best quality and quantity. if your inerested go on givining link
coupon code
ReplyDeleteanthropologie free shipping
Thanks for sharing this amazing article, it is very informative post good work keep it up.