I saw a website where for some work and at the main content they add a box with message to The content is locked! Please like us to to unlock content. So I found the way how he did that and found a jQuery plugin added to do this so decided to give my reader this functionality so the can implement in there web application and give useful data with little contribution like tweet, like, plus or share on social network and get information they want.
I have used a jQuery plugin which add social media buttons for Twitter tweet, follow, Facebook like, Google plus or LinkedIn share instead of your content, actually it hide your data and show buttons once you like or tweet it will hide buttons and show you content and create a cookie on your browser so you will get content every time until cookie available on your browser.
Include jQuery and Plugin:
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="social-locker-jquery/social-locker.js"></script>
jQuery to initialize social locker:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function ($) {
$("#lock-my-div").sociallocker({
text: {
header: "The content is locked!", // replace content with this heading
message: "Please support us, click like button below to unlock the content." // hidden content message
},
theme: "starter", // Theme
locker: {
close: false,
timer: 0
},
buttons: { // Buttons you want to show on box
order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"]
},
facebook: {
appId: "2068418453432508",
like: {
title: "Like us",
url: "https://www.facebook.com/9H9Gang" // link to like in Facebook button
}
},
twitter: {
tweet: {
title: "Tweet",
text: "PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos.", // tweet text
url: "https://www.phpgang.com/" //tweet link
},
follow: {
title: "Follow us",
url: "http://twitter.com/phpgang" // Twitter profile to follow
}
},
google: {
plus: {
title: "Plus +1",
url: "https://www.phpgang.com/" // Google plus link for +1
}
},
linkedin: {
url: "https://www.phpgang.com/", // LinkedIn url to share
share: {
title: "Share"
}
}
});
});
</script>
In above jQuery we give our links to user to like or share and initialize social locker plugin for a div with id lock-my-div and that div will be replaced with social content and your defined message once user perform any activity it will hide that social buttons box and show your content div.
CSS used to beautify the display:
<style type="text/css">
.jo-sociallocker.jo-sociallocker-msie {
background-color: hsl(200, 65%, 91%);
border-color: hsl(190, 65%, 84%);
color: hsl(200, 50%, 45%);
}
.jo-sociallocker {
background-color: hsl(50, 81%, 94%);
border: 1px solid hsl(39, 83%, 91%);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
margin-bottom: 20px;
padding: 8px 35px 8px 14px;
-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);
width:60%;
margin-left: auto;
margin-right: auto;
}
.jo-sociallocker-button{
float: left;
margin-left: 10px;
}
.jo-sociallocker-after-text{
margin-bottom: 20px;
}
.jo-sociallocker-buttons{
height:35px;
}
.jo-sociallocker-strong{
font-size: 30px;
color: hsl(0, 0%, 0%);
}
</style>
You can customize CSS as per your website layout.
Content div replaced with social buttons
<div id="lock-my-div" style="display: none;">
<p>
<!-- YOUR CONTENT GOES HERE -->
</p>
</div>
