Social content locker is a great resource to get social signal to any of your blog on blogspot. We have seen a lot of people is searching “How to integrate and install social locker in blogspot or blogger”. Let me tell you that blogger is totally different than WordPress, rather than blogspot in wordpress, you can install plugin to work instantly but in blogger it is little bit technical difficult.
what is social content locker and why to use?
You have really something amazing and informative to share with your readers or visitors. Then you must take something back either in the shape of social share to get more exposure to the virtual world. Social content locker is that which can give you this.How to add social locker in blogger?
In this article I’m going to teach you that how you can create and install social content locker in blogspot. Please follow the following steps.Step 1: 1. Login To Blogger.com >> Template >> Edit HTML >> Proceed.
Search for just and above it paste the following CSS Coding.
<link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/>Save the template and proceed to step 2.
Step 2: Whenever you want to use social locker you have to follow the following instruction.
Go To Blogger.com >> New Post.
Select the HTML Tab from the blogger post editor and paste the following coding.
<article id="default-usage">Customization:
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
</div> <div style="text-align: justify">
Add Your Hidden Text Here
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript"
src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://www.crazzyblogger.net”,
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/mashblogging”,
appId: "418044881593120"
},
google: {
url: "http://www.crazzyblogger.net”
}
});
});;;;
</script>
For Facebook: Replace http://www.facebook.com/mashblogging to your Facebook page
For Twitter: Replace http://www.crazzyblogger.net with your Website's URL or etc.
For Google+: Replace http://www.crazzyblogger.net with the URL of your website or post.
Replace Add_Hidden_Image_Here with the Image that you want to Hide from the users and want to show after the social share, tweet or google plus.
Replace "Add Your Hidden Text Here" With the text that you want to hide from users and want to get social share.
Remember: Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace 418044881593120 from above coding.
