Have you ever considered showing your Facebook timeline posts on your website? With over 2 billion users, Facebook is the leading social media network and one of the world’s most known brands.

Apart from linking to your Facebook profile directly, you can integrate your Facebook activity into your website via a feed.

Displaying your Facebook feed on your WordPress website can significantly help boost your Facebook following. It also keeps your website users engaged with real-time updates on your activities and events. 

This tutorial will explain how to display your Facebook feed in your WordPress website using the Smash Balloon’s Custom Facebook Feed Pro plugin.

This is a premium plugin, which means it’s paid. However, 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 feed but only text and links, which means it won’t display photos.

Let’s start!

Install the Custom Facebook Feed Pro plugin

Purchase the Custom Facebook Feed Pro plugin and download the plugin’s 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:

Connect your Facebook account

Next, you need to connect the plugin with your Facebook account.

From your WordPress dashboard, head to Facebook feed > Settings 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. 

Keep in mind that you won’t be able to display posts from your personal profile due to Facebook’sFacebook’s privacy policy.

Next, 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 where you’ll see a popup window asking which page you want to use.

Select the Facebook page you’d like to link up, then click the Connect this page button to go to the next step.

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

Add your Facebook feed to your WordPress website

Now that we’ve got everything setup, you can add your Facebook feed to your website.

First, go to edit an existing post or a page on your website, or create a new post or a page from your WordPress dashboard.

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

The WordPress editor will show 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 your Facebook feed to your sidebar

The Custom Facebook Feeds plugin also allows you to add your Facebook feed to your WordPress 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 make sure that your Facebook feed displays correctly 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 feed. 

Head to Facebook Feed > Settings page, then scroll down to the Settings section.

We recommend adjusting the following settings:

• 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.

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 Facebook feed on your website.

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 example, we went with the Half-width option as it seemed to look 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.

Add your Facebook feed to your website manually

You can add your Facebook feed to your website manually. We recommend this method only for intermediate to advanced WordPress users.

Head to the 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 go to the next step. 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:

You’re done!

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.