Facebook Launches Tool for Creating Embedded Posts

               Update: I had previously shared a workaround for embedding Facebook posts in your website but looks like you no longer need it 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.

You may see this sample webpage that uses Embedded Posts from Facebook though that profile hasn’t been approved for embedded posts yet.

  

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