Facebook Share to Unlock Content using jQuery & Facebook API

by
Post Views: 1,530

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.

Its simply called as “How to Unlock content after sharing it with Facebook or Twitter using API”

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 – Facebook Share to Unlock Content

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

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

49 thoughts on “Facebook Share to Unlock Content using jQuery & Facebook API”

  2. The script works fine on desktop but on mobile I get the following error:

    Can’t Load URL: The domain of this URL isn’t included in the app’s domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

    Is there a way to reach you directly for help getting this script to work?

    Reply

  3. Whenever I am paste this code in blogger template it shows following error.

    Error parsing XML, line 9, column 64: The reference to entity “version” must end with the ‘;’ delimiter.

    So what I do now

    Reply

  5. Hi, this is fantastic. I am using it on a public tablet and users need to be logged out after sharing. How do you do that?

    Reply

  7. Hey Admin
    the script is perfect but there is only one problem: we can use it only with one link?
    is there any solution to make it avilable for multi links?
    I am using Blogger and I have the wright to insert the code one time in Head, which means that I can use it only for one link!
    thank you

    Reply

  10. Given URL is not permitted by the Application configuration: One or more of the given URLs is not permitted by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.

    Reply

  14. thks for the script

    How I can customize the button to share?
    I want to put an image with the text “share to view content” as a button
    thanks

    Reply

  20. its working fine when i tested it in html and in w3schools

    But i don’t know why it is not working in wordpress

    please help me what should i do ???

    Reply

  21. I get the same error code as some other people described, “An error has occured…” but also

    “API Error Code: 191API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application.”

    Any ideas? Email: nudelkim@gmail.com

    Reply

  22. This isn’t working for me.
    When I insert it in my HTML document in index.html the step 2 code doesn’t have colours it is not recognized by Apptana Studio. In the website it just shows like text…

    Reply

  32. dear sir your adsense code is also available in demo contain please remove it either someone make harmful for your adsense earning….
    thanks for this incredible post
    aviral

    Reply

Leave a Comment