Facebook Share to Unlock Content using jQuery & Facebook API

Last modified on by Karthikeyan K

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

You May Also Like

49 Responses

  1. AVIRAL BHARDWAJ says:

    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

  2. adanluna says:

    Amazing!! thanks for this code

  3. Ajay says:

    Why it does not working in my blogger?

  4. How can i use this code for Blogger? Thanks so much 🙂

    I really need this feature but your tutorial is not clear, i can’t see the support for your visitor?

  5. Ivan says:

    How I can install this for facebook? Is there any tutorial?

  6. Marco Paulo Sabangan says:

    Please help me with the code, error prompt “An error occurred. Please try later”.

    here’s my e-mail please help me : marcopaulosabangan@gmail.com
    thanks in advance.

  7. Johnny says:

    Very nice!

  8. Nick says:

    Can you please help me out Idk how to fix it error on dialog you have my email if not…mail is nikoskedessa@yahoo.com…please help me to fix it…how to make dialog work for any link…only errors :/

  9. Chris says:

    Not Working

  10. Roy Tan says:

    Not working, I got this msg on the windows

    An error occurred. Please try later !

  11. Eloi Vicenç Gonzalez Mas says:

    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…

  12. Kim says:

    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

  13. demon says:

    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 ???

  14. I mean where should I place my app ID?

  15. I didn’t understand how to change the script…heeeelp! please

  16. Ravi Mane says:

    finally !!!!!!!
    thanks

  17. Maria Suarez says:

    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

  18. Puneet Kansal says:

    i want facebook share to unlock content for my wordpress website
    can u send me and how it works
    puneetkansal04@gmail.com

  19. Gabriel Dias says:

    Is it possible to share a real post from a facebook page?

  20. Andrei says:

    This doesn’t work anymore. It doesn’t work even in your LIVE DEMO. Can you please update it?

  21. Vivek Waghela says:

    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.

  22. Vivek Waghela says:

    error while sharing and showing hidden content

    • izak says:

      you need to develop a app id with facebook its very complicated i tried it took me 14 hours to get it right

  23. izak says:

    thanks guy what do you charge for building websites

  24. 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

  25. Giuseppe Adriano Giadone says:

    It’s possible to add a counter for shares?

  26. aman_basanti says:

    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?

  27. book says:

    Link died, reupload, please/

  28. Karan Kj says:

    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

  29. stevenwaters says:

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *