Did you know that Facebook videos generate more than 8 billion page views every day? And that 8 billion is double that number a year ago? But how do you add a Facebook video to WordPress?
While the credit for this massive success can be attributed to automatic video playback and a favorable view count methodology, the fact remains that Facebook video is a major player in video consumption today.
This tutorial will allow you to use Facebook videos by integrating it into your WordPress articles and pages. I will show you how you can easily embed Facebook videos through the WordPress editor. In addition, I will give you information on how you can change some display details of videos to enable autoplay for example.
And finally, if you don't want to get your hands dirty with the first method, I will also show you the easiest method to embed videos via an iframe.
But before, let's discover together How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.
Then, back to why we are here.
The benefits of Facebook Video Integration
While YouTube is likely to remain the king of video for the future, I see some benefits to integrating Facebook videos. For example, you can ...
- Enjoy Live Streaming - you may have seen the popular new live streaming feature that Facebook recently launched. When you embed videos with this method, you will also be able to embed Facebook live streaming on your WordPress website.
- Cross promotion of your Facebook page - Facebook video integration provides another method to promote your Facebook page on your website. Even if you have already included " Likes Or shares, embedding videos directly from Facebook provides another connection. Of course, if you are trying to promote a YouTube channel, you will need to choose where your priorities are.
- Organize video content from other Facebook pages - if you see a video on Facebook that you want to include in a post or page, embedding is pretty much the only option unless you want to go directly to the Facebook page.
How to integrate "Facebook Video" With the JavaScript SDK
This process of setting up "Facebook video" is quite painless. But, it does not require adding a small snippet of code to your theme or to a plugin that you have designed. This code snippet is necessary because it lets you do nifty things like adding autoplay to your embedded videos.
Here are 10 best WordPress plugins to use to manage advertising
So, to get started, you need to add the Facebook JavaScript SDK to your theme's header. It's basically a fancy name for this piece of code:
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
For those who use WordPress themes without content injection option, you will need to access your theme's header.php file and add right after the tag the following code:
Ideally, you should use a child theme and add this snippet to your child theme header.php rather than the parent.
How to integrate Facebook videos on WordPress? Find out also by clicking on this link
After adding this code once, you are done with it. You can embed videos anywhere you want using standard embed code.
How to integrate Facebook Videos
To generate this second bit of code, you'll need to find the actual URL to the video you want to share, then add this url to this snippet:
You can also change the width of the video in pixels by changing the "data-width" option to a different number.
Also read our tutorial on How to optimize a database with one click on WordPress
There are several ways to get this URL. If you are looking for a video article in your page feed, you can just right click on the timestamp and copy the url:
If you are looking for the link in full screen mode, you can find the URL in the same way:
To give you a real-life example, here's what the embed code would look like after adding the URL. We'll set the video width to 550px:
Just paste this code in the text tab of the WordPress editor to embed the video. You can also add this code to your sidebar or elsewhere that will support this code:
Once you publish the article, you should see the embedded video:
How to enable automatic playback
One of the big advantages of integrating Facebook videos in this way is the ability to enable autoplay "Autoplay" (muted) As well as on Facebook.
See also our article on The best 15 plugins WordPress social sharing
If you want to add autoplay on Facebook videos, you will just need to add an attribute to your embed code.
Here is the attribute you need to add:
data-autoplay = "true"
In the complete embedded code, it will look like this:
<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/"data-allowfullscreen="true" data-width="550" data-autoplay="true"></div>Once you make this change, your videos should play automatically on the page or post in question.
How to integrate Facebook videos with iFrames
If you don't want to rack your brains, Facebook also added the “iframe” integration. This function is pretty much the same as on YouTube. Only you should be aware that you will not be able to activate autoplay on Facebook.
So much to see... 10 WordPress plugins to improve the promotion of your products
So, while it is easier to add videos this way, this method does not offer as many features as the one above.
To find the embed code, you must first click on the little arrow on the top right corner of a video post:
Then select the option " Integration " or " embed "(My facebook is in English).
A new window will open to allow you to copy the code of the player that will offer the video.
Just copy this code and paste it into the text tab of the WordPress editor:
When you publish the video, you should see it in exactly the same way as in the previous example.
Also discover some additional premium WordPress plugins
You can use other plugins to display countdowns on your WordPress blog. In what follows, I propose some of them.
1. Share, Print and PDF Products for WooCommerce
Ce WordPress Plugin will not only help you to offer your visitors the possibility of viewing any PDF made available to them directly on your website, but it will also help them to easily share it.
It provides you with many features such as printing, downloading, zooming, sharing, and much more. This is a WordPress Plugin whose layout is totally responsive, in order to allow any user to access it on their mobile device without too many constraints.
Read also 8 WordPress plugins to display the sharing icons on your blog
It also offers you many customization options to adapt it to your WordPress theme. This will give you the opportunity to change color, to use Retina image quality, etc.
Download | Demo | Web hosting
2. Octaboo
Octabook is a WordPress Plugin very easy to use premium and instant Appointment Booking tool for almost all types of services and service providers who wish to offer online booking from a website.
It offers several features, including: support for multiple localization, configuration of services, dynamic pricing, notifications, etc., support for customizable fields for forms, customization of appearance, support for Google Calendar, an intuitive dashboard, export of data to csv format, and much more.
Download | Demo | Web hosting
3. YouTube Plugin
Prepare your website in the best possible way for streaming YouTube videos. Yottie - his little name - is a powerful WordPress plugin dedicated to the management and integration of YouTube videos on your website or blog.
It allows you to select the desired channels and even unique videos to create your own playlist directly on your blog. It has more than 100 adjustable parameters, 4 color palettes, and supports nearly 16 languages. In short, you will have tons of things to customize.
Discover How to register and optimize images of your WordPress blog
This WordPress video gallery dedicated to YouTube is fully responsive so you can cover a wide audience with any kind of navigation device.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to compress and resize images on WordPress
- 5 WordPress plugins to create custom layouts
- Why freelancers need a daily schedule
- 15 WordPress plugins to create a Booking website
- 5 WordPress plugins to increase your number of subscribers
Conclusion
Here is ! That's it for this tutorial. Hope this overview helps you understand how to embed Facebook video on WordPress. If you have any questions, do not hesitate to ask them.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.
Feel free to share this article with your friends on your favorite social networks. But, in the meantime, tell us about your Comments and suggestions in the dedicated section.
...
