Earlier today, Facebook announced that it had rolled out the ability to embed posts to all users.
It’s actually a little misleading, because by “Facebook Posts” what I, and Facebook, really means is “Facebook Page Posts.” You aren’t currently able to share your personal posts, status updates, and so on – but if you manage a page, as of this morning you have the ability to embed the post on any external website.
We introduced Embedded Posts in July to make it easy for publishers to add any public post from Facebook to their blog or web site. Today, we’re excited to make Embedded Posts available to everyone. We’ve also added several enhancements based on feedback from our launch partners.
Here is a live example of this in action!
It’s very simple to embed a post on a webpage. Here are the steps required.
1. Choose a post to embed
On your Facebook Page, determine which post you want to embed on an external website. Mouse-over the upper-right corner of that post, and you’ll see a downward pointing caret. Click on it, and you’ll see a new option at the very bottom labeled Embed Post.
2. Copy the Embed Code and paste onto your website
A pop-up will appear with the embed code and a preview. All you have to do is copy the code and paste it where you want it to appear on your webpage.
Your embed code will look very similar to this.
That is literally it. Facebook did us all a solid by making the embed process extremely easy.
The Embed Code Isn’t Working For Me…
Ah, I imagine this will be a common problem until Facebook updates it’s embed code page.
If you have a Facebook like button on your site, like I do in my sidebar, the default embed code will not work!
The reason for this is the first part of the embed code, which I’ve highlighted in the below image.
By removing this first portion, your code will work just fine. The reason you need to include it is because this is the exact same code block that you already have on your page for your Like button.
The resulting embed code is now much shorter, and looks like this.
<div class="fb-post" data-href="https://www.facebook.com/MySocialAuthority/posts/421023408018463"> <div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/MySocialAuthority/posts/421023408018463">Post</a> by <a href="https://www.facebook.com/MySocialAuthority">My Social Authority</a>.</div> </div>