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 viewed 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.
Create an Elfsight Account
1. Head on over to Elfsight.com and create an account or log in to an existing one.
Create and Configure The Facebook Feed Widget
1. From the Elfsight dashboard use the search bar and type in “Facebook feed”.
2. Hover over the Facebook feed widget and click on “create widget”.
3. Start configuring the widget by selecting a template, then click on the “continue with this template” button.
4. Next click on the blue “Connect to Facebook” button and follow along with the instructions to link your Facebook account to the widget.
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.
6. Click on the “More” tab and select the default language of the widget and add in custom CSS as you see fit.
7. Finally, at the top left of the page give your widget a name and then click on the green “Save” button.
Embed The Facebook Feed Widget Into Your Website
1. After creating the Facebook feed widget a popup with the embed code would appear.
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.
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
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”.
2. On the selected page click on the “add new block” icon and select the “Custom HTML” block.
3. Within the custom HTML block paste in the widget code that you copied from Elfsight.
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 Widget
1. From your WordPress dashboard locate the “appearance” menu item, hover your pointer over it, and select “widgets”.
2. On the WordPress widgets page locate the “custom HTML widget” and drag it over to one of the designated widget areas.
3. Click on the dropdown arrow on the right side of the widget to reveal its configuration settings.
4. In the title field type in a title for your widget. E.g Facebook feed widget.
5. Within the content area paste in the HTML and JavaScript code that you copied from Elfsight and click save.
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.
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.
3. Cut the line of code that contains the script tag from above the line of code that contains the div tag.
4. Paste the line of code that contains the script tag at the bottom of the HTML document just before the closing body tag.
5. Visit the webpage to see the widget in action.
