Embedding a Facebook Page feed

Embedding a Facebook profile's entire feed onto your website is as easy as embedding a single post or video. Here’s how you can do it.

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. Press Command+C on your keyboard (or Control+C, if you're using a PC) to copy the URL of this page to your computer's clipboard.


Step 1 - Add the page URL to Facebook's Page Plugin tool

To embed a Facebook feed into your blog or website, open Facebook's native Page Plugin tool here

Enter the URL of the Facebook Page you want to embed. Paste the URL from your clipboard into the top-left field:



Step 2 - Customize the look and feel of the embedded feed

On this page, you can add the tabs you want to be displayed alongside your embedded feed.

In addition to showing a profile's entire timeline, Facebook's Page Plugin also lets you display tabs to that profile's Events and/or Messenger account. By default, the Page Plugin tool will have a "timeline" entered by itself.

To add either Events or Messenger tabs to your embedded Facebook feed, add the words "events" and/or "messages" next to the word "timeline," all separated by commas.


Your embeddable code should look like this:

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcopywriter.world&tabs=timeline,events,messages&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

You can also customize the feed dimensions and call to action button, as instructed on the tool page.


Step 3 -  Get the code

When you are done with customizations, simply click the blue Get Code button:



Click the IFrame tab. The code is ready-made for embedding into the Sitebuilder. Copy the code:



Step 4 - Add the code to the Sitebuilder

Navigate to the space on your page where you want to embed this Facebook feed. Click the + Add a block button.

In the Block gallery, click on HTML Embed block. Choose HTML block:


Note: This is a premium feature and you may need to upgrade your Yola plan to add custom HTML code.

Click on the block to activate the menu and click on a "</>" Custom HTML icon:


Paste the code into the field.

Once you pasted this code, you'll want to center-align the post so it doesn't automatically appear pushed up against the left or right side of your webpage.

To correct this, wrap the code with <center> and </center> tags so the Facebook feed displays in the center of your page.

Add <center> and </center> tags around the entire IFrame snippet to center-align the feed. It should look like this:



Click Submit.

Publish your site to make the changes live.


That's it! Here's what the page should look like when you're done:


Other helpful articles

Installing the Facebook Pixel

Selling on Facebook

Getting help on Facebook Messenger


Was this article helpful?
0 out of 0 found this helpful