How to Add Facebook Feed to Divi WordPress Sites Easily (2023)
Home Blog How to Add Facebook Feed to Divi WordPress Sites Easily (2023)

How to Add Facebook Feed to Divi WordPress Sites Easily (2023)

How to Add a Facebook Feed to Your Divi WordPress Site

Want to add your Facebook feed to a Divi WordPress website?

As one of the most popular page builders out there, Divi is a great option if you want to build amazing pages.

On top of that, this page builder is also so easy to use. So you can create beautiful pages with absolutely no coding needed.

But if you want to make your Divi web page even more engaging, there’s an easy way to do it. You can just add a Facebook feed.

Today, we will show you the easiest way to add a Facebook feed to Divi.

But before that, let’s see how showing a Facebook feed on your Divi website can help you out.

Why Use a Facebook Feed with Divi?

With Divi, it’s super easy to build web pages that are engaging. You can do it in just a few clicks using the drag-and-drop builder, even if you’re a WordPress newbie.

divi introduction

But if you want to promote your Divi website, one of the best ways is to use social media. You have over 3.6 billion active social media users that you can target with marketing!

And when it comes to social media, Facebook is still the king, with over 2.96 billion active users.

If marketing your Facebook on your site sounds like a great idea, there’s one thing you can try to make it super easy. You can add a Facebook feed to your Divi WordPress site.

Here’s what you can get by embedding Facebook feeds to your site:

  • Your Facebook feed can get you more likes, shares, and followers from all the people visiting your website.
  • Adding a Facebook group feed is a great way to get website visitors to join your community.
  • You can show reviews and testimonials from Facebook on your website as social proof. So, visitors can see that actual people are using products, which can boost your conversions.
  • It’s also easy to show Facebook photos and videos and make your site more interesting for your visitors.

And that’s just the start. You can add a Facebook feed to your Divi site and boost engagement, get more conversions, and improve your social media marketing.

Plus, it’s super easy to embed a Facebook feed on your website. To help you with that, we’ll show you the best Facebook feed plugin.

Best Way to Add a Facebook Feed to Divi

When it comes to integrating Facebook into your website, Facebook Feed Pro is the best option out there.

custom facebook feed pro homepage

With this user-friendly plugin, you can create, customize and embed Facebook feeds in just a few simple clicks — no coding needed.

Plus, it comes with a ton of features to help you build engaging Facebook feeds. Here are a few highlights:

  • Fast and Easy Setup: Setting up the plugin is simple and quick, so you’ll be able to post your Facebook feeds in just a few minutes.
  • Live Feed Editor: You can easily customize your Facebook feeds with a live feed editor to help you out — no need for Custom CSS, HTML, or any code.
  • Lots of Feed Types: You can choose from Facebook page feeds, group feeds, reviews feeds, album feeds, video feeds, and a lot more.
  • Optimized for Speed: Facebook Feed Pro allows you to add as many feeds as you want while keeping your site as fast as ever. On top of that, a faster site will also be great for your SEO.
  • Customer Support: This plugin also comes with a team of WordPress experts who will make sure you have a smooth experience.

As you can see, Facebook Feed Pro has a lot of great features. With all that, it really is the best Facebook feed plugin in the market.

In fact, it has 250,000+ active users and a rating of 4.9/5 stars which speaks for itself.

reviews for custom facebook feeds pro

And all of the Smash Balloon plugins work perfectly with the Divi theme and page builder. So you can get more engagement and conversions on your Divi website with ease.

So, check out Facebook Feed Pro to give your website a boost.

With that, let’s get started and show you how to add Facebook feeds to your Divi WordPress site.

How to Add a Facebook Feed to Your Divi WordPress Site

Using Facebook Feed Pro, it’s pretty easy to create, customize, and post Facebook feeds with these easy steps:

Step 1: Install and Activate Facebook Feed Pro

First, go and grab your copy of Facebook Feed Pro from here.

Now, you can install and activate the plugin on your WordPress site.

Not sure how to do that? You can just follow our step-by-step guide on how to install a WordPress plugin.

Step 2: Create Your Facebook Feed

Now that you’ve installed and activated the plugin, you can go to the Facebook Feed » All Feeds menu from your dashboard. 

On that new page, click on the Add New button at the top.

add new feed with custom facebook feed pro

After that, you can go ahead and pick the type of Facebook feed you want for your Divi WordPress site.

Here, you have 9 types of Facebook feeds: including timeline feed, reviews feed, videos feed, photos feed, and much more.

all the facebook feed types

Pick the feed type you prefer, and then click on the Next button.

For this tutorial, we’ll go for a timeline feed.

select facebook feed type

And you’ve created a new Facebook feed. You can move to step 3 and connect your new feed to Facebook.

Step 3: Connect to Your Facebook Account

To show Facebook content on your feed, you need to connect a Facebook page or group as a source.

For that, click on the Add New button to get started.

add new source for facebook feed

You can now see a popup that asks you to pick between a page or a group for the source.

Once you select the type of source you want, click on Connect.

pick between group or page for facebook feed

Clicking on that will open Facebook, where you can choose which pages or groups you want to connect.

To continue, select your page or group on the popup and click on Next.

select the facebook pages

Now, you can give the plugin a read-only access so that it can show Facebook content.

Of course, the plugin is completely safe since it can only read your Facebook content and can’t make any changes.

Just click on Done on the popup to confirm the read-only access.

allow read only access to plugin

This will bring you back to your WordPress site, where a new popup asks you to confirm this source.

To do that, just click on Add.

add new source confirmation

And to finish connecting your new feed to Facebook, click on the Next button.

pick your source for custom facebook feed pro

And you’ve now connected your new feed to Facebook. The next step is to customize the Facebook feed.

Step 4: Customize Your Facebook Feed

You can now see your Facebook feed open in the live feed editor, where you can customize it.

custom facebook feed pro live editor

The live feed editor has all the customization options on the left and a live preview of your feed on the right.

So, you can easily set your feed type, feed layout, color scheme, header style, post layout, and much more.

To get started, you can select the Feed Layout option on the left.

select the facebook feed layout

This will show you the different layouts for your new Facebook feed: List, Grid, Masonry, and Carousel.

You can show all of your Facebook posts one after the other in a single line with a list layout.

This is a great choice if you want visitors to focus on one post at a time.

list layout for the facebook group feed

The next option is the grid layout, where your Facebook posts will appear in rows and columns.

If you want to show lots of Facebook photos and videos at once, this can be the option for you.

grid layout for your facebook feed

If you want to show your Facebook feeds in different columns, you can go for the masonry layout.

masonry feed layout for facebook

Want to get visitors to interact with your website? You’ve got the carousel layout that will put your posts in a Facebook carousel slider.

carousel feed layout for facebook group feed

Finally, click on the Save button to save your new Facebook feed layout.

After that, you can just use the Customize button to go back and see the rest of the customization options.

go back to facebook customization options

Now that you’ve set the feed layout, you can select the Color Scheme option and set the colors of your Facebook feed.

select color scheme for facebook feed

You can pick a color scheme from the 4 different available options here:

  • Inherit From Theme: Copy the colors of your Divi WordPress theme
  • Light: Show a bright Facebook feed
  • Dark: Pick dark colors for your Facebook feed
  • Custom: Manually set the Facebook feed colors

Just select the color scheme you prefer and then click on Save.

custom facebook feed pro color schemes

You can now go ahead and customize the rest of your Facebook feed, including the header style, post elements, post layout, feed margins, background, like box, and much more here.

Finally, click on the Save button and move on to step 5 to embed this Facebook feed on your Divi WordPress site.

Step 5: Embed Your Facebook Feed on Your Divi WordPress Site

It’s pretty easy to embed your Facebook feed using your live feed editor.

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

click on the embed button

Now, you can see a popup that contains the unique shortcode of your Facebook feed. To continue, just click on the Copy button.

You can use this code for embedding this Facebook feed in your WordPress Divi site so remember to copy it properly.

copy the embed code

After that, you can go to Pages » Add New from your dashboard to create a new WordPress page.

On the new page, click on the Use Divi Builder button.

add new page in divi

You can also use a WordPress post for this. From your dashboard, go to Posts » Add New and then select Use Divi Builder.

add new post in divi

Now that you have the Divi builder open, you have 3 options:

  • Start Building: Start creating your page from scratch
  • Browse Layouts: Import the design of a pre-built layout
  • Choose Page: Copy the design of an existing page

Just click on either of the three options to proceed here.

options to build a page in divi

The Start Building option will show you a blank page, and you can start editing right away.

start building from blank template

With the Browse Layouts option, you will see a new popup where you can browse all of your available page layouts.

If you see a layout you like, you can just click on it.

load layout from library

Once you do that, you can see the Layout Details popup. And if you want to use the layout for your page, just click on Use This Layout.

use a divi layout

When it comes to the Choose Page option, you can see a popup with all the existing page layouts listed out.

So. you can click on any of these page layouts to continue.

load your existing pages

Now, you can add your Smash Balloon Facebook feed to the Divi builder. For that, you need to click on the small green plus icon (+) to open the Insert Row popup.

Your Facebook feed will be placed in a row, and you can choose the size of that row here.

You can just click on the type of row you want to continue.

insert row in divi builder

On the new popup, type in “code” in the search bar to find the code module and then click on it.

add code module

After that, just go to the code field and paste the code from earlier, which allows you to embed your Facebook feed in this WordPress Divi site.

Finally, click on the check icon at the bottom.

add code module with facebook feed shortcode

You’ve now successfully added a Facebook feed to your Divi WordPress site. Just open your website and see how it looks.

example of a adding a facebook feed divi wordpress

And that’s it!

Now you know how to add a Facebook feed to a Divi WordPress site. With the best Facebook feed plugin to help you out, it can be super easy.

Using Facebook Feed Pro, you can create, customize, and add Facebook feeds that can help you boost your engagement, get more conversions, and market your brand.

So what are you waiting for? Get your copy of Facebook Feed Pro today!

Want to use Twitter with Divi to make your site more engaging? Why not check out our guide on how to add Twitter Divi feeds to your website.

If you found this article to be helpful, give us a follow on Twitter and Facebook, and stay tuned for more social media marketing tips and tricks.

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.