How to Create a Facebook Feed Widget on WordPress

How to Create a Facebook Feed Widget on WordPress (Easy)

By Lianne Laroya on September 22, 2021

Want to know how you can easily create a Facebook feed widget for WordPress? Displaying your Facebook feed on your website is a fantastic way to cross-promote your content on two platforms.

Over 90 million small businesses use Facebook, after all.

Different articles teach different methods, though. So it gets overwhelming to add a Facebook feed widget to WordPress. That’s why in this article, you’ll learn 2 simple methods to create a Facebook feed widget for your site. We’ll show you the easiest way to do this, too  — even if you’re not an IT guru. Yes, newbies are welcome!

Before we dive into the tutorial, let’s find out what we mean by “Facebook feed widget” first.

Or, you can click here to skip ahead to the tutorial.

What’s a WordPress Facebook Widget?

When we talk about widgets, we mean 2 similar things: WordPress widgets, and widgets in a more general sense.

First, WordPress widgets are things that you can add to your website’s sidebar, footer, and widget-ready areas. What kinds of things? By using widgets, you can add several features to your site, like menus, popular post lists, calendars, banner ads, social icons, and more.

For example, when you visit a website, look at their sidebar area. Each block of content in the sidebar is a widget.

facebook feed widget for wordpress sidebar

What do we mean by widgets in a more general sense? “Widget” can also refer to a bit of code that you can use to embed content on any type of website, not just WordPress.

For example, Facebook provides a bit of code called a “widget” that you can place in your WordPress posts or pages.

Simply put, a Facebook widget is Facebook-specific content added to your website. You can either use a WordPress widget in your theme’s widget-ready areas, or use code.

facebook feed widget for wordpress plugin

We’ll show you both methods in this article.

Now that you know what a WordPress Facebook widget is, the next question is…

What’s the Easiest Way to Make a Facebook Feed Widget?

You can create a Facebook feed widget by manually copying and pasting embed code from Facebook. It has a lot of limitations, though:

  • Facebook allows you to display your page’s feed only. Want to display your Facebook group instead? You have to use another plugin to do it.
  • You can just show your feed’s timeline or events. There’s no option to show selected types of posts only.
  • Want to change your feed’s background color? You can’t.
  • How about font size? You can’t, too.
  • Well, what if you want to change the Facebook icon on your feed? You also can’t.
  • Okay, then. What if you just want to customize your feed, so it smoothly integrates with your site’s theme? Facebook doesn’t allow you to do this, too.
  • if you use Facebook’s plugin, you have to deal with several lines of code. Changing the feed’s width? Use code. Changing the feed’s header? Use code? Displaying the feed on WordPress? Use code, too.

facebook embed code

Finally, if you’ve accidentally broken your site because you put the wrong code? There’s no dedicated support team to help you. It can be pretty confusing, especially if you’re not tech-savvy.

The easiest way to make a Facebook feed widget? You can just install an easy-to-use WordPress plugin like Smash Balloon’s Custom Facebook Feed Pro to do it. It’s the best Facebook feed plugin for WordPress.

facebook feed widget for wordpress plugin

Smash Balloon’s Custom Facebook Feed Pro plugin can be added as a Facebook widget on WordPress. It can be easily embedded directly on the new WordPress block editor. Or, you can just paste the plugin’s shortcode right where you need the feed.

When you use the plugin, you can easily customize it by clicking or unclicking options. That’s right. You don’t need to be a Facebook developer — and you don’t need to hire one — just to personalize your Facebook feed to your liking.

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

  • Super simple to set up: Once you’ve installed the plugin, you can have everything set up in under 5 minutes!
  • Customizable layout: Your Facebook feed can have posts shown in different sizes: thumbnails, half-width, and full-width.
  • Responsive theme: It’s mobile-friendly and looks great on any screen size.
  • Different feed types to choose from: The plugin allows you to show feeds from your Facebook page, group, and your own profile. You can also choose to show certain content only, such as events, status, photos, videos, and albums.
  • Lightning-fast loading time: Since the plugin efficiently caches data, your feed loads ultra-fast on your site. Plus, your site will still display a feed, even if Facebook’s temporarily down.
  • Easily customize your feed’s visuals: Change the background color or the font styles easily with just a few clicks.

Check out everything the plugin can do for your online business here.

Finally, did we mention that the plugin comes with super great customer service? 200,000 users and a solid 4.8/5 rating can’t be wrong, after all.

facebook feed widget for wordpress plugin reviews

Ready to boost your Facebook page engagement by adding a Facebook feed widget to WordPress? Check out how you can easily do this by following the step-by-step tutorial below.

2 Methods to Add a Facebook Widget for Your Website

Since manually copying and pasting embed code from Facebook is hard — and confusing — we’ll talk about how you can easily add a Facebook widget to WordPress using a plugin. It’s simpler, easier and faster!

1. Add Facebook Widget to WordPress Posts and Pages With Plugin

With this method, you can show a Facebook feed widget on the pages and posts of your WordPress site. And you can do it in 5 simple steps too.

Step 1: Install the Custom Facebook Feed Pro Plugin

To start, get your own copy of the Custom Facebook Feed Pro plugin here. And then install and activate it on your website.

Not sure how to do this? You can use this helpful tutorial on installing WordPress plugins as your guide.

Once you’ve activated the plugin, you can go to the next step.

Step 2: Create Your Facebook Widget

To create your Facebook widget, go to the Facebook Feed » All Feeds menu from your dashboard. 

After that, just click on the Add New button at the top.

add new feed with custom facebook feed pro

Now you can see all the feed types available with this plugin. You can pick from 9 options here, including a timeline feed, reviews feed, photos feed, videos feed, and more.

all the facebook feed types

Just select the type of feed you want and click on Next.

For this tutorial, we’ll select the timeline feed option here.

select facebook feed type

And you’ve now created your Facebook feed widget. After that, it’s time to go to step 3 and connect it to Facebook.

Step 3: Connect to Your Facebook Page or Group

With this step, you can add a source, which can be a Facebook page or a group.

So, your Facebook feed widget can show the posts, photos, or videos, from that page or group.

To add a new source, click on Add New on this popup.

add new source for facebook feed

You can now see another popup that asks you to choose between a Facebook page or a Facebook group for your widget.

So pick the option you want and then click on the Connect button.

pick between group or page for facebook feed

Once you do that, the plugin will redirect you to Facebook. There, you can give read-only access to the plugin so it can show your Facebook posts.

And since the access is read-only, your data is still safe and the plugin can’t actually change anything.

To proceed, pick the page or group that you want to show on your Facebook feed widget and then click on Next.

select the facebook pages

After you do that, you can finally click on Done and give read-only access to the plugin.

allow read only access to plugin

Now you’ll be back on your website. Select your Facebook page or group here and then click on the Add button to add it as a source.

add new source confirmation

Now you can connect your Facebook widget to the source by clicking on the Next button.

pick your source for custom facebook feed pro

With that, you can now go ahead and customize your Facebook feed widget.

Step 4: Customize Your Facebook Widget

Now, you can see your Facebook widget open in the live feed editor.

live feed editor for facebook

If you check the left side of the screen, you can see all the available customization options there. So you can use these options to change your feed type, feed layout, color scheme, post elements, background, and much more.

When you change any of these options, you can see a live preview on the right. So, you can see how your Facebook widget will look when you’re customizing it.

So let’s get started and customize the layout here. To do that, just select the Feed Layout option.

pick your feed layout option

With this plugin, you have 4 different layout options to pick from: List, Grid, Masonry, and Carousel.

layout options for your facebook widget

Want to show your Facebook posts in a single column? You can choose the list layout then.

list layout for your facebook feed

But if you want to show lots of posts at once on your Facebook widget, you can go for the grid layout.

grid layout for your facebook feed

Want your Facebook posts to have their original proportions? Then try the masonry layout for your Facebook widget.

masonry facebook widget feed layout

Finally, you have the carousel option that shows your posts in a Facebook carousel slider. It’s a great way to get people to interact with your website.

carousel feed layout facebook feed

Once you pick the feed layout you want, click on the Save button on the top right corner.

If you want to get back to customizing your feed, you can click on the small Customize button.

go back to feed customization options

You can also customize the colors of your Facebook widget here. For that, select the Color Scheme option.

pick color scheme option

Now you get to choose between 4 different options for your Facebook widget’s color scheme.

  • Inherit From Theme: Copy the colors of your website
  • Light: Show a light-colored background with a darker text
  • Dark: Use darker background instead and have light color for your text
  • Custom: Pick all the colors of your Facebook widget yourself

After you pick the color scheme you like, click on Save.

color scheme for your facebook feed

And that’s just the start.

With the live feed editor, you can also customize the header, post elements, background, margins, and a lot more. Plus, it’s all super easy and requires zero coding to do.

After you’re done customizing your feed, click on the Save button once again.

Now it’s time to go ahead and embed it on your website.

Step 5: Embed Your Facebook Widget

You can embed your Facebook feeds right here, directly from the live feed editor.

To get started, click on the Embed button in the top right corner.

click on the embed facebook live feed editor

You will now see a new popup that asks you to pick where to embed your Facebook widget.

On the popup, just click on the Add to a Page option to continue.

add facebook feed to page

You can then see all the pages where you can add your new widget. Once you select your page, you can go ahead and click on the Add button.

select page for facebook feed

Next, the plugin will open that page so that you can post your new Facebook widget.

To do that, first click on the small plus icon (+) to add a new block.

Now all you have to do is select the Custom Facebook Feed block under the Widgets section.

add facebook custom feed block

Finally, click on Publish, and you’ve successfully embedded your Facebook feed widget. Now you can open up your site and check how it looks on the front end.

facebook feed widget example

And that’s how you can show your Facebook widget on your website. Plus, there’s another great way to post your widgets as well.

2. Add the Facebook Widget to Your WordPress Sidebar

In addition to your WordPress posts and pages, your sidebar is a widget-ready area, too. Learn how to add a Facebook feed widget to your sidebar area by following the steps below:

Step 1: Open Your Facebook Widget in the Live Feed Editor

Before you embed your Facebook widget, you’ll need to open it in the live feed editor. For that, navigate to Facebook Feed » All Feeds from your WordPress dashboard.

From there, click on your Facebook widget from earlier to open it.

open your facebook feed in the live editor

Now that it’s open in the live feed editor, you can go ahead and embed it.

Step 2: Embed Your Facebook Widget on the Sidebar

First, click on the Embed button at the top of the page.

click on the embed facebook live feed editor

Doing that will open a popup that asks you to select where you want to embed your widget. Here, just click on Add to a Widget.

add facebook feed as a widget

Now, the plugin will send you to the Widgets page, where you can manage all of your current widgets and add new ones.

To continue, click on the Sidebar panel.

select sidebar for widget

After that, click on the plus icon (+) at the bottom. Now, just select Custom Facebook Feed from all the options there.

choose custom facebook feed pro widget

So that’s how you can add your Facebook feed widget to your sidebar in just a few easy steps. You can then open your site and see how your widget looks.

facebook feed widget sidebar example

And that’s it! You’ve finally learned how to add a Facebook feed widget to your website — easily, conveniently, and hassle-free, even if you’re not a techie!

After all, if there’s a simpler way to achieve your goal, why wouldn’t you do it, right?

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

So, what are you waiting for?

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

And if you found this article useful, feel free to follow us on Twitter and Facebook for more helpful social media marketing tutorials.

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 *