Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

Facebook Share to Unlock Content using jQuery & Facebook API

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 Facebook 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); = id;
  js.src = "//";
  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() {
        method: "feed",
        link: "",
        picture: "",
        name: "W3lessons - PHP, MYSQL, HTML5, CSS3, jQuery, Ajax, Facebook Style Scripts",
        caption: '',
        description: " 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

  • Facebook
  • Twitter
  • Google+
  • Linkedin