Step By Step Guide to Embedding Facebook Feed On a Website

Embedding your Facebook page feed on your HTML or WordPress website can help increase engagement on your posts and boost traffic to your website. Your Facebook page feed can easily be embedded within a WordPress page, the WordPress widget area, or even an HTML website by using the Elfsight Facebook Feed Widget.

Elfsight provides both a free and premium version of their Facebook feed widget. The free version allows the embedded widget to be view only 150 times per month, after which it will not be visible to your visitors until the following month. 

There are three tiers to their premium widgets. Each has an increased monthly quota over the previous one and all their premium plans give you the ability to white-label the widget (remove Elfsight branding).

Okay so let’s take a look at their premium plans: 

  • The Basic plan costs $5 per month and allows the widget to be viewed 5,000 times each month
  • The Pro plan costs $15 per month and allows the widget to be viewed 50,000 times each month
  • Finally, the Enterprise plan costs $25 per month and allows the widget to be viewed 5,000,000 times each month

I recommend that you select a plan based on the amount of traffic your website receives each month.

Embed Facebook Feed Into Website

Table of Contents

Create an Elfsight Account

1. Head on over to Elfsight.com and create an account or log in to an existing one.

How To Create a Facebook Feed Widget Step 1

Create and Configure The Facebook Feed Widget

1. From the Elfsight dashboard use the search bar and type in “Facebook feed”.

How To Create a Facebook Feed Widget Step 2

2. Hover over the Facebook feed widget and click on “create widget”.

How To Create a Facebook Feed Widget Step 3

3. Start configuring the widget by selecting a template, then click on the “continue with this template” button.

How To Create a Facebook Feed Widget Step 4

4. Next click on the blue “Connect to Facebook” button and follow along with the instructions to link your Facebook account to the widget.

How To Create a Facebook Feed Widget Step 5

5. Then click on the “layout” tab at the top and configure the following: The width and height of the widget, and the settings for the header, the menu, posts, photos, albums, videos, and the popup.

How To Create a Facebook Feed Widget Step 6

6. Click on the “More” tab and select the default language of the widget and add in custom CSS as you see fit.

How To Create a Facebook Feed Widget Step 7

7. Finally, at the top left of the page give your widget a name and then click on the green “Save” button.

How To Create a Facebook Feed Widget Step 8

Embed The Facebook Feed Widget Into Your Website

1. After creating the Facebook feed widget a popup with the embed code would appear.

How To Embed Facebook Feed Within a WordPress Page Step 1

2. If the pop doesn’t appear you can click on the “add to website” button in the “my widgets” section to get the widget’s embed code.

How To Embed Facebook Feed Within a WordPress Page Step 1b

3. Hover your pointer over the area with the HTML and JavaScript code and click on it to copy the code.

How To Embed Facebook Feed Within a WordPress Page Step 2

How To Embed Facebook Feed Within a WordPress Page

1. Head on over to your WordPress website and locate the page or post that you would like to embed the widget on and click on “edit”.

How To Embed Facebook Feed Within a WordPress Page Step 3

2. On the selected page click on the “add new block” icon and select the “Custom HTML” block.

How To Embed Facebook Feed Within a WordPress Page Step 4

3. Within the custom HTML block paste in the widget code that you copied from Elfsight.

How To Embed Facebook Feed Within a WordPress Page Step 5

4. Click on the “update/publish” button then view the page to see your embedded Facebook feed. 

How To Embed Facebook Feed Within a WordPress Page Step 6

How To Embed Facebook Feed Within a WordPress Widget

1. From your WordPress dashboard locate the “appearance” menu item, hover your pointer over it, and select “widgets”

How To Embed Facebook Feed Within a WordPress Widget Step 1

2. On the WordPress widgets page locate the “custom HTML widget” and drag it over to one of the designated widget areas. 

How To Embed Facebook Feed Within a WordPress Widget Step 2

3. Click on the dropdown arrow on the right side of the widget to reveal its configuration settings.

How To Embed Facebook Feed Within a WordPress Widget Step 3

4. In the title field type in a title for your widget. E.g Facebook feed widget.

How To Embed Facebook Feed Within a WordPress Widget Step 4

5. Within the content area paste in the HTML and JavaScript code that you copied from Elfsight and click save. 

How To Embed Facebook Feed Within a WordPress Widget Step 5

6. Visit your website to view the widget in action 

How To Embed Facebook Feed Within An HTML Website

1. Using your preferred text editor open the HTML page that you would like to embed your Facebook feed on.

How To Embed Facebook Feed Within HTML Website Step 1

2. Locate the place within the existing HTML file where you would like to embed the Facebook feed widget, add paste the code that you copied from Elfsight there. 

How To Embed Facebook Feed Within HTML Website Step 2

3. Cut the line of code that contains the script tag from above the line of code that contains the div tag. 

How To Embed Facebook Feed Within HTML Website Step 3

4. Paste the line of code that contains the script tag at the bottom of the HTML document just before the closing body tag. 

How To Embed Facebook Feed Within HTML Website Step 4

5. Visit the webpage to see the widget in action.