embed facebook feed

How to Embed Facebook Feed on Website | Step-by-Step Guide

16 minute read

Founded in 2004, even Zuckerberg wouldn’t have foreseen the evolution he was bringing to the world of the internet, Facebook. With around 3 billion active users, it is a massive social media giant even after 20 years of launch. Marketers have recognized the large pool of opportunities Facebook brings with its large user base. 

They keep finding effective ways to achieve more from everything Facebook has to offer. Having 668.5 million users between the age of 18-34, Facebook has been a hotspot for brands pandering to the people who prefer shopping online. One such way is to embed a Facebook feed on the website. And trust us, the results are undeniably amazing.

Read the blog further to understand “How to embed Facebook feed on website” in detail.

how to embed facebook feed on website

What is Meant By Embedding Facebook Feed?

Embedding a Facebook feed on a website means collecting content from a Facebook account and displaying it on a website. You can fetch content from an individual’s Facebook profile or a brand’s Facebook page. The content you fetch can be text, image, or a video uploaded on the platform. 

Embedding such content on a website makes it more engaging and encourages people to spend more time on it. It does not just increase engagement on the website but on the Facebook account as well.

How to Embed Facebook Feed on Website Using Facebook Page Plugin

Here are the steps to follow the simple and easy to use, Facebook’s very own page plugin:

  • Visit Facebook’s Page Plugin Page.
  • Copy and Paste the URL of the page you wish to embed.
  • Choose the tabs(timeline, upcoming events, or recent posts), width, and height of the output display.
  • You also get options like, “Use Small Header”, “Hide Cover Photo”, “Adjust to plugin container width” and “Show Friend’s Faces”.
  • You can choose among these options and see the plugin preview right below.
  • Click on Get Code.
  • Copy and paste the code on your website; wherever you would like people to see the plugin.
embed facebook page on website

Watch 2 Minute Video Guide On How to Embed Facebook Feed Into Website

how to embed facebook feed on website

Embed Facebook Feed on Website for FREE > Take 14-Day Free Trial!

Short Guide: Embed Facebook Feed on Website in Easy Steps Using Tagbox Facebook Widget

Let’s understand how to embed a Facebook feed on the website.

1. Effortless Onboarding: Sign Up/Login with Your Tagbox Widget Account.

2. Liberate the Power of Facebook: Adding a Facebook Feed to Your Widget.

3. Tailor It to Perfection: Customizing, Moderating, and Personalizing Your Widget.

4. Seamless Integration: Generate the embed code.

How To Embed Facebook Feed On Website Using Tagbox (A Complete Guide)

Here is a detailed explanation of how to embed a Facebook feed on the website.

Step 1. Sign up/Login With Tagbox Widget Account

The Tagbox Website Widget offers you smooth integration options and acts as a catalyst to gain more with your Facebook feed.

The first and foremost step to embed a Facebook feed on a website is to create a FREE account with Tagbox Widget. If you already have one, then log in to your existing account.

login to Tagbox Widget

Step 2. Add Facebook Feed To Your Widget

Once you login into your account, you will land on the dashboard.

1. You will be asked for what purpose you want to use Tagbox; click on “Show Social Feeds on Web Pages”.

show social feeds on web pages

Note: After clicking on “Get Started”, verify your email address from your email inbox and confirm your email.

2. From the “Select source” box that appears, choose Facebook as your source platform.

choose Facebook as a source

3. Choose the connection type as Page, My Profile Posts, Facebook Albums, Page Reviews, Mentions, etc. to embed Facebook feed.

choose connection type
  • Page: Enter the name of the Facebook page from which you want to collect the UGC.
  • My Profile Posts: Connect your Facebook account and collect your posts to display.
  • Albums: Link your Personal Facebook account to display your profile albums.
  • Page Reviews: Link the page from which you want to pool in reviews.
  • Page Mentions: Type in the mention from which you want to gather content. You can also embed Facebook Mention Feeds on website for more user engagement.
choose page to fetch the feeds

Provide the required credentials to connect with your Facebook account and embed Facebook feed on your website.

coonect your Facebook account


Step 3: Customizing, Moderating, and Personalizing The Widget

By connecting to your Facebook account, you will be able to automatically fetch the feed to your widget editor page.

Here you can edit your feed and give it a captivating and compelling look to attract the targeted audience and hold their attention for a while.

moderate the feed

Tagbox provides you with ample features to customize and moderate your feed to help you design your feed in the desired way. 

Some of the feature settings are-

  • Themes – You can choose from various theme options such as Classic card, Horizontal column, Gallery theme, Horizontal slider, Single post theme, and much more. It will help you change the entire display of your widget.
multiple themes
  • Banners– Design your own banner or upload a banner image for your Facebook feed gallery.
  • Layouts– Choose the number of posts to display, grid size, post spacing, post width, etc.
  • Backgrounds– You can either choose to have a transparent background or can add a new background to your widget. 
customization
  • Card Style– Under this option, you can choose what you want to display along with your post, i.e. time, CTA, author information, content, social actions, and much more. 
  • Custom CSS– Create custom posts to highlight the specific content/feed from Facebook and personalize your gallery’s look.
  • Moderate– Filter out the irrelevant content that does not align with your brand’s objectives to avoid the display of any inappropriate content on your widget. 
make posts public or private
  • Analytics– View how your widget is performing and track your performance graph by gaining insights into user engagement, impressions, click-through rates, etc.

Step 4: Generate The Facebook Feed Embed Code

To add Facebook posts to your website, you will first need to get an embed code from the Tagbox Widget Editor. Steps for obtaining an embed code for the widget are the same for all the website building platforms.

The steps to generate Code are as follows-

  1. Click on the “Publish” button on the bottom left side of the widget editor.
click on publish
  1. After clicking on “Publish”, click on “Embed On Webpage”.
embed on webpage
  1. Choose one from Auto and Fixed to Set the width and height as per your website’s requirements and click on “Get Code”.
  2. Next, select the CMS (website building platform) as per your requirements.
Facebook feed embed code

5. Copy the generated embed code.

Great! You have successfully generated the embed code from the Tagbox Facebook Widget. Now, you just need to go to the webpage’s backend and paste the embed code into the section where you want to integrate Facebook posts on your website.

Embed Facebook Feed On Different Website Building Platforms

We are here to guide you on how to embed a Facebook widget on these website’s building platforms by following a few simple steps. It is really as easy as taking a cakewalk.

Follow the below steps to display Facebook content on your suitable website platform.

1. Embed Facebook Feed on on Website HTML

Hypertext Markup Language (HTML) is the standard markup language for building web pages and web applications with CSS and Javascript. Follow these really simple steps to include Facebook page feeds into the website:

  • Select HTML as your website to add the Facebook page feed.
  • Generate the Code from Tagbox Widget just like you did in the above example.
  • Once the embed code is generated, copy it on the clipboard.
  • Now open the webpage backend where you want to display the Facebook social hub
  • Now paste the copied Code on your website page.

Following these simple steps, you can easily add a Facebook widget on HTML website.

2. Embed Facebook Feed In WordPress Website

WordPress is open-source software that is both easy and priceless. It provides everyone with an opportunity to create and share. It stores your content and allows you to create and publish web pages, requiring only a website’s domain and a hosting site to work.

A.) Add Facebook Post On WordPress 5.0

Recently, WordPress updated itself to a newer version, WordPress 5.0.

In order to embed Facebook feeds on WordPress website, follow these simple steps given below –

  1. Select WordPress.
  2. Generate the Website Embed Code from Tagbox just like you did in the above example. Once the Code is generated, copy it on the clipboard.
  3. Open the page in your WordPress backend where you want to embed Facebook feed.
  4. Select “(+)Add Block” in the top left corner of the WordPress Editor.
  5. Here, click on Formatting and then choose Custom HTML.
  6. Paste the copied code in the editor.
  7. Click on Publish/Update post, and you’re good to go.

B.) Add Facebook Feed On WordPress Classic Editor

If you are still using the older version of WordPress, the steps to be followed are slightly different. But no worries, here they are-

  1. Select WordPress.
  2. Generate the Website Embed Code from Tagbox like you did in the above example. Once the Code is generated, copy it on the clipboard.
  3. Open the page in your WordPress backend where you want to embed the Facebook post.
  4. On the right-hand side, you will find a Visual and a Text option.
  5. Choose Text Mode.
  6. Paste the generated Code where you want to show your Facebook live feed widget.
  7. After embedding the Code, click on Update/Publish to save the changes.

See, wasn’t it simple? Let’s see how to embed Facebook feeds on other website CMS platforms.

3. Embed Facebook Feed Using WordPress Plugin

An easy-to-use tool for all WordPress Website users, plugins streamline their work of enhancing the website and allow them with smooth integrating options.

One such plugin is “Tagbox Widget WordPress Plugin”. This plugin allows users to embed infinite posts on the website without technical coding. 

It allows the users to customize their feed and moderate it as per their needs. Also, the analytics feature helps you track your performance and gain valuable insights into click rates, user engagement with the brand. 

The smooth interface and customer support provided by the plugin make it the perfect choice as a social media aggregator tool for the WordPress website.

4. Embed Facebook Feed on Wix Website

Wix is a growing cloud-based development platform with over a million users worldwide. It is the best platform to promote your business, showcase art or set up an online shop, or test new ideas.  In order to embed Facebook posts into the Wix website, follow these few simple steps, and you’re done.

  • Select WIX.
  • Generate the Website Embed Code from the Tagbox Widget just like you did in the above example. Once the Code is generated, copy it on the clipboard.
  • Now open your WIX Editor and navigate to the page where you want to embed Facebook feed gallery.
  • Click on the “+Add” button.
  • Click on More and then Select HTML iframe from the Embeds.
  • Now paste the HTML code generated from Tagbox in the code field.
  • Click on Apply to save the changes.

Bravo! You have successfully embedded the Facebook feeds hub into your WIX website.

5. Embed Facebook Post on Squarespace Website

Squarespace is a SAAS based website building and developing a platform that allows you to add any external code on a webpage by using the Embed Blocks. It provides its users with features like beautiful design templates, 3rd party apps, and integration, CSS access and customization, etc.
In order to embed Facebook feed on your Squarespace website, just follow these simple steps –

  • Select Squarespace.
  • Generate the Website Embed Code from Tagbox just like you did in the above example. Once the Code is generated, copy it on the clipboard.
  • On Squarespace, navigate to the page where you want to embed the Facebook social hub.
  • Click on “+ Add/Edit Block“.
  • Select Code from the menu.
  • Click on the icon in the URL field.
  • Save the page to apply the changes.

The embedded Facebook feeds will be displayed on your website.

6. Embed Facebook Page Feed on Weebly Website

Weebly is a CMS and e-commerce service, currently serving businesses on more than 50 million sites around the world.  In order to embed Facebook page post on a Weebly website, follow these simple steps, and you can see your Facebook Social Hub being displayed on your website.

  • Select Weebly to add a Facebook post on website.
  • Generate the Code from Tagbox just like you did in the above example. Once the code is generated, copy it on the clipboard.
  • On Weebly, navigate to the page where you want to embed the Facebook Social Hub.
  • On the Navigation bar on the left, click on “Embed Code” and drop it on the position where you want to display the feeds.
  • Now click on HTML box and Edit Custom HTML option.
  • Here, paste the copied Code in the box.
  • Publish your changes to successfully embed Facebook feeds on website.

7. Show Facebook Post on Shopify Website

Shopify is a major e-commerce site builder that allows merchants to design, develop, market, and sell any type of goods to customers around the world. Shopify enables you to integrate more than 70 payment gateways with checkouts in more than 50 languages, which makes it easy to sell products to customers anywhere in the world.
To embed Facebook feeds on Shopify Website, you need to follow these steps, and you’re done.

  • Select Shopify.
  • Generate the Facebook feed embed code from Tagbox just like you did in the above example. Once the Code is generated, copy it on the clipboard. 
  • Log in to your Shopify store.
  • Navigate to Online Stores and then to the Themes Menu in the sidebar.
  • Go to Edit HTML/CSS option on the top right of the page.
  • Select Layout/ Templates/Section (E.g. For Homepage – Index. liquid) where you want to display your Facebook Social Hub.
  • Paste the copied Code.
  • Click on Save.

And with this, your Facebook feed will be embedded on your Shopify website.

  • You also get options like, “Use Small Header”, “Hide Cover Photo”, “Adjust to plugin container width” and “Show Friend’s Faces”.
  • You can choose among these options and see the plugin preview right below.
  • Click on Get Code.
  • Copy and paste the code on your website, wherever you would like people to see the plugin.

Facebook Feed On Website Examples

1. HUBNER Group

HUBNER is a group that works on mobility solutions that improve travel comfort in public transport, material solutions in the industry, and a supplier for laser, high-frequency technology applications.

facebook feed on website example

HUBNER group joined hands with Tagbox Widget to embed Facebook feeds on its website which in turn enhanced the user engagement and increased awareness about their services to a wider audience.

2. DEIF Group

A global market leader that provides green, safe, and reliable control solutions for decentralized power production both at land and sea to increase global energy efficiency.

how to add facebook feed to website

With Tagbox, the DEIF group integrated a Facebook feed on its website and displayed a well-customized and moderated feed to capture the attention of more visitors and showcase trustworthy services with social proof.

Let’s start engaging your website visitors

Easily Add Facebook Feed on Website

Benefits Of Adding Facebook Feed Into Website

Considering embedding a Facebook feed into a website? Good decision! Let us give you a proof about it through its benefits.

1. Boost Engagement & Social Proof

A live Facebook shows user-generated content such as images, videos, and posts directly on your website. This results in visitors seeing real engagements with your brand and hence garner trust. Positive social proof extracted from happy customers can entice visitors to interact with your brand; thus, keeping them on your site for longer and possibly closing a sale.

2. Expand Brand Reach & Visibility

Having a Facebook feed, therefore, means that you are bringing your social media persona to your website. This makes it possible for people who are not your Facebook followers to see your brand as well as the recent updates. The live feed can help them spot you and inspire them to follow you on social networks, thus increasing your overall Internet presence.

3. Effortless Content Curation

Maintaining a website full of updated content can be a challenge. However, when you embed your Facebook feed, it will constantly update your most recent posts, making your website more dynamic and interesting for viewers. It eliminates the pressure of constantly providing content and guarantees visitors have something new to check out.

4. Enhance Brand Storytelling & Community Building 

Facebook and other social media sites are ideal to share the brand story. Integrating your Facebook feed lets you put this dynamic element of storytelling and community presence on your website. Engaging fans by sharing cool content with them, responding to comments, or running contests and polls will give you a loyal audience of people interested in your brand.

5. Drive Traffic Between Platforms

Having a Facebook feed on your site can be another way to connect the website to Facebook. Captivating images and interesting content inside the feed will make users want to tap through and check your profile. This means that the product will be advertised bidirectionally and that you will establish a strong online presence on multiple platforms.

Checkout which is better for your business – Google vs. Facebook Reviews

Are You Ready to Embed Facebook Feed? Try Tagbox Facebook Widget Now!

It is imperative to grab the customers’ attention and generate interest. Although using your Facebook feed in this way provides some advantages, it is equivalent to using a flip phone in a world of smartphones. Tagbox allows you to do more than create a Facebook feed and sit back and wait for results.

Don’t settle for limitations. Tagbox has powerful tools that enable you to use your Facebook content to the fullest. It is the only platform that gives you complete control over presenting your brand story and UGC.

Interested in learning more about Tagbox? Try it for free today and open yourself up to a world of possibilities.

Embed Facebook Feed On Any Website For Free

Build Social Trust, Boost Engagement & Derive Sales

FAQs

To get a Facebook embed code, the first step is to create a Facebook feed with Tagbox Widget. Once your feed is created, click on the “Publish” option on the lower-left corner of the widget editor page. In the pop-up that appears, click on the “Generate Code” button. The Code generated is your Facebook embed code. Copy and paste the Code at the backend of your preferred website.

To embed Facebook feed on HTML, register yourself with Tagbox Widget. After collecting and curating feeds, Publish your widget and select HTML as your website building platform. The next step is to copy the generated embed code to the clipboard. Now simply Paste the respective Code on the backend of your HTML website where you want to display Facebook feeds. Click here to know the detailed steps on how to embed Facebook feeds on HTML website.

To embed Facebook page into Google sites, click on the “Publish” option on the lower-left corner of the widget generator. Select “other” from the pop-up that appears. Click on “Get code” and copy the generated Code. Login to your google site account and select the page where you want to embed Facebook page. Paste the copied Code and click on next. For more detailed steps, Click Here