How to Put a Facebook Feed on WordPress (Beginner’s Guide)

by Lianne Laroya on November 12, 2020

Looking for the best way to put your Facebook feed on WordPress? We’ve made this post especially for you.

As the world’s most popular social media platform, cross-promoting your Facebook content with your website is a great way to reach a wider audience to nurture your Facebook page and grow your business over time.

But Facebook makes it confusing for its users like you to display different types of Facebook feed to your website.

So in this post, you’ll learn about the easiest way to put a Facebook feed on your WordPress site. After reading this tutorial, you can easily display your Facebook feed — even if you’re not tech-savvy!

put facebook feed on website example

Shall we get started?

Methods to Add Facebook Feed to WordPress

When you use Facebook’s plugin to manually put a Facebook feed on your site, you experience lots of limitations, like:

  • Confusing for newbies: Using Facebook’s plugin is pretty complex. It involves several websites and copying and pasting lengthy codes into your site.
  • Risky to your site: One small error in copying or pasting a code can accidentally break your website. And you know how long it usually takes to resolve site issues, right?
  • Limited customization: If you use Facebook’s Page plugin, it’s hard to customize how your feed looks like because you need to tweak pieces of code.
  • No support: If you run into an issue while manually embedding codes using Facebook’s plugin, there’s no dedicated support team who can help you. So, you need to hire an expensive developer or spend lots of time in figuring out how to solve the issue on your own.

Worried? You don’t need to be.

Because if you use a WordPress plugin to automatically put your Facebook feed on your website, you won’t have those problems.

Instead, you can easily…

  • Embed your interactive Facebook feed on your website in under 5 minutes — no coding needed
  • Control how your Facebook feed looks like, so it’s consistent with your brand’s identity
  • Customize the type of Facebook feed you want to show
  • Encourage your site visitors to engage with your Facebook content without leaving your site

If you use the best Facebook feed plugin for WordPress, you can easily create completely customizable Facebook feeds that you can display on your website. You also have more control over your feed’s content and design, even if you’re a WordPress newbie!

So, let’s talk about how you can put your Facebook feed on your site easily and hassle-free — by using a WordPress plugin.

Easy Way to Put a Facebook Feed on Your Site

For this tutorial, we’ll use Smash Balloon’s Custom Facebook Feeds plugin. As a top-rated WordPress plugin, it helps you cross-promote your Facebook content on your website — no technical knowledge needed.

facebook feed on wordpress plugin

Because the plugin’s designed with users in mind, it’s ultra-fast and also user-friendly, especially to beginners. This way, you can easily embed any type of Facebook feed on your site and even control how it looks like.

No design experience? No worries. Since the plugin looks great out of the box, it automatically copies your existing theme’s style to keep up with your brand’s visuals. Perfect for on-the-go business owners like yourself!

With a solid 4.8/5 star rating, Custom Facebook Feed Pro is trusted by over 200,000 users worldwide. Want to know more about how it can help promote your business? Check out the plugin’s full list of features here.

customize facebook feed plugin to wordpress reviews

Finally, did we mention that the plugin comes with a top-notch team of support behind it? So if you have any concerns while setting up your Facebook feed, just message them and they’ll help you sort it out shortly.

With that in mind, let’s jump into setting up your Facebook feeds WordPress using the Custom Facebook Feeds plugin.

Step 1: Install Custom Facebook Feeds Plugin

The first step to put your Facebook feed on your site is to get your copy of Custom Facebook Feeds Pro here.

After downloading the plugin to your computer, follow these step-by-step instructions to help you install a WordPress plugin to your website.

Once you’ve successfully activated your plugin, you can move on to the next step below.

Step 2: Connect Your Facebook Account

Next, go to your WordPress dashboard. From here, navigate to Facebook Feeds » Settings. On this page, you can see the blue Connect a Facebook account button. Click on it so you can start connecting your Facebook account to the plugin.

connect facebook account

You can choose between displaying the feed of a Facebook page or Facebook group on your website. For this tutorial, we’ll choose to put a feed of your Facebook page on WordPress.

display facebook page to wordpress

Then, just follow the onscreen instructions to link your Facebook account to the plugin. Once you’re done with this, click the Save Settings button and we’ll move on to the next step below.

Step 3: Choose The Facebook Feed Type You Want to Add

For this step, start by scrolling up to the topmost area of the settings area. Next, click on the Customize » General tabs. On this page, you can easily personalize your Facebook feed’s width, height, padding and even background color.

customize facebook feed plugin to wordpress

Scroll down until you see the Post Types section. Choose the Facebook feed type you want to put on your website by checking the boxes next to it.

post types

For example, if you’re interested in posting a feed of your Facebook page’s photos only, just check Photos and leave everything else unchecked. Doing so allows you to show a Facebook photos feed on your website:

facebook feed photos to website

What if you want to display a Facebook album on WordPress? Just uncheck all the boxes except for Albums. It’ll show a customized feed of your Facebook albums, like this:

Facebook feed album to wordpress

Or, are you looking to embed a Facebook feed of your videos to your website? You can uncheck all boxes and leave just Videos unchecked so you can add a videos feed to WordPress like this:

facebook feed videos to wordpress

In this tutorial, we’ll check all the boxes to show all post types in our Facebook feed. Once you’ve chosen the Facebook feed type you want to add to your site, click on Save Changes. Then, it’s time to customize your feed’s design in the next step below.

Step 4: Customize Your Facebook Feed’s Layout

As mentioned, the plugin looks amazing right out of the box. So, if you want to show a Facebook feed that’s consistent with your brand’s design, then the plugin already does this for you — automatically.

And if you want more options to customize how you feed looks like, the plugin has options that help you do this. The best part? No coding needed, so you can just check or uncheck options!

To start, scroll up to the topmost area of the settings page and click on the Post Layout tab.

Facebook feed layout options

To show a Facebook feed with small images, choose the thumbnail layout so it’ll display your feed like this:

put facebook feed on website thumbnail example

To display a feed with larger images, select the half-width layout and your Facebook feed will look like this:

put facebook feed on website half width example

Want to display the largest images possible? Sure, the plugin helps you do this, too. Just choose the full width layout so your images in the feed will have the same size as the images in this example:

put facebook feed on website full width example

Once you’re happy with your Facebook feed’s layout, click on Save Changes. Then, it’s time to publish it to your website by following the next step below.

Step 5: Put Your Facebook Feed on WordPress

There are 2 ways to put your Facebook feed on WordPress with the Custom Facebook Feeds plugin, including:

  1. Facebook Feed WordPress Block: You can display your Facebook feed to your new post or page using the new WordPress block editor.
  2. Facebook Feed Widget: You can add your Facebook feed to your widget-ready areas such as sidebar or footer.

Let’s talk about both choices below.

Adding a Facebook Feed to the WordPress Block Editor

To embed a Facebook feed in a page using the WordPress block editor, go to your dashboard first. Next, navigate to Pages » Add New to create a new page.

add new page

Then, in your block editor, click the Plus (+) icon to add a new content block. Look for the Custom Facebook Feed block and click it to add it to your page.

add custom facebook feed block

Once it’s added to your block editor, a preview of your Facebook feed will automatically appear. Make sure to click on Publish to make it live on your WordPress site, like this:

put facebook feed on website example

Adding a Facebook Feed to WordPress Sidebar 

To display a Facebook feed on your website’s sidebar, you can use the Text widget.

To start, navigate to Appearance » Widgets from your WordPress dashboard. Then, drag a Text widget over to your sidebar area.

put facebook feed on website sidebar

In the Text widget content area, paste this shortcode to display your Facebook feed on WordPress:

[custom-facebook-feed]

Then, click Save to store your settings. So now, when your website visitors check out your sidebar area, they can see the Facebook feed you put, like this:

put facebook feed on website sidebar example

And that’s it!

Now, you’ve learned how you can easily use a plugin to embed your Facebook feed on your website.

So, what are you waiting for?

Click here to get started with Facebook Feeds by Smash Balloon today!

Want to show more social feeds to your site? You can also add Twitter feed and even your Instagram feed.

Finally, if you found this post helpful, feel free to follow us on Twitter and Facebook for more social media marketing tutorials to grow your business over time.

Want to Try our Facebook plugin for Free?

Enter the URL of Your WordPress website to install Custom Facebook Feed Lite.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Leave a Reply

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