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.
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 its sidebar area. Each block of content in the sidebar is a widget.
Facebook also 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.
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 connecting to the Facebook API and generating embed codes. 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.
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 Facebook Feed Pro to do it. It’s the best Facebook feed plugin for WordPress.
As the best Facebook feed WordPress plugin, you can use it to easily embed Facebook content directly on your website in just minutes.
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.
- Different feed types to choose from: The plugin allows you to show feeds from your Facebook page, group, and your own Facebook profile. You can also choose to show certain content only, such as Facebook videos, events, status, photos, 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.
- Responsive theme: It’s mobile-friendly and looks great on any screen size.
- SEO friendly: By automatically showing fresh content from Facebook, you can rank higher in search engine results.
- 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? 250,000 users and a solid 4.9/5 rating can’t be wrong, after all.
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 a Facebook Widget to WordPress Posts and Pages With a Plugin
With this method, you can show a Facebook feed widget on the pages and posts of your WordPress site. Plus, you can do it in 5 simple steps too.
Step 1: Install the Facebook Feed Pro Plugin
To start, get your own copy of the 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.
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.
Just select the type of feed you want and click on Next.
For this tutorial, we’ll select the timeline feed option here.
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.
You can now see another popup that asks you to choose between Facebook page feeds or Facebook group feeds for your widget.
So pick the option you want and then click on the Connect button.
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.
After you do that, you can finally click on Done to finish connecting your Facebook account.
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.
Now you can connect your Facebook widget to the source by clicking on the Next button.
With that, you can now go ahead and customize your Facebook feed widget.
Step 4: Customize Your Facebook Widget
To help you customize your Facebook feed widget with ease, the plugin lets you import the design of a pre-built theme.
There are 5 themes you can choose from, and each has a unique design:
- Default
- Modern
- Social Wall
- Outline
- Overlap
To continue, select the theme that you’d like to use and then click on Next.
Facebook Feed Pro also lets you quickly import a template to change the layout of the Facebook posts in your widget.
You have 7 templates to choose from:
- Default
- Simple Masonry
- Widget
- Large Grid
- Latest Album
- Showcase Carousel
- Simple Carousel
To continue, select your template, and click on Next.
Now, you can see your Facebook widget open in the live feed editor.
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.
With this plugin, you have 4 different layout options to pick from: List, Grid, Masonry, and Carousel.
Below that, you can find the options to set the number of posts on your Facebook feed.
Want to show your Facebook posts in a single column? You can choose the list layout then.
But if you want to show lots of posts at once on your Facebook widget, you can go for the grid layout.
Want your Facebook posts to have their original proportions? Then try the masonry layout for your Facebook widget.
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.
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.
You can also customize the colors of your Facebook widget here. For that, select the 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 WordPress theme
- Light: Show a light-colored background with a darker text
- Dark: Use a 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.
And that’s just the start.
With the live feed editor, you can also customize the header, cover photo, like button box, post elements, background, margins, and a lot more. Plus, it’s all super easy and requires zero HTML, Custom CSS, or any coding.
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.
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.
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.
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.
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.
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.
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.
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.
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.
After that, click on the plus icon (+) at the bottom. Now, just select Custom Facebook Feed from all the options there.
As you can see, it’s super easy to create a FB widget for WordPress with the help of this plugin. You can then open your site and see how your widget looks.
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?
So, what are you waiting for? Click here to get started with Facebook Feeds today!
While you’re here, you can take a look at this guide on how to embed an Instagram feed on your WordPress website.
And if you found this article useful, feel free to follow us on Twitter and Facebook for more helpful social media marketing tutorials.
