<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="http://demo.phpgang.com/social-locker-jquery/social-locker.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
<div id="lock-my-div" style="display: none;">
<p>
<!-- YOUR CONTENT GOES HERE -->
</p>
</div>
.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%);
}
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: "http://www.phpgang.com/" //tweet link
},
follow: {
title: "Follow us",
url: "http://twitter.com/phpgang" // Twitter profile to follow
}
},
google: {
plus: {
title: "Plus +1",
url: "http://www.phpgang.com/" // Google plus link for +1
}
},
linkedin: {
url: "http://www.phpgang.com/", // LinkedIn url to share
share: {
title: "Share"
}
}
});
});
