Blog, Facebook, PHP, WordPress, WordPress Plugins, WordPress Shortcode

Add Facebook Videos To WordPress With Shortcode

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:

https://www.facebook.com/flightorg/videos/10154120412423640/
https://www.facebook.com/video.php?v=10154120412423640

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 Result

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, [fbvideo v="10154063210603640"].

Shortcode Attributes

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.

v is the video URL, or just the video ID. The URL may not always be perfectly formed and you may have to trim unnecessary parameters. Ideally, simply provide just the video ID.

width

The width is the width of the video as it'll appear in your WordPress post or page. The video will center by default. Minimum width is 220px.

text

The text determines if the video description and other means of interacting with the video will display. Use true or false (default).

autoplay

If autoplay is true, the video will automatically start playing when the page loads. The video will be played without sound (muted). People can turn on sound via the video player controls. This setting does not apply to mobile devices. Can be false (default) or true.

captions

Set to true (captions="true") to show captions (if available) by default. Captions are only available on desktop.

fullscreen

Allow the video to be played in fullscreen mode. Can be false (default) or true (fullscreen="true").

WordPress Shortcode

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).

<?php

Add Facebook Videos to Your WordPress Post or Page with Shortcode

http://www.beliefmedia.com/facebook-videos

function beliefmedia_facebook_video($atts) {

extract(shortcode_atts(array(

'v' => '',

'width' => '560',

'height' => '',

'text' => 'false',

'autoplay' => 'false',

'captions' => 'false',

'fullscreen' => 'false',

), $atts));

if (strpos($v,'http') !== false) {

if (strpos($v,'v=') !== false) {

parse_str(parse_url($v , PHP_URL_QUERY), $params);

$vid = @$params['v'];

} else {

$v = rtrim($v, '/');

$vid = substr($v, strrpos($v, '/') + 1);

}

} else {

$vid = trim($v);

}

$return = '<div style="max-width: ' . $width . 'px; margin: auto; display: block;">';

$return .= '<div class="fb-video" data-href="https://www.facebook.com/video.php?v=' . $vid . '" data-width="' . $width . '" data-show-text="' . $text . '" data-allowfullscreen="' . $fullscreen . '" data-autoplay="' . $autoplay . '" data-show-captions="' . $captions . '"></div>';

$return .= '</p></div>';

return $return;

}

add_shortcode('fbvideo', 'beliefmedia_facebook_video');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

You may optionally install the WordPress plugin below. You will still have to install the Facebook SDK (also available as a plugin).

Considerations

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.

PHP Function

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.

<?php

Add Facebook Videos To WordPress With Shortcode

http://www.beliefmedia.com/facebook-videos

function beliefmedia_facebook_video($v, $options = '') {

/* Default Options & Merge User Options */

$options = array ($options);

$defaults = array('width' => '560', 'text' => 'false', 'autoplay' => 'false', 'captions' => 'false', 'fullscreen' => 'true');

$opts = array_merge($defaults,$options);

if (strpos($v,'http') !== false) {

if (strpos($v,'v=') !== false) {

parse_str(parse_url($v , PHP_URL_QUERY), $params);

$vid = @$params['v'];

} else {

$v = rtrim($v, '/');

$vid = substr($v, strrpos($v, '/') + 1);

}

} else {

$vid = trim($v);

}

$return = '<div style="max-width: ' . $opts['width'] . 'px; margin: auto; display: block;">';

$return .= '<div class="fb-video" data-href="https://www.facebook.com/video.php?v=' . $vid . '" data-allowfullscreen="' . $opts['fullscreen'] . '" data-width="' . $opts['width'] . '" data-show-text="' . $opts['text'] . '" data-autoplay="' . $opts['autoplay'] . '" data-show-captions="' . $opts['captions'] . '"></div>';

$return .= '</p></div>';

return $return;

}

/* Usage */

$options = array('width' => '520', 'text' => 'false', 'autoplay' => 'false', 'captions' => 'false', 'fullscreen' => 'true');

echo beliefmedia_facebook_video($v = '10154120412423640', $options);

Download

Title: Add Facebook Videos To WordPress With Shortcode (WP Plugin)
Description: Add Facebook videos to your WP post or page with shortcode. Requires FBSDK.
Download • Version 0.2, 1.6K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (924.0B)

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.