How To Add A Live Facebook Feed To Your WordPress Website

How To Add A Live Facebook Feed To Your WordPress Website

With over 2.27 billion monthly active users, Facebook is one of the world’s leading brands and social networks.

Beyond simply displaying the social media icon linking to your Facebook page on your website, there are plenty of other ways to integrate your business’ Facebook profile with your WordPress website. One such option is to display a feed of your Facebook posts on your site.

Add Facebook Feed to WordPress Demo Preview
  • Google+
  • Facebook
  • Twitter

In the following post, we’ll show you how you can integrate your Facebook account with your WordPress website in order to display a Facebook feed on your site. Not only will this increase engagement but it’ll have a positive effect on your site’s user experience too.

Tutorial Set Up

As always, we recommend testing out new code on a development site or testing environment before working directly on your live site.

If you’d also like to set up a testing environment for your website work, follow one of the following tutorials:

For this tutorial, I’m using the Divi All Purpose child theme. Divi All Purpose is a free child theme for Divi that can be downloaded for free from the Aspen Grove Studios store.

Download Divi All Purpose today and start building a standout Divi website with Divi All Purpose.

 

How To Add A Live Facebook Feed To Your WordPress Website

There are a number of ways that you can add a Facebook feed to your WordPress website.

Add A Live Facebook Feed To Your WordPress Website Using the Facebook Page Plugin

Facebook for Developers offers an array of social plugins, designed to help maximize the display of your Facebook page on your website. As well as being able to embed a comments stream, display a Facebook group on your site and much much more, the Page Plugin also offer an easy solution for embedding a feed into your site.

To begin, visit the Page Plugin page.

Facebook Page Plugin
  • Google+
  • Facebook
  • Twitter

Here, specify the variables that you’d like the feed to include.

  • Facebook Page URL: Enter the URL of the Facebook feed you’d like to share.
  • Tabs: Here you can decide whether you’d like to include a feed of the timeline, events or messages. To display one of the three options, simply write ‘timeline’, ‘events’ or ‘messages’, to display all three in multiple tabs, use a comma-separated list.
  • Width and Height: Here you can set the custom dimensions, within the maximum size parameters specified.
  • Other options: Finally you can choose whether you’d like to display a slim view of the header, remove the cover photo completely, allow the plugin to adapt to the container and whether you’d like profiles associated with the user to display in the feed.

  • Google+
  • Facebook
  • Twitter

Once you’ve finished setting up the feed display, click Get Code. Now, a pop up will arise with two code snippets.

Copy the first code and paste it into the header.php file in your WordPress website child theme, as instructed, below the opening <body> tag.

  • Google+
  • Facebook
  • Twitter

If you’re using the Divi theme by Elegant Themes, you don’t have to worry about touching code in your child theme. Instead, navigate to the Divi > Theme Options menu and click on the Integration tab.

  • Google+
  • Facebook
  • Twitter

Scroll down until you see the Add code to the < body > (good for tracking codes such as google analytics) textbox. Paste the code here and click Save Changes.

  • Google+
  • Facebook
  • Twitter

Now that the Javascript code has been added, head to any page, post or project that you’d like to display the Facebook feed in. Copy the second code generated from the Page Plugin and paste it anywhere you’d like in your page.

  • Google+
  • Facebook
  • Twitter

If you’re using Divi, you can paste this code into the Code module.

  • Google+
  • Facebook
  • Twitter

The Facebook Page Plugin page offers a few customization options, such as changing the call to action button, changing the display language of the feed, further customizations with tabs, and so on.

Another option for the feed display is to add the code into a widget. To do so, navigate to Appearance > Widgets, select the HTML widget and drag it to where you’d like it to be placed, i.e. in the footer or sidebar. Paste the code into the widget text area and click save.

Below is an example of the Facebook feed added to the sidebar of the blog.

  • Google+
  • Facebook
  • Twitter

If you’re looking for a simpler solution to using the Facebook Page Plugin option, consider using a free plugin from the WordPress Repository, Custom Facebook Feed.

Add A Live Facebook Feed To Your WordPress Website Using the Facebook Page Plugin

A free plugin with over 1000 five-star ratings, the Custom Facebook Feed plugin from Smash Balloon is a great solution for those looking for a highly customizable feed to display on their site.

To begin, install and activate the plugin on your WordPress website. Read our guide to adding a plugin to a WordPress website.

Once the plugin is installed it’ll create a new menu item.

  • Google+
  • Facebook
  • Twitter

If you’re wondering, the Instagram Feed plugin located just below the Facebook Feed plugin is also from the same development company, Smash Balloon. As the name suggests, the plugin allows you to add an Instagram feed to your WordPress website with little to no fuss.

Back to the Custom Facebook Feed plugin. The plugins settings page only has three tabs:

  • Configuration, where you’ll set up the Facebook account with the WordPress website,
  • Customize, where you’ll set how the feed will display, and,
  • Support.

To begin, go to the Configuration tab and click on the Log in and get my Access Token button.

  • Google+
  • Facebook
  • Twitter

At this point, a pop up will appear that’ll ask you to log into your Facebook account.

  • Google+
  • Facebook
  • Twitter

At the Facebook authentication page, a list of the pages you manage will pop up. Select the relevant page from the list and click Ok.

  • Google+
  • Facebook
  • Twitter

Next, enter your Facebook ID.

Once you’ve requested the Access Token, a key will automatically be entered into the Facebook Access Token section.

Once the account has been fully authenticated, there are a few extra settings that you can set to your liking.

  • Google+
  • Facebook
  • Twitter

To add the Facebook feed to your site, copy the shortcode [custom-facebook-feed] and paste it anywhere on your website.

  • Google+
  • Facebook
  • Twitter

To customize the appearance of the Facebook feed, click on the Customize tab in the plugin settings.

  • Google+
  • Facebook
  • Twitter

There are countless customization settings, split into various tabs. Within each tab, you’ll find a number of customization options. With so many styling options, you can create a truly unique Facebook feed that suits your brand identity and website’s aesthetics.

If you’d like feed that mimics the visual style of the Facebook feed, then the Facebook Page Plugin option may be a better choice for you, however, if you want to create a Facebook feed for your site that really matches with your website’s look and feel, then the Custom Facebook Feed post may be a better option.

We want to hear from you!

Have you incorporated a Facebook feed into your WordPress website? If so, did you use one of the above-mentioned options or a different solution altogether? Let us know your experience of integrating a Facebook feed with your website.

Thanks for reading!

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.