Display Your Facebook Feed In WordPress

SkyStra
May 31, 2021

Have you ever considered showing your Facebook timeline posts on your website? With over 2 billion users, Facebook is the leading social network and one of the world’s most known brands. Apart from showing your social media icon linking to your Facebook profile, other methods can integrate this social network into your website. 

Displaying your Facebook feed on your website can significantly help boost your Facebook following and keep your website users updated with real-time status on your activities. 

This tutorial will explain how to achieve this using Smash Balloon’s Custom Facebook Feed Pro plugin.

This is a premium plugin that costs money, and if you’re on a budget, you can also use the free version – Smash Balloon Social Post Feed plugin.

The free version also shows your Facebook timeline text and links; however, it won’t display photos.

Let’s start!

Install The Plugin

Purchase the Custom Facebook Feed Pro plugin, and download the plugin ZIP file to your computer.

Log in to your WordPress Dashboard, head to Plugins > Add New, then click Upload Plugin at the top of the page. Click Browse and select the plugin ZIP file on your computer, then click the Install Now button:

Once installed, click Activate to activate the plugin:

Connect Your Facebook Account

Next, we need to connect the plugin with our Facebook account. Head to Facebook feed > Settings in WordPress Dashboard, and click the Connect a Facebook account button.

You need to choose if you want to display a Facebook page or a group timeline next. In most cases – that will be a Facebook page. 

Please note, however, that you can’t display posts from your personal profile as that’s forbidden due to Facebook’sFacebook’s privacy policy.

Select the Facebook page in the drop-down menu and click Continue. Facebook will then ask you to permit the Smash Balloon plugin to access your Facebook account. Follow the on-screen instructions, and once you’re done – you’ll be redirected back to the plugins settings page again, where you’ll see a popup window asking which page you want to use.

Select the desired page, then click the Connect this page button to proceed further.

Once completed, you should see your chosen page in the Connected Accounts section of the Settings page. Click the Save Settings button to save changes.

Add The Feed To Your Website

Now that we’ve set up everything, we can add the feed to our website. Edit an existing post or a page on your website, or create a new post or a page.

Click the + button in the Gutenberg editor and search for the Custom Facebook Feed block, then click it to add it to your page.

The Gutenberg editor shows the preview of your Facebook feed directly in the editor so you can see how it looks in real-time. Go ahead and click Publish to save changes and publish your new page. Next, visit your website to see how it looks.

Add The Feed To Your Sidebar

Custom Facebook Feeds plugin also allows you to add your Facebook feed to your website sidebar. 

Head to Appearance > Widgets and drag the Text widget to your sidebar. Next, enter the following shortcode into the widget and save it:

[custom-facebook-feed]

Visit your website and ensure that your Facebook feed correctly shows in the sidebar.

Customize Your Facebook Feed

Custom Facebook Feeds is a powerful plugin that allows you to adjust various options related to your Facebook timeline. 

Head to Facebook Feed > Settings page, then scroll down to the Settings section. We recommend adjusting the following options:

  • Number of posts to display: Set it to 4 or 5 to avoid cluttering your page.
  • Display “Load More” button: Set it to show.
  • Check for new posts: Set it to the When the page loads option.

Next, head to Facebook Feed > Customize page to customize the look of your Facebook timeline. You’ll see various sections displayed as tabs which you can use to set up multiple options related to the look and feel of your feed.

Click the Post Layout tab and choose how your timeline is laid out. You can choose between Thumbnail, Half-width, and Full-Width options. In our case, we went with the Half-width option as it matches our theme the best.

Make sure to click Save Changes to save your changes anytime you adjust any options.

Next, click the Style Posts tab to configure how the posts on your website are styled. You can choose between regular and boxed styles, change background color, enable rounded corners, and add shadows.

We recommend playing around with customization options until you find the style that works best for your WordPress theme.

Adding FaceBook Feed To Your Website Manually

This method is an alternative method that is not recommended for beginners as it requires adjusting your theme files. 

Head to Facebook Page Plugin and specify variables that you’d like the feed to show:

  • Facebook Page URL: Fill in the URL of the Facebook feed you’d like to display.
  • Tabs: This option allows you to include a feed of the timeline, events, or messages. To display one of the three options, write ‘timeline,’ ‘events,’ or ‘messages.’ To show all three in multiple tabs, use a comma-separated list.
  • Width and Height: This option allows you to set the custom dimensions for your feed. 
  • Extra options: Other options allow you to display a narrow view of the header, delete the cover photo, enable the plugin to adapt to the container, and whether you’d like friends associated with the user to show in the feed. 

Once ready, click Get Code to proceed further. A popup window will show with two code snippets. 

Copy the first code and paste it into your child theme’s header.php file right below the opening <body> tag:

Once you’ve added the JavaScript code to your theme, edit an existing page or post, or create a new page or post (where you want to show your Facebook feed), then copy the second code generated in the Facebook Page Plugin and paste it there:

That’s it!

If you want to add your feed to the sidebar, you can do so as well by heading to Appearance > Widgets, drag the HTML widget to your sidebar and paste the second code into the widget text area.