Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : 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); 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

  • Facebook
  • Twitter
  • Google+
  • Linkedin