So, you want to embed a Facebook feed on your website, blog, or other online destination – but you’re not sure of the best method? Not to worry, we’ll take you from unsure to embedded in no time at all.
But first, did you know? As of December 2021, Facebook reports 1.9 billion daily active users and 2.89 billion monthly active users. To put it in context, that’s nearly 37% of the world’s total population.
That’s mind-boggling. It’s also a great reason to link your Facebook page with other front-facing media, including your website. From post likes and photo shares, to Page likes and one-on-one messaging, Facebook can serve as an important marketing and engagement tool.
Screenshot via Facebook.com
And so, now you’re wondering how to embed your Facebook Page feed on your site, so you can introduce visitors to your social side and invite engagement, without ever directing them off your site.
We have two [simple] methods to get you from here to there. No serious tech skills required! (We promise not to deploy the acronym API, not even once.)
Here’s what’s covered in this article:
Method 1: Use the Facebook Page Plugin
Method 2: Use the ShareThis Social Feed Plugin for WordPress, Shopify & More
How to Embed Facebook Events to Your Website
How to Embed a Facebook Live Stream to Your Website
Method 1: Use the Facebook Page Plugin
Facebook offers several built-in customizations to display your Page feed.
Facebook offers its own Page Plugin that allows you to embed your Facebook feed on your website with a few customization options. It’s fairly simple to implement:
- Visit the Page Plugin page;
- Copy/paste in your desired Facebook Page URL (tip: it’s likely already there, if you’re viewing from a linked profile account);
- Select your preferences, for example Tabs, Width, and Height of the output display;
- Check the boxes for any of the following options you want: ‘Use Small Header,’ ‘Hide Cover Photo,’ ‘Adapt to plugin container width,’ and ‘Show Friends’ Faces.’ (And make sure the boxes are unchecked for options you don’t want.);
- Click Get Code. You’ll have the choice of using JavaScript or iFrame;
- Copy and paste the code into a blog post, your sidebar, or anywhere else on your website.
And… done? Well, not quite.
If you look back up to Step 3, let’s talk about those preferences for a moment. Facebook gives you quite a bit of play with how your embedded feed displays: For example, you can display your timeline with one code and showcase upcoming events or enable Facebook Messages with another. Comma-separate those bad boys, and you can have both.
You could hide your cover photo or display it proudly. You can show your website visitors if they have friend who like your page and/or flash your custom CTA. You can change the display language and even enable adaptive width displays, to appeal to any kind of website visitor. There are quite a few options available, so do have a look around before you click Get Code.
When to use method 1: If you need simple page feed display on your website, don’t want to fuss around, and are happy with the three basic options (display your timeline, comments, and message capabilities), then go for this free, Facebook-backed option.
Method 2: Use ShareThis Social Feed Plugin for WordPress, Shopify & More
While Facebook native code offers quite a few options, it does have limited functionality. So, what’s a social site to do, if the Facebook Page Plugin doesn’t adapt to their needs?
Enter the world of third-party plugins, which allow greater customization and are even simpler to use. With the ShareThis Social Feed, you can embed not only your Facebook Page feed but also stream posts from multiple social media networks right on your blog or website. And of course, if you only want to include your Facebook posts in your feed, that’s do-able, too.
It’s simple to set up:
- Connect your Facebook account;
- Customize the design of your feed to match your brand;
- Insert your unique ShareThis code into your website’s header section;
- Copy the placement code and paste it wherever you want the feed to appear on your site.
It’s that simple! Plus, the ShareThis Social Feed is free to use (although there are paid plans available if you want to display a larger number of posts in your feed or want to include posts from multiple social media networks). There are lots of customization options, such as automatic image cropping, flexible layouts (choose from square grid, collage, or slider layouts), and even hover effects to display image captions and likes when your website visitors hover over a post in your feed.
The ShareThis Social Feed integrates seamlessly with any website platform, so whether you’re using Shopify, WordPress, Squarespace, Wix, Blogger, or another platform, you can have your social feed up and running in minutes.
When to use method 2: If you need more customization than the Facebook plugin (method 1) allows, then you’re going to have to get a little technical. Put in a little bit of work (and maybe some cash), and you’ll be able to create beautiful, embedded Facebook feeds to display anywhere and everywhere.
How to Embed Facebook Events to Your Website
Want to embed your Facebook Event feed on your website? You can use the Facebook Page Plugin to do so in a few simple steps:
- Visit the Page Plugin and, if it’s not already there, copy and paste your Facebook Page URL into the box.
- In the ‘Tabs’ section of the form, ‘timeline’ may already be pre-populated there. If it is, remove it and type ‘events’ into the form field. If the form field is empty, you can simply type ‘events’ into the field.
- Then, click ‘Get Code’ and paste the generated code into your website (using your choice of JavaScript or iFrame) in a blog post, your website’s sidebar, or wherever you want your Facebook Event feed to appear.
How to Embed a Facebook Live Stream to Your Website
Want to get more viewers for your Facebook Live Streams? Great news: you can embed a Facebook Live Stream on your website, too. To embed your Facebook Live video on your website, follow these steps:
- Visit the Facebook Page Plugin – Embedded Video & Live Video Player.
- Copy the URL of the Facebook Live video you want to embed on your site. You can do this by clicking the three-dots icon in the upper-right corner of the Facebook Live video post, and then click ‘Copy link.’ You can also click ‘Share’ in the lower-right area under the Live Stream post and click ‘Copy link’ from there.
- Paste the link to your Facebook Live video into Facebook’s Code Configurator.
- If you want the full post to appear along with your Live Stream video, check the box that says ‘Include full post’ underneath your video’s URL in the Code Configurator.
- Click ‘Get Code’ to generate the embed code for your video.
- Copy and paste the generated code into your website’s HTML where you want the embedded Facebook Live video to appear.
If you want to change the width of your embedded Facebook Live Stream, you can use the data-width attribute to adjust the size to your preferred width.
If you have other Facebook videos you want to embed on your website, you can use this same method – it works for any Facebook videos, not just Facebook Live Streams.
Don’t Embed; Share Too
In addition to embedding your Facebook feed on your website, you should also embed share, follow, and reaction buttons – lower-level engagement that invites interaction and engagement.
The goal here is to invite social shares and/or draw people onto your Facebook page, where they’re more likely to engage – scroll through posts, like what appeals to them, etc. – and then, ultimately, to like your Page and see your Facebook followers increase so more people see your updates from now to eternity.
You can learn more about maximizing your Facebook presence with our series of guides on the subject, including our post on how to pin a post on a Facebook page.
If this sounds like your kind of strategy, then have a gander at our Facebook Share button, Facebook Follow button, and Facebook Reaction buttons (Like, Love, Wow, etc.) – plus other Publisher Tools designed not only for user satisfaction, but to get you the most Page likes, post shares, and other engagement that matters.
When you’re looking for a simple way to embed a Facebook feed on your website, it doesn’t get much simpler than the ShareThis Social Feed. It’s built to look amazing on any screen, and with tons of customization options, you can design it to perfectly match your brand. It integrates seamlessly with any website platform so you can get your feed up and running in minutes and start growing your audience today.
