How to Add a Facebook Feed to Your Divi Website without a Plugin
In this tutorial, I’m going to show you how to easily add a Facebook Page Feed to your Divi website!
The best part is this requires no additional plugins or Divi modules, and can be done completely for free.
While it’s very easy to do, there are a couple of steps that must be done first. You will need to create a “Facebook App” on the Facebook developer website. But don’t worry, it’s literally just a couple of steps with simple fields to fill out (takes 2 minutes) in order to obtain the App ID that is needed to embed the Facebook feed. I’ll walk you through the steps of creating the app below.
You may be asking, “if I buy a plugin or Divi module for a Facebook Feed, can I skip the step of creating a Facebook App?”
The answer is no. Even if you use a plugin or Divi module for the Facebook Feed, you still have to create the app. But as mentioned above, it’s super simple and takes no time at all.
How to Create a Divi Facebook Feed
- Create a “Facebook App” on the Facebook Developer Website
- Go to the “Facebook Page Plugin” Tool, Customize Parameters & Obtain iFrame Embed Code
- Paste the embed code into a Divi Code Module on the page you’d like to embed the Facebook Feed
Boom, you’re done! That’s the high level overview. Let’s look at each step more in depth.
Step 1: Create a “Facebook App” on the Facebook Developer Website
Go to https://developers.facebook.com/, then click “My Apps” (top right corner), then click on the Green “Create App” button.
Next, you’ll select the “Manage Business Integrations” (top option), and fill out the fields as shown in the screen shots below.
Once you’ve filled out the fields as shown in the screen shot above, click, “Create App” button.
Then, navigate to the “Basic” Settings which is found on the left menu under “Settings”.
Then, fill out the fields as shown in the screen shot below:
Once you’ve filled out all the fields, you can scroll down to the Save Change button at the bottom.
Your app is now created, and we can go to the next step of obtaining the embed code.
Step Two: Go to the “Facebook Page Plugin” Tool, Customize Parameters & Obtain iFrame Embed Code
Facebook actually has a handy tool for creating the necessary embed code to add to your website.
Go to the Facebook Page Plugin tool, add your Facebook Page URL, & customize the width/height, and any additional desired settings. We recommend setting the width to the maximum (500) and height of at least 700.
After you click the “Get Code” button as shown above, a modal will popup up. Click on the Iframe option at the top, and copy the code.
Now that we have the embed code copied, we can head on over to Divi!
Step Three: Paste the embed code into a Divi Code Module on the page you’d like to embed the Facebook Feed
Open up a Divi code module and paste the Facebook embed code into the module.
We also recommend setting the max-width to the 500 (or whatever you set the width in the embed code). This will allow you to use the module alignment properly to center the embed.
And we’re done! You can now place that Facebook feed in the Divi module anywhere on your Divi website! You can place it on a static page, in a sidebar, in a Theme Builder layout, or anywhere else you can think of.
Don’t forget to subscribe below to get access to all the Divi tutorials and freebies we’re adding this month!