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 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:
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:
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