Facebook has its very own Page Plugin, allowing you to produce embed code for any profile's individual Facebook feed and enter it into the custom code in the Sitebuilder.
Before you begin
Navigate to the Facebook profile whose feed you want to embed and copy the URL of this page.
Step 1 - Generate the embed code in the Page Plugin tool
- To embed a Facebook feed into your website page, open Facebook's native Page Plugin tool.
-
Paste the URL of the Facebook page you copied before into the Facebook Page URL field. Note: You can customize the look and feel of the embedded feed on this page. For example, you can add the tabs you want to be displayed alongside your embedded feed or change the feed dimensions. Scroll down the Page plugin page to get detailed instructions.
-
After you finish with the settings, click the Get Code button.
The Page Plugin will generate two code snippets that you’ll need to embed into your website: The first one into the Page settings and the second one into the Embed HTML block.
Step 2 - Embed the first code to the Page settings
The first code snippet has to be included in your Page Settings once in the After <body> tag field. However, if you want to embed the Facebook feed into many pages on your site, you should include it in the same after <body> tag in your Website settings’ Custom code tab to avoid repeating Step 2 for every page.
To embed the code into the Page Settings, follow these steps:
-
In the Page Plugin’s JavaScript SDK tab, copy the first code.
- In Sitebuilder, click Pages on the Topbar to open the Page manager. Find the page you want to embed the Facebook feed into in the list and click its Settings icon.
- Go to the Custom Code tab, scroll down to the After <body> tag field, and paste the code you copied before into the field.
-
Click Submit to save the changes.
Step 3 - Embed the second code to the Page settings
-
After you embed the first code into the Page Settings, go back to the Page Plugin and copy the second code.
- In the Sitebuilder, find a place where you want to embed the Facebook feed and click the Add a block (+) Plus button.
-
In the Blocks library, click the Embed HTML block and choose the <HTML> layout. Note: This is a premium block, so an upgrade may be required.
-
Hover the block to activate the control pane. Click the Custom HTML icon.
- Paste the code you’ve copied from Page Plugin into the Custom HTML window.
Step 4 - Add <center> tags
To prevent your Facebook feed from being pushed to the side of the page, add <center></center> tags to the code.
Wrap the code with <center> and </center> tags so the image displays in the center of your page. Click Submit.
The results will not be visible at this stage, you need to publish your site for your code to be executed. If you want to check how the code works before publishing, use the Preview button on the Topbar.
Step 4 - Publish the page
Once done, click Publish in the upper right corner of the Sitebuilder to make the changes live.
Note: The Page Plugin may not be visible for European users unless they're logged in and consented to "App and Website Cookies." Only meeting both conditions lets users interact with this plugin.
Combining Facebook feeds with other types of content
The maximum width of the Facebook plugin container is 500 px which is not much. This is why we recommend you try combining the Facebook feed plugin with other content. You can use the HTML widget for this purpose.
For example, you can add the Custom block to your page and choose a 2-column grid. Then, add the HTML widget to one of the columns and embed the Facebook plugin code (from Step 2 in this tutorial). To the second column, you can add any other content like text, image, buttons, and so on.
This way, you will use the page space productively and maintain a nice layout.