Embed Facebook videos on your website in 5 quick steps

embed Facebook videos

Is your website still not giving the most relevant information to your visitors? No, I’m not talking about your product details or brand story—I’m talking about showcasing the experiences of your previous customers and providing social proof.

In this era of e-commerce, new businesses are popping up almost every day. And if your website still offers just product and company portfolios, you’re missing out on conversions. Here’s a tip: Design your website with a customer-first approach.

Add the boss factor—trust-building content.

Embedding Facebook videos into your website attaches real faces with real voices advocating your brand to potential visitors. Fortunately, for the impact it creates, the process is as easy as a walk in the park. In this blog, you’ll learn the step-by-step process of embedding Facebook videos, why it’s beneficial, the types of videos you should consider, and how adding Facebook videos can enhance user engagement and boost social media interaction.

Let's start by understanding Facebook Videos first

Facebook videos serve various purposes, from conveying messages and showcasing products to providing entertainment and driving engagement. Whether you’re an individual, a business, or an organization, Facebook videos offer a versatile way to connect with your audience.

These videos can be uploaded in several formats, including MP4, AVI, and MOV, and can be as long as 240 minutes. Additionally, Facebook supports live streaming, allowing users to broadcast real-time video to their followers, creating an interactive and immediate connection. Facebook videos can also be monetized through ads, providing an additional revenue stream, and can be used to drive traffic to websites, increasing overall engagement on the platform.

Facebook Videos-Basic

Facebook being one of the most popular social media platforms, hosts over 2 billion daily users with a 5.5% increase year-over-year and videos are one of its most widely used features. Facebook video options include Reels (short videos) and stories, long-form videos, and live streaming.

Facebook reel video experiences have become more immersive. Like Instagram, when viewers tap on a Facebook video anywhere, they’ll see a vertically oriented, full-screen video player. Also, the algorithm adapts in real-time recommending the most relevant videos based on viewer interests, regardless of whether it’s a Reel or other video.

Businesses on Facebook can use Facebook videos for sharing:

  • Reviews and testimonials

  • Product launches and insights

  • Behind-the-scene videos

  • User-generated content

  • Hashtag campaigns

Posting brand videos on Facebook helps you reach a wider audience and creates brand awareness in the platform’s audience. When you embed Facebook videos on your website, it creates a dynamic, and meaningful experience (because of the brand-related content) for your potential buyers.

Types of Facebook Videos used by Brands

Five types of Facebook videos to embed on your website include:

To enhance user engagement and promote visibility, it is essential to embed videos directly into your WordPress pages, sidebars, and footers. This can be easily done using the embedding options available within the WordPress interface.

1. Reels

Facebook Reels are short-form videos up to 90 seconds long. These videos can include music, effects, and transitions, making them fun and highly shareable.

This Facebook video type is most likely to get more views and engagement. Businesses looking to gain more following and attention must make reel content including:

When you embed Facebook reels on your website, it helps showcase your brand’s personality and creativity. Embedding videos, especially Facebook Reels, can significantly enhance community engagement and promote social media interaction.

2. Stories

Facebook Stories are vertical, short-lived videos that disappear after 24 hours. They are meant to be more informal, providing a snapshot of real-time events, or brand updates.

Stories are perfect for promoting time-sensitive content like flash sales, announcements, or live updates.

Businesses can also use Facebook Stories for interactive engagement (like polls or Q&A), giving customers a more personalized experience and motivating them to take action quickly.

Embedding Facebook Stories on your website creates an interactive and up-to-date user experience.

When you embed Facebook videos using Flockler, it auto-updates content on the embedded wall every 5-to-15 minutes. It helps you keep your website visitors up-to-date effortlessly, without manual watch and effort.

This helps with your time-sensitive deals and sales, as more and more people get informed as quickly as possible increasing your conversion probability.

3. Long-Form Videos

Long-form videos on Facebook are videos that exceed 90 seconds. These videos allow for deeper storytelling or in-depth product explanations.

Businesses can use long-form Facebook videos to share:

  • In-depth product reviews

  • Interviews with experts or influencers

  • Social proofs

  • Brand documentaries

Embedding long Facebook videos to your website helps customers gain a full understanding of what you offer.

They are best for trust-building as these videos offer more detailed insights into your brand or product journey, making an emotional connection. Using an embedded video player ensures optimal functionality and layout adjustments for both mobile and desktop users.

4. Live Streaming

Facebook Live allows users to broadcast videos in real-time to their followers. During live sessions, viewers can interact by commenting or reacting, creating an interactive and dynamic experience.

Marketers can use live Facebook streaming for showcasing the following:

  • Live Q&A sessions

  • Product launches

  • Behind-the-scenes

Facebook embed live video creates an authentic experience for your website visitors as live content feels more transparent.

When you embed Facebook videos where people interact with your brand directly, it showcases your brand community. It builds trust and credibility among your potential customers.

5. Facebook Video Ads

Facebook Video Ads are paid advertisements in the form of video content. These ads can appear in users’ feeds, Stories, or sidebars and are designed to capture attention.

Although Facebook gets less engagement than Instagram, it is a leader in targeted advertising.

Embedding Facebook Video Ads on your website allows you to reuse high-converting, targeted content in your marketing strategy.

Why should you embed Facebook videos

During a 2024 Statista survey among marketers worldwide, around 86 percent reported using Facebook for marketing purposes. It highlights how dominant Facebook remains as a marketing platform, even in 2024. When you have an established business Facebook profile, there is no reason why you should not be integrating Facebook videos on websites to engage visitors.

1. Videos are a very powerful type of content. They create an emotional connection with viewers. Viewers retain more about your brand by watching videos. Businesses must embed Facebook Videos into their website. Facebook videos come with different engaging formats and active communities using interactive features such as likes, shares, and comments.

2. When you embed Facebook videos it not only brings dynamic content to your website but also brings the community that is speaking about your brand and trusts your brand to your product page.

3. Your website visitors need this content, as they want to learn more about your product and brand. You can embed Facebook videos with social proof and testimonials to establish the credibility of your product for your potential buyers.

4. When you embed Facebook videos on your website, it will direct your website visitors to your Facebook page. This cross-promotion encourages visitors to follow your Facebook page, driving more traffic and interaction on social media.

5. Embedding Facebook videos also increases your website SEO as users are spending more time engaging with your integrated videos.

Preparing Your Facebook Video

Collect Your Facebook Video

To collect your Facebook video, follow these simple steps:

  1. Navigate to your Facebook page or profile and click on the “Videos” tab.

  2. Select the video you want to collect and click on the three dots at the top right corner of the video.

  3. Click on “Edit Video” and then select “Get Video Link”.

  4. Copy the video link and paste it into a document or note-taking app for easy access.

Alternatively, you can use third-party tools or plugins designed to help you collect and embed Facebook videos on your website or blog. These tools streamline the process, making it easier to add Facebook videos to your web pages and enhance your content with engaging multimedia.

How to embed Facebook videos on website 

To embed Facebook videos on websites manually follow these steps:

Step 1: Open Facebook and log in to your account

Step 2: Select the Facebook video (reel, stories, or long-form) you want to embed. You can use any public video post by any Page or person. For embedding on an HTML website, follow the steps below.

Step 3: Click on the top right corner of the post and select Embed.

Step 4: Copy the code. Now in this step, Facebook allows you to include a full post option and advanced settings.

In advanced settings, you can enter the desired pixel width of the video.

Step 5: Paste the code on your website CMS to embed video Facebook post.

You may need to edit the code you received from Facebook to make it responsive to mobile devices. Follow these steps: Step 1: Get the iframe code Facebook advanced settings.

Step 2: Delete the width and height tags. The fixed dimensions will not resize dynamically based on the size of the device screen.

Step 3: Add the highlighted settings to the style section (after hidden) of the < iframe> tag.

Step 4: Add the highlighted < div> tag at the start of the iFrame code.

Step 5: Close the div tag by adding the highlighted section after the < /iframe>.

This makes the Facebook video embed responsive to t fit various screen sizes while maintaining the 16:9 aspect ratio.

Load the JavaScript SDK

To load the JavaScript SDK, which is essential for embedding Facebook videos, add the following code to your website or blog: <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="YOUR_NONCE"></script> Replace “YOUR_NONCE” with a unique string to prevent cross-site scripting (XSS) attacks. This step ensures that your Facebook video embed code will function correctly, allowing you to display Facebook videos seamlessly on your web page.

By following these steps, you can effectively prepare and embed Facebook videos on your website, enhancing your content and engaging your audience with dynamic multimedia.

Why manually embedding Facebook Video is not the best option?

There are certain drawbacks to embedding Facebook videos manually:

  • The process is time-consuming as you can only add and make responsive a single post at a time.

  • Except for the pixel width adjustments you do not get much customization.

  • Marketers may experience incompatibility issues with custom-built websites or certain CMS platforms.

  • Marketers do not get robust analytics and have to Facebook video wall manually.

However, with Flockler, marketers can:

  • Embed multiple posts from multiple accounts at once

  • Customize layouts, theme, show or hide elements, adjust colors, and even add custom CSS

  • Embed Facebook video walls that are easy and fast loading

  • Embed Facebook videos into each major content management system including- WordPress, Shopify, Wix, Squarespace, Webflow, Drupal, TYPO3, Joomla, and Weebly.

  • Select the automated feed option, to auto-update the embedded Facebook video wall every 5-15 minutes.

How to embed Facebook videos on website with Flockler

With Flockler, marketers can embed Instagram videos on websites and other digital services with zero tech skill in less than 120 seconds. Here is a step-by-step guide to embed video Facebook post to your website with Flocker

Step 1: Sign up to your Flocker account.

Sign in for a free trial with Flockler, and select Facebook as your source.

Step 2: Add the Facebook public page

Add the public Facebook page you want to collect video posts from.

Select the number of posts you want to embed.

You can select all posts or via keywords.

Add the selected video posts to the new/existing section.

Step 3: Moderate your posts

Once the posts are collected, Flockler will ask you to moderate or display posts automatically.

With moderation, you’ll be in complete control of receiving each selected Facebook video post.

Even in automatic mode, you can hide unwanted or inappropriate content from your Instagram wall anytime by clicking the ‘Hide’ icon on the right.

Step 4: Edit/Remove the posts from the section

You can edit and remove the posts from the section.

With edit, you can add the following sections:

Step 5: Design the Facebook wall

The next step is to design your Facebook video wall outlook. Flockler offers four layout options: wall, grid, carousel, and slideshow.

Select a layout and customize it by clicking 'Edit style & settings' (on the left side).
Under Edit settings, you can show or hide elements, adjust colors, and even add custom CSS, with free developer support available if needed.

Step 6: Embed Instagram video wall anywhere

Finally, embed the Instagram video wall by simply copying and pasting the provided embed code into your website’s HTML.

How to embed Facebook videos to WordPress

The whole process remains the same, except for the last step. Embedding Facebook videos on a WordPress site is straightforward and enhances the visual appeal of your content.

In the last step, click on Add to WordPress.
Copy the shortcode and add it to your WordPress page.

How to embed Facebook videos in Shopify

Once you are done with selecting and designing the Facebook wall, the last step is to add the Flockler embed code to your Shopify store.

Embedding facebook video feeds can help maintain engagement on your website, even during Facebook downtimes. Using plugins to embed these video feeds directly into your site allows visitors to access video content seamlessly, enhancing user experience and brand perception.

Here are the steps:

Add a Facebook feed to your Shopify homepage

To embed a Flockler feed on Shopify’s homepage, you need to edit the theme layout. Go to Themes, click Actions, and select Edit code.

Go to Sections and click Add a new section.

Adding a section to ShopifyGive it a name (e.g., flockler), and an editor opens up.

In the editor, replace the "Section name" with "flockler". Also, replace everything after {% endschema %} with Flockler’s embed code that you can find from Flockler’s Display tab.

Editing a section for ShopifySave changes.

Next, scroll up the list to Templates, and click index.json.

Note: Old themes don't have index.json and the same information is located in settings_data.json under Config.

Editing Shopify’s homepageAn editor opens and you need to add the following snippet inside the sections at the top:

"flockler": {

"type": "flockler"

},

After adding that, then you should see this:

Before saving changes to the template, scroll down the code editor, and you’ll find the order of homepage elements.

Choose the right spot for Flockler and add it to the list. New themes use a field named order while older ones have content_for_index.

Here’s an example of how it would be placed as the last item on the page:
Note: Make sure that each item ends with a comma except the last one.

Finally, save changes, and the preview of your template shows your Flockler on the Shopify homepage.

Flockler on the Shopify page

Add a Facebook video feed to all products and collection pages

Only now, edit either collection.json or product.json to define the layouts of your Shopify product pages or collections.

Add a Facebook video feed to any individual Shopify Page

Sometimes you’d like to add a Facebook video feed to an individual page. For example, you might want to have a unique feed visible on a product page.

One option is to embed Flockler directly into the page content. From the text editor, click the Show HTML button.

Shopify content editor viewThen add Flockler anywhere in the text.

Adding Flockler to the Shopify content editorThat’s all! You can use any of the options to display an engaging Facebook video feed on your Shopify store.

FAQs

Can you embed a video on Facebook?

Yes, you can embed a video on Facebook easily either with the manual method or Flockler. To embed Facebook videos, click on the three vertical dots on the post and copy the embed code. With Flockler, you can do the same with more customization, UGC rights management, auto-updating feed features, and analytics.

How to make an embedded Facebook video responsive?

To make an embedded Facebook video responsive, wrap the iframe code in a div with a CSS class that applies a 100% width and height with relative positioning. Then, set the iframe to have absolute positioning and dimensions of 100% to ensure it adjusts with the parent container.

How do I enable embedding on Facebook?

To enable embedding on Facebook, select the public post and click on the three vertical dots located in the top right corner of the post. From the drop-down menu select "Embed," then copy the provided code. At last, you need to paste the code into your website’s HTML to embed the post.

What is the responsive width of Facebook embed?

The responsive width of a Facebook embed is typically set to 100% of the container's width. The process of setting it is already shown in this blog. This allows the embedded content, such as a video or post, to automatically resize and fit any screen size, from desktops to mobile phones.

With Flockler, you can gather and display social media feeds from your favourite channels. See the full list of supported content types and sources

Flockler helps marketers like you to create social media feeds and display user-generated content on any digital service. Keep your audience engaged and drive sales.

Book a demo Start your 14-Day Free Trial