How To Embed Facebook Posts

  • follow us in feedly
Published August 21, 2013 by Brad Knutson
How to Embed Facebook Posts

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.

Facebook Page 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.

Facebook Page Embed Code

Your embed code will look very similar to this.

Facebook Embed Code

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.

Facebook Embed Code - Won't Work

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>
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “How To Embed Facebook Posts

  1. Caelan Huntress

    Thanks for the heads up to strip the beginning of the code. You just saved twenty minutes of my life, Brad! In return, I will spend that time drinking water from a coconut in your honor.

    Reply
    1. Brad Knutson Post author

      Hey Caelan,

      No problem! It took twenty minutes of my life, so no need for anyone else to suffer!

      I suspect that Facebook will update the embed code page to warn people about this, much like they do on the Like button page (they warn you if you use two buttons to only include the first part of the code once).

      Thanks for reading and commenting!

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">