While YouTube seems to remain the default means of sharing video, one can easily share Facebook videos in the same manner. With Facebook's embedded video player you can easily add Facebook videos to your website - in WordPress or otherwise. You can use any public video post by a page or a person as the video source. This post will show you how to include (allowed) Facebook videos to your WordPress post or page with WordPress shortcode. We'll also include functions to be used outside of WordPress.
While Facebook provides a cut-and-paste iframe approach to embedding videos, it's rather pedestrian in nature. It also doesn't scale video with the same precision as the (default) SDK-dependent version. As such, we'll ignore it.
The Facebook Video URL
The Facebook video URL is generally written in two ways:
These are the URL formats that we'll accommodate in our shortcode function. In reality, there's any number of URL formats that might be used. Because we're using PHP's
parse_url() function, and because we identify a video primarily by way of its query string (
v=), our approach tends to satisfy most combinations. If a 'pretty' URL is provided, we assume that the video id is the last string of digits provided in the string.
The shortcode of
[fbvideo v="https://www.facebook.com/video.php?v=10153109099568640"] will render the following video into your WP post.
One advantage of rendering a Facebook video rather than its YouTube brethren is that Facebook will render the description as an option under the video, thus increasing conversion on likes and other interactions. So, in the next example we will use the more common 'pretty' video format, and we'll render the accompanying description. The shortcode of
[fbvideo v="https://www.facebook.com/flightorg/videos/10154063210603640/" text="true"] will display the following:
The preferred means of sharing a video is with just the video ID. For example,
As with the video text as demonstrate above, there are a number of options that might be used to change the behaviour of the player.
captions="true") to show captions (if available) by default. Captions are only available on desktop.
Copy and paste the WordPress function into your theme's
functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.
It's a requirement when using this function that you download the FBSDK function. Review its use and download the code here. It's possible that your theme is already rendering the SDK by default (open up your source code and search for "
connect.facebook.net" to confirm).
You may optionally install the WordPress plugin below. You will still have to install the Facebook SDK (also available as a plugin).
- The video address will vary so it's expected that you'll take the necessary precautions in cleaning the video URL before posting it into your post. The best method of embedding a video is by including just the video ID.
- You can generally get the video URL (and ID) by hovering your mouse over the video publication date and reading the URL in your browser footer. Alternatively, when copying the URL of a video that's been shared, hover over the video text for the same result. You may also (right-click) copy-and-paste the text directly into your shortcode (and adjust as necessary).
- While Facebook offers a few features over YouTube (in terms of interaction), it will also degrade your video and audio quality.
- If you're a client it's likely we've already added this feature to your website. If we haven't, get in touch and we'll do it for you.
- Using the embedded video player API you can control the embedded video player as well as observing events fired by the player. For example you may listen to the event when a video is paused or start the video playback using a custom button.
Outside of WordPress, something such as the following will yield the same result as shortcode usage. As with the shortcode function, the Facebook SDK is required.