Social Content Locker For Blog And Websites

That Social Locker widget is actually awesome because through the use of your unique strategy, you possibly can gain regarding social traffic or shares each day. But the most beneficial use of the widget is actually by concealing your Acquire links with your Blog, Subsequently to uncover it, they should be like your own page, tweet, or The search engines + your own article. And whenever they made their particular action, when that they exit and recently that that they open your site, They aren’t going to be seeing the actual social locker in the article where by they built their current action (share, just like, +). The down below procedure will show you on tips on how to insert it with your Blogger Website or just about any HTML website

Social Locker contains three social buttons as well as a locker displaying flat. The Social buttons contain Facebook, Twitter as well as Google plus. Whenever, a person would certainly either press Such as, Tweet or Additionally one button it’d display the concealed content. This allows a person to get additional real social fans. Feel Free to relish the Following Real time Demo.

Now there are many one available only but not features are ok to use them because you have to watch out your loading time too so think twice before using the codes on your web that can make your loading time high of bad SEO effect. But this one is light weight and have to bunch of codes. All is here you you also do not have to hit any others URLs. Now go for it and garb the code to use it.

Features:

1.) Pure JQuery, JavaScript CSS Added.
2.) No Extra Code File Required.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

HTML:

<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="text-align:center;">
<img src="Add_Hidden_Image_Here" style="margin:0 auto;" />
<p>Add Your Hidden Text Here</p>
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</div>
</article>
<div id="exelockpopup" style="text-align:center;"></div>

JQuery/JavaScript/CSS:

<link type='text/css' rel='stylesheet' href='https://googledrive.com/host/0B8dPWvOrtDiAS01WenpMSHcxMkk' />
<script type='text/javascript' src='https://googledrive.com/host/0B8dPWvOrtDiAeWE3QTBOcXNiUm8'></script>
<script type='text/javascript'>
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: "https://www.exeideas.com",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "http://www.facebook.com/EXEIdeas",
appId: "302317266496079"
},

google: {
url: "https://www.exeideas.com"
}
});
});;;;
</script>

Customization:

1.) Edit Your HTML As Per Your Requirements. Rest JavaScript Is Ok For General Us. Change the Twitter Hidden Text And Hidden Image And Your Social Links In The JavaScript With Your Own. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…