How to Embed Facebook Posts on Your Website

It may seem a little counter-intuitive to want to embed Facebook posts on your website. After all, most of Facebook marketing is about the right way to post your website on Facebook. Even so, Funneling traffic back and forth between your social profiles and your website is a good idea.

You can direct traffic from your website to Facebook in a few different ways. You can install the sidebar widget, to encourage users to like your page with the social pressure of the pictures of their friends. You can install the Facebook Comments plugin, to force users to use Facebook if they want to interact on your site at all. You can install a floating sidebar with social sharing buttons for individual posts. None of those options have quite the same prominence or weight as an embedded Facebook post, however.

Why might you want to embed a Facebook post? Well, the same reason you might want to embed a Twitter tweet or an Instagram picture. Instead of taking a screenshot of the content, you embed it. It’s still there, to illustrate whatever point you wanted to illustrate, but it’s surrounded by additional buttons and information that help direct people back to your Facebook page. Users will be able to see the page avatar, name, description, likes, comments and shares along with a dedicated like button.

Embed Limitations

You can embed virtually any post, whether or not you own the page. This allows you to embed a post from a third part, as the foundation or as support for a blog post you’re making. It’s a great way to engage fans of that account and draw them to your blog to take part in the discussion, where you can then direct them back to your Facebook page for further engagement – this time as your audience.

There are, however, a few restrictions on the posts you can embed.

• They must be public. At the top of every Facebook post, under the name of the account posting it, is a timestamp showing when the post was made. Next to that post is an icon, like a small globe or a silhouette of a person. This icon represents who can see the post. The globe icon is completely public; anyone at all can see the post. If the post is only visible to friends of the account, it can’t be embedded.
• The post must be live. Embedded posts are pulled from Facebook dynamically. If the host of the post edits it, the edits will show up in the embedded post. If the host deletes the post, the embed code will display an error message about the post being removed.

In order to embed a post, you need to go to Facebook and generate the embed code for the post.

Method 1: Facebook Developers

The first method to embedding a post is fairly simple, but it’s not a very streamlined process.

1. Grab the URL of the post you want to embed. If you don’t know how to find it, you’re not alone; Facebook makes it hard to intuitively locate. You need to hover over or click the timestamp of the post. Copy that post URL or open it in another browser tab so you have it ready.
2. Visit developers.facebook.com while logged in, to pull up the Facebook developers page.
3. On the top navigation bar, click the docs button. Under the sharing tab on the left, click social plugins and embedded posts. This page has all of the documentation about embedding posts, including the warnings mentioned above. Here, you are presented with a sample embedded post. There are two boxes above the sample; URL and width.
4. Set the URL as the URL of the post you wanted to embed. This will change the sample to a sample of the post you’re embedding.
5. Change the width, if you want. As the page says, you can set the width of the post to anything between 350 and 750 pixels. Ideally, you will choose a width that fits within the layout of your blog without stretching the page.
6. Click the “get code” button. This will pop up a window with the code for the embedded post. Copy and paste this code into your blog post.

Note that the code you embed includes Facebook’s JavaScript kit, which you have to have embedded in your site for other plugins, like the sidebar widget or the comments plugin. You don’t need to worry about conflicts; they operate as discrete pieces of code keeping each plugin separate. They won’t interact with each other and there’s no problem with having more than one on the same page.

Method 2: Direct Post Access

If you’re anything like a normal person, that six-step process is long and annoying. Thankfully, Facebook streamlined the entire process to make it easier to embed posts. Ready?

1. Identify the post you want to embed. Just find it and make sure it’s on your screen. This can be a complicated step, if you have your monitor turned off or something.
2. Click the drop-down arrow in the upper right corner of the post. In the drop down, locate the option labeled “embed post.” Depending on your access and the permissions of the post, there may be a number of options, or there may be only a couple.
3. In the box that pops up when you click to embed, set the width of the post.
4. Copy and paste the code from the box above to your blog entry.

That’s it. It’s a much easier and more direct method for embedding a post. So why does the first method direct you all the way to the developer side of Facebook? The other resources in the documentation section can be invaluable. If you have any questions, knowing where to find the embed options in the documentation section helps answer them.

Tips for Using Embedded Posts

• Embed positive testimonials from users. That’s right; you’re not restricted to just embedding posts from pages. As long as they’re public, you’re golden.
• Embed posts as the foundation for discussion, something to play off as you write your post.
• Embed posts as references or proof. Don’t just say such and such brand posted on their Facebook page; embed the post for users to see.

The creative possibilities are endless. Make use of this tool!