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:

Screen_Shot_2020-08-31_at_15.11.46.png

 

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.

"timeline,events,messages"

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:

Screen_Shot_2020-08-31_at_15.24.01.png

 

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

Screen_Shot_2020-08-31_at_15.25.49.png

 

Step 4 - Add the code to the Sitebuilder

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

In the Block gallery, scroll down to the Other > HTML area. Click on HTML block. 

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

Screen_Shot_2020-08-31_at_15.29.01.png

Paste the code.

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:

Screen_Shot_2020-08-31_at_15.33.03.png

Screen_Shot_2020-08-31_at_15.32.13.png

Click Submit.

Publish your site to make the changes live.

Screen_Shot_2020-08-31_at_15.36.17.png

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

Screen_Shot_2020-08-31_at_15.49.30.png

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