You might not have always approached your Facebook strategy with your website in mind, but there’s no time like the present. Although the social network is appearing in search results more often, many consumers will stumble upon your website before your Facebook page.
A great way to bridge the gap between your site and social presence is by taking advantage of Facebook’s embedding functionality. From buttons and posts to feeds and recommendations, you can introduce visitors to your more social side without them ever having to leave your site.
Here are six ways you can embed Facebook on your website.
1. Sidebar Plugins and Widgets
A simple way to display your Facebook on your website is through a plugin or widget. Depending on your content management system, different options will be available to you. We’ve focused on WordPress, since it’s used by more than 23 percent of the top 10 million websites as of January 2015. Here are a few of our favorite tools.
Developed by Facebook, this plugin offers a wide range of helpful features. Starting with the most basic, it adds “like,” “send,” and “follow” buttons to every post to help your site’s readers share your content. (For more advanced users, you can integrate Open Graph protocol and Facebook Insights into your site.)
Although you’ll be able to use the social buttons right away, you’ll need to enter your Facebook developer credentials to unlock additional features, such as publishing posts to an author timeline or Facebook page.
The Recent Facebook Posts plugin is similar to a native option offered by Facebook — the Like Box — in that it displays a list of your most recent posts. What’s different with this tool is that there’s more room for customization, which is especially important if you want your Facebook updates to blend in with your site’s theme. Everything is customizable through smart CSS selectors.
In addition to more visual flexibility, Recent Facebook Posts is SEO-friendly since posts are rendered as plain HTML. Additionally, your Facebook posts are cached for a customizable period of time to help improve performance.
The plugin requires a Facebook app in order to fetch posts from the social network, so you’ll need to be registered as a Facebook developer. We should note that this plugin works best with Facebook pages, so if you’re trying to pull from a profile, you might run into issues.
This plugin enables you to display a customizable, responsive, and search-friendly version of your Facebook feed on your website. With countless options, you can make the feed match the look and feel of your site.
Custom Facebook Feed supports multiple feeds of different Facebook pages. This can be achieved by specifying a page ID directly in the shortcode. Best of all, setup is extremely simple – a Facebook developer account isn’t required.
2. Facebook Buttons
Another easy way to connect your website visitors with your Facebook content is by adding buttons. These buttons can live on your homepage, in headers and/or footers, or on each individual page or blog post.
There are currently four options to choose from: like, share, send, or follow.
The “like” button is the quickest way for people to share your content with their friends. You can choose from four different layout options:
Regardless of which button you use, you’ll have the option of including the “share” button and displaying friends’ faces. You can also change the color scheme from light (default) to dark, the width of the plugin (standard layout only), and restrictions if your site is directed to children under 13.
You’ll notice there’s an option to change “like” to “recommend.” Functionally, these buttons are identical. What’s different is the intent behind a user’s action. Liking something represents a personal investment, while recommending a piece of content is slightly less emotional.
If you’d like to see the number of likes on your domain each day and the demographics of who is clicking the button, register your domain through Facebook Insights. Be sure to read through the FAQ before starting to configure your “‘like” button.
The “share” button is similar to the “like” button, but it gives people the option to add a personalized message to links before sharing to their timeline. Share dialog can be configured for iOS, Android, and the web, the latter of which supports Open Graph actions.
There are six different layout options to choose from:
It’s recommended that you include both the “like” and “share” buttons on your website to let people choose the way that they want to share your content. You should read through the different settings and FAQ before you configure your own “share” button.
The “send” button lets people privately share content on your site with friends through a Facebook message, to an email address, or with a Facebook group. Not only can you configure the height and width of the “send” button, but you can also adjust the color scheme (light or dark), the absolute URL, the children under 13 restrictions, and the referral tracking.
It’s worth noting that the story created by the action of sending your page can be enriched using meta tags to turn a simple HTML page into an Open Graph object. As with the previous two options, it’s recommended that you read through the settings and FAQ before creating your own “send” button.
The “follow” button lets people subscribe to your public updates on Facebook. Generally, if people are interested in keeping up with a page, they will like it. But if you have more public-facing figures on your team, such as your community managers, you can promote their Facebook profiles with a “follow” button on your website.
Similar to the “like” and “share” buttons, there are four different layouts to choose from:
Many of the same settings that can be configured with the other buttons apply here as well. Check the FAQ for more information on specific setting and sizing options before creating your “follow” button.
3. Facebook Like Box
The Like Box is a special version of the “like” button designed only for Facebook pages. It allows you to promote your page and embed a simple feed of content from it into other sites.
In terms of customization, you can tweak design elements, such as height, width, color scheme, and border. Other configurations include the ability to display friends’ faces, the “find us on Facebook” header, and posts from the page.
Because this can only be used for pages, you’ll want use the more traditional “like” button if you’re linking to a Facebook profile.
Update 2/11/16: It appears that the Activity Feed plugin is now deprecated.
In addition to buttons and boxes, there are two types of embeddable feeds that you can add to your website or blog. The Activity Feed displays the most interesting recent activity taking place on your site, using actions (such as likes) by other people. The Recommendations Feed displays the most recommended content on your site based on those same actions.
Functionally, the two feeds are very similar. Each one requires an app or page ID (located on your “about” tab) to begin the creation process. You’ll also be able to define which Open Graph actions (such as likes and recommends) you want to show as well as the maximum age of articles shown in the feed.
Both are great visual representations of what’s taking place on your page, but they do rely on actions from other people. If engagement is low, feeds might not be the best way to promote your page on your site.
Need to save time managing social? See how Sprout Social can increase your efficiency and help you engage with your audience with a free 30-day trial. Sign up now!
5. Facebook Badges
Facebook Badges have been around for years. Although the name might not ring a bell, you’ve probably seen a variation of the widget in use before.
For businesses, the most logical choice is the Page Badge that can be customized to display your page name, profile image, latest status update, and number of fans. The widget can be displayed vertically or horizontally for the best fit for your site. Once your badge has been configured, just copy and paste the code onto your site.
Badges don’t look as stylized as the rest of Facebook’s embeddable offerings. Not only that, but many of the other options provide you with more customization and some sort of social component. They’re fine as a backup, but it’s worth looking into the other embeddables first.
6. Embedded Posts
A great way to showcase your content, expand your reach, and grow your social community is through Embedded Posts. These fully functional posts are displayed on your website or blog and only require a few simple steps.
- Locate the post you want to embed.
- Click on the drop-down arrow icon in the top right corner of the post and select “embed post.”
- Adjust the pixel width of the post (between 350 and 750).
- Copy and paste the embed code onto your website or blog post.
The same steps apply whether you’re looking at a post in the timeline, news feed, or direct URL. If the “embed post” option doesn’t appear, the post you’re looking at is not public and can’t be shared this way.
An embedded post will display any media attached to it, along with the number of likes, shares, and comments that it has. Keep in mind that very long posts will be truncated with a “see more” option, which will display the full post on your website when clicked.
Each of the embedding options above can be used with one another; there’s no right or wrong way to implement them. For example, you can add a Like Box to your homepage and embed Facebook posts throughout your site. Just ensure that you’re providing relevant and interesting information for your readers and use embeds in moderation so you don’t overwhelm your audience.
For more Facebook inspiration and a roundup of lesser-known features, read our earlier article, 5 Overlooked Facebook Features Marketers Should Be Using. Once you’ve got your feature set established, read more about the Facebook metrics you should be tracking to ensure that your business goals are being met.
Jennifer Beese: Jennifer Beese has worked as a community manager and social media strategist. When she’s not writing, you can find her studying anatomy and physiology—she literally has a skeleton in her closet—or under the stars with her telescope.
@rivkaro I don't believe you can. I think once it's closed it's no longer shareable. I'd still do trial and error with it. Hope that helps.
Does this page address this type of feature (in the attached image)? It looks like posts they make on Facebook, show up in a little scroll feature to the side on their website. Does this site touch on this, in point #3 above?
@HootyHaHa The 'Like Box' is now depreciated and a new version called 'Page Plugin' will address the feature you've outlined. You can find more info about the plugin here: https://developers.facebook.com/docs/plugins/page-plugin
Great insight here, thanks! Of note, in #4 Feeds, the "Activity Feeds" link takes you to a page with the following note: "with the release of Graph API v2.3, the Activity Feed plugin is deprecated." I see that a few people have mentioned that - is there another solution?
@BarbGray Thanks for the heads up, Barb! We'll update the article.
This is very nice topic and important to everyone to know that the smart ways of manage contacts
For more information: http://www.labstech.org/manage-your-important-contacts-2014-12-19/
Hi, I see that the Facebook Like Box and Activity Feed have both become deprecated now. Seeing as though the best practice for Wordpress is to install as few plugins as possible can you recommend another way to add a Facebook feed without using a plugin?
I am able to display timeline posts of my website but I want to display visitors posts on my websites, then how can I do this task(dynamically--means when ever any visitors post at my page then it will auto displayed at my website ) please reply me and
Is it possible, I want that visitor's post displayed in timeline section also
@AviJais I'm not certain if there's an automatic way to do this, as embedding a post published by someone else will depend on that individual's privacy settings. At the very least, you can manually embed a post from someone else on your website if their settings allow it. Just look at the Recent Post By Others section on your Page and click on the drop-down arrow in the top right corner of their post and choose Embed.
I am creating an app with Node.js express to display social media feeds. I want to filter social media feeds from API using HASHTAGS. i.e. Facebook is providing hashtags in feeds, Like (#Cricket). I want only that feeds from Facebook API, which has only #Cricket tags. Is this possible to get filtered feeds from any social networking site.
@jitendrarajput588 did you find a way?
@BoipeloPreciousMajeng You can use the Recent Facebook Posts plugin mentioned above. It displays a list of your most recent posts. The Facebook Like box also lets you display a stream of your Page's posts on your site.
Facebook Like Box is now Page Plugin : https://developers.facebook.com/docs/plugins/page-plugin
Having difficulty with the social plugin page. It tells me the page I am trying to plugin is not a facebook page?
Great post. Wanted to check a couple of things
1. When I try embedding a facebook post and someone clicks on like - it asks for a confirmation. Can it be directly done?
2. Can I get a confimation somehow that the person has liked/ shared or commented my embedded post?
Hey jennifer ,i m embedding facebook post on my website but the problem is that like,share footer is not displaying on mobile .. how can i resolve this issue
@vibhumishra808 Hi there! So I've browsed through Facebook's help center, but I wasn't able to find an answer for you. I added a new question and will update this post if a solution becomes available.
Does the footer display properly on desktop? Sometimes the URL or embed code might not have been inserted properly, which could mess up how its displayed. Even formatting within the post can cause a bit of wonkiness.
@jennifer beese @vibhumishra808 yes jennifer footer is displaying properly but i m not quite sure ..bcoz its displaying properly on my system's screen which is 15'6'' inch ... but on other system which has 14'' inch screen ... it is not displaying properly .. i have attached two pics one on chrome and other on firefox ..both from the 14'' inch screen ...
i gave u example from https://developers.facebook.com/docs/plugins/embedded-posts
same problem i m facing with my own embed post .. footer is displaying differently depends on screen size and resolution ...
@vibhumishra808 I'll keep an eye out for more information on this. I'm honestly not sure what's causing the discrepancy. If I learn more, I'll be sure to update our thread here.
I have a question about embedded content like FB embeds. Does the "fresh" content of an embedded feed register with search engines, or does the site benefit more from having fresh content directly on the site, in terms of SEP?
Hi Jennifer, This is an awesome post. Didn't know Facebook had an official WP plugin too.
Also, I would like to add the Famax plugin that we use on our site. Its like eye candy for our users.
@Alex M You're welcome, Alex. Thanks for reading and introducing me to Famax. I hadn't heard of it before, but it looks awesome. I'll have to dig into it some more.
@jennifer beese Hi Jennifer I have embedded fb news feed on my website using fb plugin now I want my news feeds to move vertically showing 10 at a time.Can you please let me know how can I do it?
@SankalpTyagi Hi Sankalp. If you're using one of the plugins mentioned above, then I recommend reading through some of its FAQs for instructions. Which plugin did you end up going with?