If you’re active on Facebook, you’ve probably noticed that native Facebook videos play automatically.
But what you might not know is how insanely successful this autoplay switch has been for Facebook. They went from only one billion video views per day in 2014 to over eight billion views per day at the end of 2015. That’s a pretty big increase in engagement, right?
It’s not like Facebook’s user base grew 800% in one year.
Some argue that these view counts are inflated because of how Facebook counts views. And there definitely is some truth to that. But no matter what, you can’t argue with an increase that massive. Autoplaying videos get engagement from users.
To help you harness that power for your site, this post will show you how to embed autoplaying Facebook videos into your WordPress site. Used properly, these videos can accent your WordPress site and boost your engagement. They also have a secondary benefit of cross-promoting your Facebook page on your WordPress website.
How To Embed Autoplaying Facebook Videos in WordPress:
Unfortunately, to make Facebook videos autoplay, you can’t use a simple iframe embed. Instead, you’ll need to add a bit of code to your WordPress theme’s header.php file and then use a <div> embed code that Facebook provides to include these videos in your posts.
Here’s everything you need to do:
- Add the Facebook JavaScript SDK to your WordPress theme’s header.php file.
- Find the direct video URL to your desired Facebook video.
- Generate and add the <div> embed code to your WordPress post or page.
- Customize the <div> embed code slightly to make the video autoplay.
I’ll show you how to do each step…
1. How to Add Facebook JavaScript SDK to WordPress
To get started, you need to find your theme’s header.php. Lots of premium themes offer methods to do this from within the theme options panel, but you can also do it by going to “Appearance” → “Editor” and searching for the header.php file.
Ideally, you should be doing this in a child theme, but if you don’t have a header.php file in your child theme, you can add it to your regular theme. Just remember that you might have to re-add the code when you update your theme.
If you’re adding the code directly into your header.php, you need to find the <body> tag:
Then, you need to go to Facebook’s Embedded Video & Live Video Player page to get the JavaScript SDK code:
Copy and paste this code below the <body> tag in your header.php file. It should look something like this after you’re done:
Make sure you save your changes. That’s all you need to do to add the Facebook JavaScript SDK to WordPress!
2. Find the Direct URL of the Facebook Video to Embed
Next, you need to find the actual URL for the video you want to embed. To do that, find a Facebook post that includes a video. If you’re embedding your own videos, you can just go to your page.
Then, right-click on the video and choose “Show video URL”:
A box should show up containing the exact URL:
Just copy this URL and keep it handy to use in the next step.
3. Generate the Embed Code and Add it to WordPress
Now that you have the video URL, you can go to Facebook’s Embedded Video Player Configurator.
Enter the URL in the box and choose the width you’d like your embedded video to be:
You also need to decide if you want to include the full text from the Facebook post or just the video.
Then, click on the “Get Code” button below the video preview:
A window will pop up with the embed code you need. Because you already added the JavaScript SDK, you can ignore the first code block. Just copy the code in “Step 3” that I highlighted:
You can now add this code into the “Text” tab of your WordPress editor or page builder to embed the video.
BUT, you need to complete one more step to actually make the video autoplay.
4. Making Embedded Facebook Videos Autoplay
To make your embedded video play automatically, you need to add a short bit of code to the embed code Facebook provided. Unfortunately, Facebook doesn’t allow you to add this code directly via their embed tool.
Here’s the bit of code you need to add:
data-autoplay="true"
You need to add this into the <div class="fb-video" part of the code.
So this part:
<div class="fb-video" data-href="https://www.facebook.com/ScoopWhoopNews/videos/560273247503207/" data-width="600" data-show-text="false">
Should become this:
<div class="fb-video" data-href="https://www.facebook.com/ScoopWhoopNews/videos/560273247503207/" data-width="600" data-show-text="false" data-autoplay="true">
See how I added the code at the end before the closing bracket? It’s a little tricky if you’re not familiar with code, but just follow this example and it’ll work out OK.
Once you make that change, your videos should autoplay on WordPress.
Of course, just like with Facebook, your videos will be muted until your visitors click on them.
Embedding Facebook Videos via iframe
If you don’t want your videos to autoplay, an easier way to embed them is via an iframe. With this method, you don’t need to add the Facebook JavaScript SDK to your site. That means you don’t need to edit any code. You just need to insert the iframe embed code directly into your posts or pages like you would with a YouTube video.
To find the embed code, click on the down arrow at the top right of any Facebook video post. Then, choose the “Embed” option:
A window will open with the iframe embed code:
Add this code to the “Text” tab of your WordPress editor to embed a non-autoplaying Facebook video.
Final Thoughts
Like with any strategy, you should not abuse autoplaying videos. Embedding videos strategically is a good way to boost engagement for both your WordPress site and your Facebook page. But if you embed too many autoplaying videos, you’re going to harm the user experience on your site and probably annoy your visitors.
So, moderation is key. Use these videos sparingly and they will be a great addition to your WordPress site.
Let me know if you have any questions about the process. It’s fairly straightforward, but I know that adding the autoplay code to the existing video embed code might be a little confusing for some people. Share your questions with me in the comments!
Like this post? Don’t forget to share it with your friends!
A very useful article indeed. However, I have noticed that autoplay does not work on mobile devices. It seems to work only on the desktop.