Tweet or Facebook like to unlock the content using jQuery
In my previous post I had explained How to Create Share Social To Unlock Download Link using javascript. After I get a lot of contact on the part tutorial on Facebook and Tweet to unlock content. Today, I will explain how to request visitors to like or tweet before appear the content or download link using jQuery, Facebook API & Twitter API.
Today, social networks are becoming increasingly popular, so the most effective method for people to know our website is sharing link of our website to social networks to bring new visitors to out website. There are two largest social networks are Facebook and Twitter.
To do Tweet or Facebook like to unlock the content you need:
– The first you need to create an Facebook App, register your website & get an App ID.
– The second, you need to create a Twitter account to using Twitter API.
Step 1:
Include the following facebook script and Twitter script in your page header, before the body tag.
|
1 2 |
<script src="//platform.twitter.com/widgets.js"></script> <script src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=1471878123076293"></script> |
Step 2:
Include jQuery and Plugin:
|
1 2 |
<script src="js/jquery-1.8.2.min.js"></script> <script src="jquery.total-storage.min.js"></script> |
Step 3:
jQuery to initialize social locker:
|
1 2 3 4 5 |
<script type="text/javascript"> jQuery(document).ready(function(){ SocialLocker.init("#locked"); }); </script> |
Step 4:
Place the below javascript function anywhere in the web page. I have used function SocialLocker events that trigger after user twitted on twitter or like on facebook, it will request visitors to tweet or like before appear the content. If not, The content is hidden.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<script type="text/javascript"> var SocialLocker = (function() { var lock_div, lock_div_identifier; var constructor = function(div) { lock_div = div; lock_div_identifier = jQuery(div).data('lock-id'); if(jQuery.totalStorage(lock_div_identifier) == 1) { jQuery(div).show(); } else { jQuery(window).load(function(){ SocialLocker.lock(); twttr.widgets.load(); window.twttr.events.bind('tweet', function (event) { SocialLocker.unlock(); }); FB.Event.subscribe('edge.create', function(href, widget) { SocialLocker.unlock(); } ); }); } }; buildLocker = function() { var overlayHTML = "<div class='box'><div class='lock-overlay' style='height:"+jQuery(lock_div).height()+"px;width:"+jQuery(lock_div).width()+"px'><h2>Please tweet or like to unlock this content</h2><div align='center'><a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a><div class=\"fb-like\" data-href=\"https://visofts.com\" data-layout=\"button_count\" data-action=\"like\" data-show-faces=\"false\" data-share=\"false\"></div></div></div></div>"; jQuery(lock_div).append(overlayHTML); } buildUnlocker = function() { jQuery.totalStorage(lock_div_identifier,1); jQuery(lock_div).find('.lock-overlay').slideUp(); } return { init: constructor, lock: buildLocker, unlock: buildUnlocker } }()); </script> |
Script codes above using the TotalStorage function to Storage $.cookie on the browser if visitor tweet or like to show content.
To set Unlock content i set:
|
1 |
jQuery.totalStorage(lock_div_identifier,1); |
To check if visitor already twitted or liked the content i use this script code following
|
1 2 3 4 5 6 |
if(jQuery.totalStorage(lock_div_identifier) == 1) { jQuery(div).show(); } else { //Script code events twitter and facebook api } |
Use CSS to beautify the display on your website:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style type="text/css"> body { font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif; color: #404040; background: #0ca3d2; } #container{ margin: 0 auto; width: 700px;text-align: center;} #locked{ visibility:visible; position: relative; } .lock-overlay{ position: absolute; z-index:100; background-color: #0ca3d2; top:0; left:0; border-radius:10px; } .lock-overlay h2{ color:#fff; text-align: center; } .box{ position: relative; margin: 0 auto; padding: 20px 20px 20px; width: 310px; background: white; border-radius: 3px; -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); } </style> |
For the better you can customize CSS with your site.
I hope helps you build your system tweet or like to unlock the content.
