How to Get WordPress to Display Your Facebook Feed

Your website is the focal point of your online presence. It’s the only place you have full control of your message and the way it’s expressed. Of course, other popular social media sites also play a major role in finding an audience and building a following. What if there was a way to let your WordPress site and your Facebook feed join forces?

Good news, there is a way.

The Benefits Adding Your Facebook Feed to a WordPress

If you’re like most of us, you maintain a presence on multiple social media sites. And you probably have links to those social media accounts on your website. But one big way to increase the visibility of your social sites is to pull content from those “outside” sites into your own.

If a visitor sees your social media feed on your website, they are more likely to click over to your account than they would be to click on a standard social media icon or link. Providing a sample of your social media content sparks interest and increases the “cross-pollination” between your website and your social media.

Of course, this is only one of many Facebook integrations you can add to your website. consider adding other like a Facebook login, or like button to WordPress. Doing so can help bring more attention to your Facebook page.

Note that the plugin we’re discussing here only works on a Facebook Page, not a personal Facebook feed.

How to Add the Facebook Feed to a Website in WordPress

Adding the Facebook feed to a website is a relatively easy process. Well, as long as you’re using the right plugin.

Today, we’re using the Smash Balloon Social Post Feed plugin. It’s a funny name, but a serious plugin.

It comes with a variety of settings and features that will make the process much easier than trying to code it manually.

Step 1: Installing the Smash Balloon Social Post Feed Plugin

Let’s get started.

Log in to your WordPress admin panel.

In the left column navigation mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Smash Balloon Social Post Feed.”

search for the WordPress Smash Balloon Social Post Feed plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Smash Balloon Social Post Feed plugin

When the plugin has been installed, click the “Activate” button.

click to activate the WordPress Smash Balloon Social Post Feed plugin

Step 2: Configuring the Facebook Feed

In the left column navigation, mouse over the “Facebook Feed” link and click the “Settings” link.

click the "Settings" link

Click the “Log in and get my Access Token” button.

click the "Log in and get my Access Token" button

If you experience an error when clicking the “Log in and get my Access Token” button, you can get a token manually.

Click the “Continue” button to log in to Facebook.

click the "Continue" button

You’ll get a Facebook login page. After you log in, you will see a “Continue as [your name]?” confirmation popup.

Click the “Continue as [your name]” button.

Select the page(s) you wish to display on your site.

Click the “Next” button.

select pages click the "Next" button

Next, you’ll see an ominous warning that Smash Balloons wants permission to manage your Facebook Pages.

They aren’t really going to “manage” your pages. They are just going to read from them. The plugin won’t work properly if you don’t agree to the page management. So if you want to proceed, you have to agree by clicking the “Done” button.

click the "Done" button

For what it’s worth, every Facebook API integration like this one is going to need permission to “manage” some aspect of Facebook. It isn’t really ominous, but you should consider the potential consequences of agreeing. Only allow apps that you trust to connect to your account.

After you click the “Done” button, you’ll get a success popup. Click the “OK” button to continue.

Step 3: Adding a Facebook Feed to WordPress

Our quest to add Facebook to WordPress is nearing completion. All that’s left to do is tell the plugin what page we want to display and add some shortcode to a post or page.

Here we go.

Enter your Facebook page ID, either the name or the number. The URL to your Facebook Page shows you the ID:

facebook.com/your_page_name
facebook.com/your_page_name-1234567890
facebook.com/pages/your_page_name/1234567890

enter page ID

Cool feature alert! You can enter the name or number of any Facebook page and display the page’s feed on your site.

You don’t have to own or control the page.

Scroll down and click the “Save Settings & Clear Cache” button.

click the "Save Settings & Clear Cache" button

You’ll see a “Settings saved” success message.

Step 4: Displaying the Facebook Feed on a WordPress Post or Page

You add the feed to a post or page by inserting a shortcode. We’re going with the most minimal code for this demonstration, but there are a lot of different shortcode options for the plugin.

Open a post or a page and enter this in a shortcode block:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][custom-facebook-feed][/ht_message]

add shortcode

Publish the post or page.

That’s all there is to it. Your post or page will now display the recent items from your Facebook feed.

Facebook in WordPress

Configuration available in the “Settings” section:

  • Show posts on my page by: page owner, or page owner and others
  • Number of posts to display (maximum of 100)
  • Facebook API post limit (leave this set to “auto” unless you have Facebook API issues)
  • Check for new posts every X hours, minutes or days
  • Localization (language)
  • Timezone

The “Customize” tab has a number of settings that affect how the feed is displayed on your site. See the Smash Balloon documentation for details on visual customization.

What If You Want Your Facebook Feed in the Form of a Widget?

Ready for some long, complicated instructions?

Sorry to disappoint, but displaying the feed in a widget is as easy as displaying it in a post or page.

In the left column navigation, mouse over the “Appearance” link and click the “Widgets” link.

click the "Widgets" link

Drag a text widget over to your widget display area and enter the feed shortcode:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][custom-facebook-feed][/ht_message]

add shortcode to the widget

Save the widget, and your Facebook feed will show up wherever the widget is placed. In our example, it’s the footer:

widget in footer

Like many plugins, some of the most desirable options are reserved for “pro” (paid) versions. But if you like the Smash Balloon plugin, perhaps you’ll find value in the pro edition.

You do get a lot more flexibility with the pro version. One of the main advantages is being the ability to display the images from your feed along with enhanced layout controls.

pro layout options

There are other options for a WordPress social feed plugin, such as 10Web Social Post Feed. But the functionality of the free versions is all pretty similar.

But if you find that having your Facebook Page feed on your site is beneficial, then the moderate cost of most of the feed plugins could be considered a bargain.

Why Pages Showing the Feed May Sometimes Load Slowly

Any time you load external data into your website, not only from Facebook, you can notice a slowdown. That’s because your page load is not only depending on your own server, now it also depends on a remote server to supply part of the page.

The conditions and speed of the remote server are out of your control and can sometimes cause slow page loads.

The Smash Balloon Social Post Feed plugin pulls your post contents from Facebook using a Facebook API. That API makes requests to Facebook, and depending on a lot of different factors, those requests can take a bit of time to complete.

Luckily, Smash Balloon has some tips if the plugin performance seems to be slow.

Spreading Your Social Reach

I talked about “cross-pollination” earlier, and that’s the goal of any good social media strategy. The more interlinked and intertwined you can make your online presence, the more visitors and followers you can accumulate.

It can be a cascading effect across all of your outlets. An increase in website visitors discovering your Facebook Page can result in them finding your Instagram and Twitter. When everything is connected, your overall visibility increases.

Have you ever used an API to pull content from one site to another? Do you “cross-post” between social sites to let your followers know where they can find you?

1 thought on “How to Get WordPress to Display Your Facebook Feed”

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.