Select Page

Usually I see people invite folks to visit their organization or company’s Facebook page via a little icon off in a sidebar or in the header or footer of the page.  Don’t get me wrong – that is a handy way to ensure that the link to a Facebook presence appears on every page of the site, but I suspect many visitors tune them out.   Chances are, if someone is on your website they want to learn more about you or your organization and they are not searching your site for a link to your Facebook page.

If you want to use your Facebook profile or page to help establish an ongoing connection with website visitors, you really need to show them what is in it for them.  You can easily do that by embedding selected posts from Facebook on your website.  Any site that includes a blog or a news section can easily find ways to incorporate Facebook content into the site in ways that are natural and engaging.

Because embedded posts are visible to everyone – even visitors without Facebook accounts – only posts with a privacy setting of Public can be embedded.  All Facebook Page posts are automatically public so that is never a problem.  Any Public posts by individuals can be embedded but if the person who posted it changes the permissions on the post later it will disappear from your website and be replaced by a Facebook placeholder reading: The page you requested is no longer available. The post may have expired or the privacy settings may have changed.

By bringing a taste of your Facebook presence back to your website you can promote interaction by directing visitors to lively discussions centered around photos or videos shared on Facebook.

As of WordPress 3.9 embedding is easy for simple status updates, videos,  image posts, and shared links.  Just locate the permalink to the update by clicking the Date/Time stamp on the post and then copying the URL from your browser onto a line by itself  just as you do with a Twitter post as shown in Embedding Content in WordPress:

https://www.facebook.com/ComputersInLibraries/posts/650315428338349

to display this:

And that may be all you need.  The embedded post will be Facebook’s default width of 466px.  If you use a wide format content area like me, you may want to embed a larger size.  Facebook supports embeds of between 350px and 750px.  My content area is 900px wide so I go with the largest – 750px – and wrap the embed in a div with a 75px left margin so the embedded item is centered in my posts.

The simple URL method only works for  status updates,  image posts, videos, and shared links.  If you want to share a photo album or if you want to set a custom width for the embed you can use the Embed control found on every Public Facebook post.

Grab The Embed Code

Exactly where the Embed code option appears can vary by post type and your location within Facebook.  It is usually easiest to find when you are on an a post or album’s unique page.

This slideshow requires JavaScript.

Insert Code in Post/Page

Assuming you are using the stock post editor you can paste that embed code into your post in Text view exactly where you would like it to appear.  You may want to wrap it in a block element so you can style or position it if needed.

My personal preference is to create  a custom shortcode with Scott Reilly’s Text Replace plugin.  I get all my embeds ready in Text Replace and then when I am ready to compose, I just insert the shortcode where I want the post to appear in Visual mode so I can better picture the final layout while I am posting.  This has the added benefit of allowing me to easily re-use an embed on other posts if needed.

I have also found that the embedded posts appear more quickly when you use the full code embed method compared to the simple URL.

Examples

Here are some samples of the basic Facebook post types as they appear as embedded posts on a website.

Photo Shared by a Page

This example shows how an item posted by a Facebook page appears.  The rest of the examples are embeds of posts to my personal Facebook profile.  For the most part, they are the same. The primary difference is that Page based embeds offer a single click Like option in the upper right while personal posts offer a link to the post author’s profile where someone could make a Friend Request.