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

Last updated on December 20th, 2020

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 in 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 the easiest way to do this, too  — even if you’re not an IT guru. Yes, newbies are welcome!

Before we dive in to 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 widget 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

Step 1:  Install Custom Facebook Feeds Plugin

To start, get your own copy of the Custom Facebook Feed Pro plugin here. Download the plugin to your computer, and upload it to 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: Connect Your Facebook Page

After activating your plugin, it’ll create a new menu in your WordPress dashboard. Navigate to Facebook Feed » Configuration to go to the settings page.

connect facebook account to facebook feed widget for wordpress

Then, click the blue Connect a Facebook Account button to sign in to Facebook and link your Facebook account.

In this tutorial, we’ll add a Facebook widget to display your Facebook page on your site. As mentioned, the plugin allows you to show your Facebook feed from your group or your page, so you have more options.

display facebook page widget on wordpress

Follow the onscreen instructions to connect your Facebook account to the plugin. Then, click on Save Settings to preserve your choice. Your Facebook account is now connected!

Step 3: Choose Which Facebook Content to Show

Now that your account’s connected, it’s time to choose the type of content you want to display. First, scroll up to the topmost area of the settings area. Then, click on the Customize » General tabs.

This page has lots of customization options. Here, you can change your feed’s width, height, padding and even background color.

customize facebook feed widget wordpress

Plus, you can also customize your feed’s header, “like” box and “load more” button on this page.

facebook page header like box

To choose the type of content you want to show, go to the Post Types section on the page. You can choose to select all types of Facebook feeds by checking everything.

facebook post types widget wordpress

If you check all the options, your feed will display all content types on your website. You can also choose to select Photos only, to make sure that only Facebook photos will be shown on your feed.

And the choices don’t just stop there — you can even select to show photos from your photos page or photos posted on your timeline. To change the source of your Facebook feed, choose Timeline.

facebook photo feed widget wordpress

Remember to click on Save Changes to make sure your choices are saved in the plugin.

Step 4: Select Your Facebook Feed’s Layout

To change your feed’s layout, scroll to the topmost area of the settings page. Navigate to the Post Layout tab and choose from 3 layout options.

facebook feed widget for wordpress layout

Choosing the Thumbnail layout will show your posts with small images, like this:

facebook feed widget for wordpress thumbnail

Meanwhile, the half-width layout will display your feed with images resized to half feed’s width.

facebook feed widget for wordpress half width

Finally, choosing the full-width layout will beautifully display your feed’s images in a larger size compared to the others. It’s the best choice if you want to show your Facebook videos or photos, since the large pictures can encourage your site visitors to engage with you.

facebook feed widget for wordpress full width

When you’re happy with your feed’s appearance, click the Save Changes button. It’s time to put your Facebook feed widget to your WordPress website in the next step below.

Step 5: Add Your Facebook Feed Widget to WordPress Page or Post

Start by navigating to Pages » Add New from your WordPress dashboard. Doing this allows you to create a new page, where you’ll add your Facebook feed widget to.

facebook feed widget for wordpress add page

In the block editor, click the Plus (+) icon to add a new WordPress block. Then, click the Custom Facebook Feed block under the Widgets section. This will automatically add it to your page. This Facebook feed widget also allows you to see a preview of your feed.

facebook feed widget for wordpress editor

Satisfied with your feed’s visuals? Great! Click on Publish to finally make your feed live on your website, like this:

facebook feed widget for wordpress example

2. Add a 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: Copy Your Plugin’s Shortcode

To start adding your Facebook widget to your sidebar, copy your shortcode first.

You can find this going to your WordPress dashboard. Then, navigate to Facebook Feed » Settings and scroll down until you can see the Display your feed area.

facebook feed widget for wordpress shortcode

Copy the shortcode here.

Step 2: Place Your Facebook Feed Widget on Your Sidebar

On your WordPress dashboard, navigate to Appearance » Widgets. Under Available Widgets section, drag the Text WordPress widget to your chosen sidebar. In this tutorial, we’ll put the Text widget in the primary sidebar.

facebook feed widget for wordpress sidebar

Remember the shortcode you copied earlier?  Paste it inside the Text widget area. Then, click Save to preserve your settings.

Once you’ve saved your settings, you can now go to your website and check out the sidebar area. Here, you’ll see your Facebook feed widget added to your WordPress, like this:

facebook feed widget for wordpress 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 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 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 *