In my previous post I had explained How to Create Simple Tweet to Download Files using jQuery & Twitter API.  After getting huge response from that post, My readers asked me to write a tutorial on FB share to unlock content

Only few lines of code we can easily implement this cool feature. I hope this tutorial will help you to drive traffic, increase facebook shares & improve search engine ranking for your websites. For this you need to create an Facebook App, register your website & get an App ID.

Facebook Share to Unclock Content

 Step 1

Include the following facebook script in your page template, ideally at the end, before the tag.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 2

Place the below javascript function anywhere in the document. I have used Facebook’s Feed Dialog – It allows a person to publish individual stories to their timeline, along with developer-controlled captions and a personal comment from the person sharing the content.

Please click here for more information on Feed Dialog

function shareOnFB() {
 FB.ui({
        method: "feed",
        link: "http://w3lessons.info",
        picture: "http://w3lessons.info/logo_large.png",
        name: "W3lessons - PHP, MYSQL, HTML5, CSS3, jQuery, Ajax, Facebook Style Scripts",
        caption: 'w3lessons.info',
        description: "w3lessons.info is a programming blog maintained by Karthikeyan K. Tutorials focused on Programming, Jquery, Ajax, PHP,HTML5, CSS3, Web Design  and MySQL"
      }, function(t){
        var str = JSON.stringify(t);
        var obj = JSON.parse(str); 
        if(obj.post_id != '')
        {
           //after successful sharing, you can show your download content here
        }
      });
}

I hope you like this tutorial. Please feel free to download it & let me know If you need any help

View Live Demo & Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/10/fb-share-unlock-content.jpghttp://w3lessons.info/wp-content/uploads/2014/10/fb-share-unlock-content-150x150.jpgKarthikeyan KfacebookFreebiesfacebook,share to unlock,tips & tricks
In my previous post I had explained How to Create Simple Tweet to Download Files using jQuery & Twitter API.  After getting huge response from that post, My readers asked me to write a tutorial on FB share to unlock contentOnly few lines of code we can easily implement this...