Facebook’s Page Plugin lets you generate embed code for a Facebook page’s feed and add it to your site via custom code in Sitebuilder.
Note: adding and editing custom code requires Sitebuilder Large. If you have a different package, you’ll need to upgrade to use this feature.
Before you start
Go to the Facebook page whose feed you want to embed and copy the page’s URL.
Step 1 – Generate the embed code with Page Plugin
- Open Facebook’s Page Plugin tool.
- Paste the Facebook page URL into the Facebook Page URL field. You can customise how the embedded feed looks here – for example, adding tabs or changing the feed’s dimensions. Scroll down on the Page Plugin page for detailed instructions.
- When you’re done, click Get Code.
Page Plugin generates two code snippets: the first goes in Page settings, and the second in an HTML embed block.
Step 2 – Add the first code in Page settings
The first snippet goes in the After <body> tag field in Page settings. If you want the Facebook feed on several pages, add it instead to the After <body> tag field in the Custom code tab of Website settings, so you don’t need to repeat this step for every page.
- In Page Plugin’s JavaScript SDK tab, copy the first code.
- In Sitebuilder, click Pages in the top bar to open the Page Manager. Find the page you want to embed the feed on and click its Settings icon.
- Go to the Custom code tab, scroll down to After <body> tag and paste the code.
- Click Submit to save.
Step 3 – Add the second code to the page
- Go back to Page Plugin and copy the second code.
- In Sitebuilder, find where you want the Facebook feed and click Add a block (+).
- In the Block library, click HTML embed and choose the <HTML> layout (requires Sitebuilder Large).
- Hover over the block and click the Custom HTML icon.
- Paste the code from Page Plugin into the Custom HTML window.
Step 4 – Add <center> tags
To stop the Facebook feed being pushed to one side, wrap the code in <center> and </center> tags, then click Submit. The result isn’t visible in edit mode – the code only runs once published. Use Preview in the top bar to check it before publishing.
Step 5 – Publish the page
Click Publish in Sitebuilder’s top-right corner to make the changes visible.
Note: Page Plugin may not be visible to users in Europe unless they’re logged in to Facebook and have consented to “App and Website Cookies” – both conditions must be met for visitors to interact with the plugin.
Combining Facebook feeds with other content
The Facebook plugin’s container has a maximum width of 500 px, which isn’t very wide – so we recommend combining it with other content using the HTML widget. For example, add a Custom block with a 2-column grid, put the HTML widget with the Facebook plugin code in one column, and add text, images or buttons in the other. This makes good use of the page’s space while keeping a clean layout.