Tip – How to Embed Facebook Posts Now on your Site

Facebook has now introduced ‘Embedded Posts’ feature that lets you easily add any public posts from Facebook to your website or blog. The embedded posts content can include pictures, videos, hashtags, status updates and other content.

To embed a post, first check if the post is public by hovering over the audience selector and look for a globe icon. If the post is public, click the "Embed Post" option from the drop down menu. Then just copy-paste the provided code on your webpage.

Note: Only public posts from Pages and Facebook users can be embedded.

The Embedded Post will show any attached media, as well as the number of likes, shares, and comments for that post. It will also enable people to:

• Like or share the post directly from your web page
• Like the Page or Follow other posts from the author
• Visit the post’s comments, photos, hashtags and other content on Facebook

As of now, Facebook has launched this functionality for few publications namely CNN, Huffington Post, Bleacher Report, PEOPLE and Mashable. Facebook is planning a broader rollout soon, hence it might take some time before you can see the ‘Embed Post’ option in your FB account. Perhaps, if you’re desperate to try this new feature now then there is an easy workaround that requires you to simply add a code along with the post link.

How to Embed Facebook Posts Now [Trick] –

Open any Public Facebook post that you want to embed and copy its permalink or web address. You can also right-click the date on the post to copy its link address.

Next, copy the below code snippet to your webpage and remember to replace POST_URL_HERE in the snippet with the Facebook post permalink you just copied.

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

<fb:post href="POST_URL_HERE"></fb:post>

If you wish to embed another Facebook post on the same web page, then you don’t need to copy-paste the entire snippet again. Just create a new <fb:post> element and set the value of the href attribute as the permalink of that Facebook post.

Here is an example of an Embedded Facebook Post, Try it out below:

Tip via [Labnol]