How to Embed Facebook Posts in your Website

Facebook has 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. You may see this sample webpagethat uses Embedded Posts from Facebook.

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 <fb:post> element and set the value of href as the permalink of your Facebook Post. The video tutorial explains this in greater detail.

Video Tutorial: How to Embed Facebook Posts

Update: The workaround for embedding Facebook posts in your website is no longer needed as Facebook has officially launched the code generator for embedded posts at developers.facebook.com.

Just paste the URL of a Facebook post, hit the “Get Code” button and pick the HTML5 version of the embed code. Also, the warning on the Facebook page still says that “embedded Posts are currently available to a handful of news publishers” but it can be ignored as the generated embed code works just fine for any public post shared on Facebook. ↓

Written by Amit Agarwal, personal technology columnist and founder of Digital Inspiration. You can follow him on the social web or sign up for the email newsletterfor your daily dose of how-to guides and video tutorials.