Facebook Live videos have become one of the most engaging features on Facebook. Learn how to embed Facebook live videos in WordPress post and pages.
It shouldn’t be of surprise that more and more businesses are focused on producing video content. Facebook like many other platforms such as YouTube and Periscope (Twitter) has simplified the process of creating video content to connect with your audience.
As you gear up to record, save, and publish Facebook live videos, you might also want to embed those videos later in your blogs to tell more stories. Or you could just be looking to embed other’s Facebook live videos in your blog post.
Embedding Facebook live videos in WordPress, however, isn’t as easy as pasting a YouTube video link. The embedding process isn’t easier mostly because it’s still a new product and possibly because Facebook wants users to visit and stay on their platform for a longer period.
Besides, WordPress hasn’t integrated (or whitelisted) oEmbed for Facebook as of now to make it easier to embed Facebook videos.
While Facebook has yet to make the embedding process easier, I will guide you through the options and tools that the platform currently offers for embedding video content.
Follow along to learn how to embed Facebook live videos and other Facebook videos to your WordPress blog.
Table of Contents
- Ways to Embed Facebook Live Videos
- 1. Using Embedded Video Player Tool
- 2. Copying Embed Code from a Video Post
- Facebook Video Code from Embed options menu
- 3. Using Facebook Page Plugin Widget to Display Timeline
- Adding Facebook Video Code Manually
- Facebook Live Videos not appearing?
- Finding Facebook Video Post's URL
- Easy Integration with WordPress in near Future?
Ways to Embed Facebook Live Videos
Facebook currently recommends using their Embedded Video Player Configurator to generate embed code required for your WordPress blog. It also provides embed code snippet along with each video that you can copy and paste into your WordPress editor.
Let’s look at both of these options with step-by-step instructions below.
1. Using Embedded Video Player Tool
Facebook has built a developer tool to help users get embed code snippet required for websites and blogs.
The best part of the developer tool is that it allows you to configure primary settings of your video to generate embed code as per your requirements.
Follow the steps below to generate embed code using the tool.
- Find and copy the URL of Facebook Video that you want to embed.
- To copy the URL of a Facebook video, simply right-click on the video and select “Show Video URL” option.
- You can now copy the Video URL that is selected by default in the video box.
- Head over to Video Player Configurator tool on Facebook developers website and paste the URL.
You can also define the pixel width of the video if you require a fixed size. There’s also a checkbox to include the full post which brings up the description, likes, comments, and shares of the Facebook post in addition to your video.
- Click on Get Code and you now have two ways to embed the code on your blog.
You are presented with two tabs with different embed codes for your Facebook live video.
i. The easiest way is to use the IFrame code and place it in your WordPress editor where you want the video to appear.
You can see the Facebook developer's guide for guidelines on complete settings for the embedded video player.
2. Copying Embed Code from a Video Post
Another easy way if you don’t want much control over how your videos appear is to copy paste simply the embed code available for each post.
The challenge then is to find out where Facebook provides embed code for each video. Facebook hasn’t made this obvious, and it might take you some time getting used to finding the embed code.
Facebook videos previously had Options menu just below their videos making it easy to grab the embed code. This option is now hidden behind a tiny icon.
- Click on the drop down icon that appears in the top right corner when you are playing a video.
- Select Embed option and you will see an IFrame code that you need to copy and paste in your WordPress post editor.
- There is also an option to Show Preview just below the embed code and a check box to include the full post.
If you select Advanced Settings, it will take you to the Embedded Video Player Tool that we discussed above.
Selecting advanced settings will have your URL automatically copied in the tool, ready for you to configure other options such as pixel width of the video and the option to include shares, likes, and comments.
3. Using Facebook Page Plugin Widget to Display Timeline
If you want your videos to appear live on your website or blog without having to add different embed code each time, you can use the Facebook page plugin widget that displays everything from your timeline.
Your Facebook live video will appear in the timeline section of the widget that you can add on your website.
Configure Facebook Page Widget
You can configure and generate code for the Facebook page plugin widget on this Facebook for developers page.
Make sure you enter timeline under Tabs settings for your posts including live videos to appear on the website.
Click Get Code at bottom of the configuration box and you can copy and paste the Iframe section of the code to your WordPress widgets.
JetPack Facebook Like Box Widget
If you use JetPack or any other Facebook plugin to display Facebook like box widget, you can simply enable the option for displaying the posts from your page. The widget will display your video when you are live on the Facebook page.
With JetPack Facebook Like Box Widget, you can enable the option for “Show Stream” to display your Facebook page posts including the Live Video (when you are Live).
You can find similar options in other Facebook widgets from different WordPress plugins.
If you are an advanced user or comfortable with code, you have more flexibility with the configurations of live video code.
You can copy the required code when you use the Video Player Configurator to generate code for any video.
You will need to copy the paste the code snippet in your theme's header.php file right after the opening <body> tag.
Adding Facebook Video Code Manually
Simply add the fb-video tag to your post by changing the video URL in the below sample code for my video.
Facebook Live Videos not appearing?
If your videos are not appearing on the page even after you managed to get the code properly on your website, there might be few settings that you want to double check.
- The most common reason for videos to not work on your website is because they are not set to Public.
- If the embedded video's audience settings are changed to other than public, you will see a message saying that the embedded video is no longer available.
Facebook allows only public content to be embedded on other websites. If the video is from a personal profile, make sure it doesn’t have any privacy restrictions.
- Make sure the video you are embedding is not from an age-restricted Facebook page.
Facebook doesn’t allow embedding videos from age-restricted pages, such as pages related to alcohol or adult products.
Finding Facebook Video Post's URL
Finding the video post’s URL might be complex than you think, mainly because the videos play in the same window and open in a dark overlay without any changes to the address bar URL.
I suggested one way of copying URL of the video in the first method above, but here are more ways to locate the URL.
- Click on publish time of the video on the timeline and copy the URL from address bar.
You can also right-click to copy the link without having to open it.
The other method is to right-click on the video itself and select “Show Video Url”. Copy the link shown in the box.
For Facebook live videos, wait until you have saved and published them on your timeline to find and copy the URL for embedding purposes.
The above screenshots for Facebook Live videos are from my personal Facebook profile. You can visit this post on my personal blog to see how the embedded Facebook live videos might look on your blog.
Easy Integration with WordPress in near Future?
Facebook Live video is relatively a new feature and the overall video platform is constantly evolving.
As the platform continues to enhance its video features, I am sure it will make the embedding process more accessible.
Facebook, in fact, mentions that it is already working to make the videos integration process easy with WordPress.
There should be few third party plugins available in the WordPress repository already that make it possible to embed Facebook live videos. We should soon expect an official plugin from Facebook or an oEmbed support from WordPress to make the embed process as easy as YouTube videos.
How do you embed Facebook live videos in your blog posts? What do you think of the process? Let me know if you have any suggestions or if you found the tutorial helpful to you.