How to Add a Facebook Feed to Your WordPress Website (2021)

Last updated on January 22nd, 2021

Looking for an easy way to display your Facebook feed on your WordPress?

Showing your Facebook feed on your website can help you connect with your audience and grow your Facebook page.

With over 2.5 billion users, Facebook is still the undefeated social media champion.

But Facebook doesn’t give a simple way to embed your Facebook feed on your website.

So in this article, we’ll show you the easiest way to add your Facebook feed to WordPress. By following our tutorial, you can set up and display your Facebook feed in just under 5 minutes!

Let’s dive in.

Should You Use a Facebook Page Plugin for WordPress?

In adding your Facebook feed to your WordPress site, you have 2 choices. You can use Facebook’s Page plugin, but it comes with a few restrictions:

  • Limited customization choices: If you want your Facebook feed to inherit the style that your website’s theme uses, it’s not possible. Unless you hire an expensive developer to fix the code for you.
  • Page-only plugin: Want to display your Facebook group’s feed instead? You can’t.
  • Basic tabs only: You can just display your Facebook feed’s timeline or events. No option to control which Facebook posts you want to show as well.
  • Overwhelming, especially for beginners: At first glance, it looks simple enough. But when you realize you’d need to tweak a lot of code to customize how your feed looks like, it gets confusing. Plus, you need to deal with code to add your Facebook feed to WordPress, too.

how to add facebook feed to wordpress website

Finally, when you take the risk and use it to hopefully add your Facebook feed to WordPress, you risk accidentally breaking your site.

The most frustrating part? There’s no support team who can help you. You’re on your own, so it’s difficult especially if you’re not techie.

Or, how about doing the 2nd option?

Choose the easiest way to show your Facebook feed on your WordPress website.

Install an easy-to-use WordPress plugin like Smash Balloon’s Custom Facebook Feed Pro to help you.

best facebook feed plugin for wordpress

Custom Facebook Feed Pro is the best Facebook feed plugin for WordPress.

Since it’s designed with users in mind, the plugin is both user-friendly and ultra-fast. You’re happy because you can use it easily. And your website’s happy because the plugin is light and fast to load.

Here are some of the plugin’s features you can easily use:

  • Super easy to set up: You can display your Facebook feed in under 30 seconds!
  • Consistent with your branding: The plugin looks great out of the box. It automatically copies your existing theme’s style to keep up with your brand’s visuals.
  • Lots of Facebook content choices: Using the plugin, you can show the feed of your Facebook page and Facebook group. You can also add your events feed, Facebook video playlists and photos to boost user engagement. And if you want more sales, the plugin makes it easy for you to embed Facebook reviews on your website, too.
  • Live Feed Customizer: The plugin has a live feed editor so you can see your customizations in real-time.
  • Simple and straight-to-the-point: Want to change your Facebook feed’s background color? Font size? Or header? You can do all these with just a few clicks.

As the most popular Facebook feed plugin for WordPress, Custom Facebook Feed Pro is trusted by over 200,000 users with a solid 4.8/5 star rating.

smash balloon reviews

Want to know what else Custom Facebook Feed Pro can do for your brand? Check out the plugin’s full list of features here.

Ready to supercharge your Facebook page’s growth by effective social media marketing?

Follow the steps below to add your Facebook feed to your website today.

Step 1: Install Custom Facebook Feed Pro

To begin adding your Facebook feed to your WordPress website, get your own copy of Custom Facebook Feed Pro here.

Once you’ve downloaded the plugin to your computer, the next step is uploading it to your website and activating it.

Need some help doing this? You can check out this helpful step-by-step tutorial on how to install a WordPress plugin.

Step 2: Create and Choose Your Facebook Feed

After installing and activating the plugin on your website, go to the Facebook Feed » All Feeds menu from your WordPress dashboard

To start creating your Facebook feed, click on Add New.

add new feed with custom facebook feed pro

Then, you’ll see lots of Facebook feed types available for you to create, such as timeline feed, photos feed, videos feed, albums feed, and more.

In this tutorial, we’ll show a Facebook timeline feed, so choose Timeline and then click on Next.

Step 3: Connect to Your Facebook Page or Group

Now that you’ve selected your Facebook feed type, the next step is connecting your source for your Facebook feed to the plugin.

Sources are Facebook pages or groups that your feed will get posts, photos, or videos from.

To get started, look for Select a Source section and click on the Add New button.

add new source for facebook feed

Next, you’ll see a popup asking you to choose between connecting a Page or Group from Facebook. Once you’ve chosen, make sure to click on the Connect button.

In this tutorial, we’ll embed a Facebook page feed.

pick between group or page for facebook feed

You’ll now be redirected to Facebook.

Just pick the page or group that you want to show on your website, and then click on Next.

Next, the plugin will ask for read-only access to your Facebook account.

No need to worry. Since it’s read-only access, the plugin can’t actually change anything — it’ll only read your data so Smash Balloon is super safe to use.

Simply click on Done to finalize the page connection.

what is smash balloon allowed to do

Now, you’ll see the list of Facebook pages you have access to. Choose the Facebook page you want to connect to and click on Add.

add new source confirmation

Congratulations! You can now select this Facebook page as a source for your Facebook feed. Remember to click on Next to proceed to the next step below.

pick your source for custom facebook feed pro

Step 4: Customize Your Facebook Feed

After you’ve connected to a Facebook page, the next step is customizing your Facebook feed using the plugin’s live feed customizer.

First, you can add a name to your Facebook feed so you can easily identify it from the others.

You can also control how your Facebook feed looks like on your website — without touching a single line of code.

On the left side, you’ll see tons of customization options for your Facebook feed, such as feed type, feed layout, color scheme, header, posts, and more.

Every time you customize your Facebook feed, you can view the right side to see the changes in real-time.

For example, to customize your Facebook feed layout, click on the Feed Layout option.

Then, choose from 3 available templates to show your Facebook feed in: list, masonry, or carousel.

Once you’ve chosen your Facebook feed’s layout, you can also customize its color scheme with just a few clicks. To get started, click on the Color Scheme menu.

Custom Facebook Feed Pro lets you choose from 4 color scheme options for your Facebook feed:

  • Inherit from Theme: Automatically copy the color scheme of your website
  • Light: Light background with dark-colored text
  • Dark: Dark background with light-colored text
  • Custom: Customize your feed’s background color and text color to your liking

Want even more customization? You can also choose from 3 post layouts: thumbnail, half width and full width. Simply click on the Posts option to get started.

The thumbnail layout shows your Facebook feed with small images, just like this:

how to add facebook feed to wordpress website thumbnail

Want to show your Facebook feed with images in a larger size? You can. Just choose half width layout and it’ll look like this:

how to add facebook feed to wordpress website

Finally, if you want to display your Facebook feed with the largest images possible, choose the full width layout so it will look similar to this example:

how to add facebook feed to wordpress website layout

With the plugin’s live editor, you can take your time customizing your Facebook feed’s design — no coding needed. You can also set the header type, like box button, feed size, margins, and much more.

Remember to click the Save button once you’re done editing your Facebook feed.

Satisfied with your Facebook feed’s layout? Good!

It’s time to add it to your WordPress website by following the final step below.

Step 5: Add Your Facebook Feed to WordPress

Once you’re done with choosing and customizing your Facebook feed, the last step is embedding it on your website.

Since the plugin works seamlessly with WordPress, you can easily add it to your page or sidebar-ready areas.

Don’t know which method you prefer? You can check out both methods below and decide after.

Add Facebook Feed to WordPress Page or Post

First, click on the Embed button at the top right of your feed customizer.

Next, you’ll see a popup asking you to choose between adding your Facebook feed to a page or to a widget.

To continue, just click on the Add to a Page button here.

add facebook feed to page

Then, choose the page you want to display your Facebook feed on and click the Add button.

select page for facebook feed

The plugin will redirect you to the page you chose. Here, click the Plus (+) icon to add a new WordPress content block.

Type “facebook” into the search field. Then, click on the Custom Facebook Feed block to automatically add it to your page.

how to add facebook feed to wordpress website

Your Facebook feed will then appear in your page editor. Feel free to edit your page’s content as you’d like.

Finally, when you’re happy with how it looks like, click on Publish to make it live on your website, like this:

Add Facebook Feed to WordPress Sidebar

What if you want to display your Facebook feed widget to your sidebar area instead? The plugin can help you with that, too.

First, you need to choose the Facebook feed you want to embed on your sidebar.

To get started, navigate to Facebook Feed » All Feeds from your WordPress dashboard.

Then, click on the Facebook feed you want to embed.

Now, you’ll see the Facebook feed’s live editor open up. At the top right, click on the Embed button.

You’ll see a popup asking you where you want to embed your Facebook feed. Since we’re displaying it on the sidebar area, click on Add to a Widget.

add facebook feed as a widget

Next, you’ll be directed to your website’s very own widgets page. Here, click on Sidebar since you want to add your Facebook widget to your sidebar area.

select sidebar for widget

Then, click on the plus icon (+) to add a new Facebook feed widget to your sidebar.

choose custom facebook feed pro widget

Finally, choose the Custom Facebook Feed block. You’ve now added your Facebook feed to your sidebar area.

Now, when you visit your website and check out the sidebar area, you can see your Facebook feed displayed there, like this:

So, there you have it. Congratulations!

You now know how to easily add your Facebook feed to your WordPress website. And you didn’t even need to bother with css, HTML, or any kind of code.

So, what are you waiting for?

Click here to get started with Facebook Feeds by Smash Balloon today and engage your website visitors with organic content from Facebook!

Want to create feeds with content from Instagram, YouTube, and Twitter? Smash Balloon has you covered.

If you also want to display feeds from other social networks, you can also add your Twitter feed and even your Instagram feed.

Just grab the All Access Bundle and you can get the best WordPress social media feed plugins and post content from the biggest social media platforms.

Finally, if you found this post useful, 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 *