Search code examples
facebookfacebook-graph-apifacebook-like

Is there a way to embed facebook pictures on my website, which also allows likes, comments etc?


Is there a way to display facebook pics on my website, which allows a user to Like, Comment etc FROM my website? I want to display a photo gallery of my facebook page (which is public) but with the ability of users being able to like it, comment etc.


Solution

  • After MUCH digging around I found exactly what I was looking for, and no need for SDK!!

    How to Embed Facebook Posts

    Facebook introduced an “embedded posts” feature to help you embed any Facebook post – you can embed photographs, videos or regular status updates – on another website or blog. For instance, if a celebrity has shared a photograph on his or her Facebook Page, you can easily embed that image on your website by adding a single line of code.

    You may embed any content that’s shared on Facebook Pages and personal profiles as long as the content owner has set the visibility of that post to Public.

    There’s a small catch though. Facebook has enabled the Embedded Posts functionality for a handful of big web publishers including CNN, Mashable and The Huffington Post. Everyone else will have to wait to see that Embed link alongside their Facebook content.

    There’s however an easy workaround though that will let you embed any Facebook content on your website even if “Embedded Posts” are not officially available for that Facebook account.

    Embed Code for Embedded Posts

    <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/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
    <div class="fb-post" data-href="YOUR_URL_HERE"></div>
    

    Open any Facebook Post and copy the permalink (permanent URL) of that post. You can right-click the date of the post to determine its permalink. Next replace YOUR_URL_HERE in the snippet above with the permalink that you just copied and paste the modified snippet anywhere in your website. Done!

    If you wisht to embed another Facebook post on the same web page, you don’t have to copy-paste the entire snippet. Just add a new element and set the value of href as the permalink of your Facebook Post. The video tutorial explains this in greater detail.

    Here is a blogpost that explains it all: http://www.labnol.org/internet/embed-facebook-post/28151/