X

How to Show a Facebook Feed in WordPress

how to add facebook feed in wordpress

Do you want to showcase your Facebook posts on your WordPress site?

You can create a custom Facebook feed that automatically displays your Facebook posts from a page or a group directly on your website.

In this article, we’ll show you how to easily set up a custom Facebook feed to improve engagement and help grow your social media following.

Why Create a Custom Facebook Feed in WordPress?

With over 2.7 billion active users, Facebook is the largest and most popular social media platform in the world.

It helps build credibility and improve visibility for your brand.

Now, you may already post engaging content on your Facebook pages and groups. But wouldn’t it be great if your website visitors could see this content too?

Instead of manually posting your Facebook content to your site, you can create a custom Facebook feed. This will automatically fetch content that you post to Facebook and showcase it on your site.

Here’s a glimpse of what a Facebook feed would look like on your website:

smash balloon facebook feed demo

Your visitors can view and like posts and also like your page directly from your site without having to go back to Facebook.

With the feed, you can grow your Facebook following and get more likes. Plus, you can add fresh content to your site to increase engagement and drive traffic.

That said, let’s get started with adding a custom Facebook feed to your WordPress site.

Adding a Facebook Feed in WordPress

Adding your own custom Facebook feed to your site sounds complicated. However, we’re going to show you how to easily do it with just a few clicks. You don’t need a developer, and you don’t need to know any coding for this.

In this tutorial, we’ll be using Smash Balloon:

smash balloon facebook feed page

Smash Balloon is simple to use but, at the same time, it comes with powerful features.

It lets you create feeds for Facebook, Twitter, YouTube, and Instagram. To learn more, check out our review on SmashBalloon where we cover all its features.

Today, we’ll focus on creating a Facebook Feed using the Custom Facebook Feed plugin by Smash Balloon.

Custom Facebook Feed lets you seamlessly integrate your Facebook content with your website. It only takes a few minutes to create, customize, and add a beautiful Facebook feed on your WordPress site.

It has a free version and a pro version that you can use. We’ll be using the pro version because it’s got really cool features that take the Facebook feed to a whole new level.

Step 1: Install, Activate, and Connect to Smash Balloon

First, install and activate the Custom Facebook Feed plugin. For more details, use this step by step guide on how to install a WordPress plugin.

Once it’s activated, on your WordPress dashboard, you need to visit the Facebook Feed » Settings » License page to enter your license key.

If you don’t have your license key, head over to your account on the Smash Balloon website. Under the Downloads tab, you’ll find your license key information.

Smash Balloon license key

After you’ve activated your license, you’ll need to connect your site to your Facebook page or group.

For this, switch to the Configuration tab and here, you’ll see a big blue button that says ‘Connect a Facebook account’.

connect facebook blue button smash balloon

When you click this button, a popup window will appear with options to select either a Facebook page or group. We’ll show you how to connect to both.

Connect Your Facebook Page to WordPress

First, select ‘Facebook Page’ and click on the ‘Continue’ button. This will take you to the Facebook website where you’ll need to login into your account.

select facebook page smash balloon

Once you’re logged in, you’ll see a list of your Facebook pages that you manage. Select the one you want to connect to your site and move on to the next step. You can also select multiple pages if you like.

select page smash balloon

Next, Smash Balloon will ask for permission to read and manage your content. You can grant permission by simply clicking on the ‘Done’ button.

facebook permission smash balloon

Once you grant the required permissions, you’ll return back to your site. Here, you’ll see a list of all the pages you’ve given access to. You can either choose a specific page or connect all of them to your site.

connect facebook page smash balloon

Next, Smash Balloon will automatically fetch your Facebook ID and your Facebook Access Token. You’ll see it filled in for you.

connected facebook account smash balloon

All that’s left to do is save your settings to store the connection.

Connect Your Facebook Group to WordPress

Connecting to a Facebook group is quite similar to a page. First, select ‘Facebook Group’, after which you’ll need to log into your Facebook account.

facebook group smash balloon

On the next page, Smash Balloon will ask for permission to read the content of your page or group. You’ll need to click on the ‘Choose what you allow’ link to select specific groups.

smash balloon choose what you allow

After you’ve given permission to the groups you want to connect to, you’ll return to your site.

Here, you’ll see a list of all the groups you’ve authorized. Select the group you want to connect with and then click on the ‘Use token for this Group’ button.

group token smash balloon

This will connect your site to your Facebook group and you’ll see that your Facebook ID and access token are auto-filled in.

After this, you’ll see a message to add the Smash Balloon app to your Facebook group settings.

add smash balloon app here

The easiest way to do this is to click on the ‘here’ link in the popup message. This will take you to a page where you can open the app settings.

Simply search for ‘Smash Balloon’ and add it to your Facebook group settings.

group apps smash balloon

When you’re done, remember to save your settings on your WordPress site.

Now that you’ve successfully connected to Facebook, you can add the feed to your WordPress site.

Step 2: Display the Custom Facebook Feed in WordPress

Smash Balloon makes it easy to add the custom Facebook feed to a page, post, or sidebar on your WordPress site. We’ll show you how to add it to all three options.

1. Display a Facebook Feed in WordPress Pages and Posts

The steps to add the custom Facebook feed to a post or a page are the same. To keep things simple, we’ll show you how to add the feed to a new post.

On your WordPress admin dashboard, select Posts » Add New to create a new post.

In the post edit page, add a new block by clicking on the (+) icon. Then search for ‘Custom Facebook Feed’ and add it as a block.

custom facebook feed block

When you do this, a preview of your Facebook feed appears in the editing panel on the right.

If you’re using the Classic editor, you’ll need to paste the shortcode [custom-facebook-feed] in your page or post where you want it to appear.

classic editor facebook smash balloon

Once done, Save or Publish your page and preview it to see your Facebook feed embedded on your site.

2. Display Facebook Feed in a WordPress Sidebar

To add the custom Facebook feed to a sidebar, open the Appearance » Widgets page in your WordPress dashboard.

Under Available Widgets, add the Text widget to your sidebar. This will open up a text editor where you can paste the shortcode [custom-facebook-feed] inside.

facebook sidebar widget smash balloon

Now, you can visit any page on your site that has a sidebar, and you’ll see the Facebook feed displayed.

facebook feed in sidebar

You’ll see that the feed also has social buttons such as like, comment, and share. This lets your visitors easily engage with your Facebook page or group from your site.

3. Displaying Multiple Facebook Feeds

You may want to add more than one custom Facebook feed to your WordPress site.

With Smash Balloon, you can connect to only one page or group ID. However, you can still add multiple feeds to your site.

If you want to add a feed from a different page, you’ll need to modify the shortcode like this:

[custom-facebook-feed id=isitwp]

Like this, there are a lot of things you can do by changing the shortcode.

Step 3: Customize the Appearance of Your Facebook Feed

Now that your Facebook feed is live on your site, you might want to personalize the appearance to match your brand.

Visit the Custom Facebook Feed » Customize page to edit the settings.

You’ll see that this page has multiple tabs giving you plenty of customization options.

First, let’s start with the General settings tab. Here, you can filter the types of posts you want to show such as statuses, events, photos, and videos.

type of posts facebook smash balloon

After this, go to the Post Layout tab. You’ll see three options to display the feed that lets you create thumbnails, half-width, or full-sized posts.

post layout smash balloon

We chose the ‘Half-width’ option that displays the image and the text evenly.

Next, under the Style Posts tab, you can change how the post looks. You can choose between a regular and boxed style.

customize style posts smash balloon

Like this, there are tons of customization options to personalize your feed and match your brand. Once you are satisfied with the look of it, save your changes and check out your customized feed live on your site.

Create a Social Wall

Besides creating a Facebook feed, Smash Balloon lets you do much more with social media on your site. It lets you create a powerful Social Wall with combined content from Facebook, Instagram, Twitter, and YouTube.

social wall

This will help you increase engagement and gain followers across all platforms. And just like the Facebook feed, it’s easy to set up the social wall.

It’s a great way to keep your site’s content fresh with posts from your social media accounts.

With that, you have everything to create a custom Facebook feed on your site as well as a combined social wall.

We hope you found this post helpful. If so, you might also like our lists of the best WordPress plugins (compared) and the best WordPress social media plugins for engagement.

These posts will help drive traffic, increase engagement, and grow your subscriber list.

Comments  Leave a Reply

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.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[50% OFF Today!]
[50% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]