How to Display Your Facebook Timeline in WordPress

How to Display Your Facebook Timeline in WordPress

  • Post author:
  • Post category:News


Do you want to show your Faecbook timeline posts on your website?

By adding your Facebook updates to your website, you can keep users updated with real-time status and even boost your Facebook following.

In this article, we’ll show you how to easily display your Facebook timeline in WordPress.

Displaying your Facebook timeline in WordPress

Displaying Your Facebook Timeline in WordPress

We’re going to use Smash Balloon’s Custom Facebook Feed Pro to add our Facebook timeline to our WordPress website.

First, you need to go to the Smash Balloon website and download the Custom Facebook Feed Pro plugin.

Next, you need to install and activate the plugin on your site. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There’s also a free version of the plugin, called Smash Balloon Social Post Feed. This works fine to display text and links from your timeline. However, it will not show photos.

Upon activation, go to Facebook Feed » Settings in your WordPress dashboard. Here, you will need to connect your Facebook account.

Connect your Facebook account to the Custom Facebook Feed plugin

Next, you need to decide whether to display a Facebook page or group timeline. We’re going to use our Facebook page.

Note: You cannot display a timeline from your personal profile. This is due to Facebook’s privacy policy.

Continue connecting Facebook Feed Pro to Facebook

Facebook will then prompt you to agree and give Smash Balloon permission to access your Facebook account. Simply follow the on-screen prompts.

You will then see the Custom Facebook Feed Settings page again, with a popup asking you to select which page to use. Click on the page you want, and then click the ‘Connect this page’ button:

Select the Facebook page that you want to connect to your website

You should now see your page listed in the ‘Connected Accounts’ section of the Custom Facebook Feed configuration settings. Don’t forget to click the ‘Save Settings’ button to save it.

Make sure you click the button to save changes to your settings

Now, it’s time to go ahead and add the Facebook timeline from your page to your site. Simply open up the post or page where you want to put your timeline, or create a new post or page.

It’s also possible to add your timeline to your WordPress sidebar, which we’ll cover later in this tutorial.

We’re going to create a new page by going to Pages » Add New. On the page edit screen, click on the (+) icon to add the Custom Facebook Feed block in the WordPress block editor:

Adding the Facebook feed block to a page

You can see the preview of your Facebook feed straight away in the content editor. Go ahead and preview or publish your page to check it out on your site. Here’s our Facebook timeline:

Our Facebook page timeline displaying on our WordPress page

We’ve added some styling to our timeline to make it look great on our site. Next, we’ll take a look at how to customize your own Facebook timeline using Custom Facebook Feed Pro.

Customizing Your Facebook Timeline with Smash Balloon Facebook Feed Pro

Custom Facebook Feed Pro lets you change all sorts of options about your timeline. Let’s go through some of the key ones.

Simply go to the Facebook Feed » Settings page in your WordPress dashboard.

Scroll down to the ‘Settings’ section, and you’ll see a few key options. For instance, you might decide you only want to display 5 posts:

Changing the number of posts shown in the Facebook timeline on the website

There are also lots of settings under the Facebook Feed » Customize page that you may want to try out. This page gives you lots of different options to choose from in different tabs.

The Customize options for the Custom Facebook Feed plugin

To change how your timeline is laid out, simply click the ‘Post Layout’ tab. We’ve selected the ‘Half-width’ style for our posts at the top here. Don’t forget to click the ‘Save Changes’ button after making any changes:

Using half-width posts for the Facebook timeline

Next, go to the ‘Style Posts’ tab to change how your posts are styled. We think the ‘Boxed’ style here looks great. We’ve given our posts rounded corners plus a shadow:

Changing how the Facebook posts are styled in the timeline by adding a box and rounded corners

Again, make sure you save your changes before leaving the page.

Adding Your Custom Facebook Timeline in WordPress Sidebar

What if you want to display your Facebook timeline in your sidebar instead of in a post or page? You can easily do that with Custom Facebook Feeds.

First, go to the Appearance » Widgets page in your WordPress admin area. Then, drag a ‘Text’ widget to wherever you want your timeline within your sidebar. Now, simply enter the shortcode [custom-facebook-feed] in the widget and save it.

Adding a custom Facebook feed to a widget

Your Facebook timeline will now appear in the sidebar on your website:

Viewing the Facebook timeline in your sidebar

We hope this article helped you learn how to display your Facebook timeline in WordPress. You might also want to check out our articles on easy ways to increase your blog traffic and the best WordPress plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display Your Facebook Timeline in WordPress appeared first on WPBeginner.





Source link