How to: integrate Facebook videos on your WordPress blog

Update: This is an old post. If you’d like to embed Facebook videos on your site, I’d suggest using a plugin like Jetpack and its Shortcodes module.

Facebook is getting more and more popular everywhere on the net. Thanks to the Like button and other Facebook plugins, we can now interact and share content directly from all kinds of websites to Facebook. But what about embedding videos from Facebook to your website?
We have discussed about the integration of the Open Graph and Facebook connect earlier on this blog, but today I would like to show you how to embed a Facebook video, without having to copy and paste lines of code into your editor.

For that, we will make use of the WordPress shortcodes, that are a great and easy way to add features to your blog without having to install a plugin.
The idea is quite simple: we have a look at how Facebook videos are created, and then we replicate the embedding into a new shortcode.

Facebook videos have a unique id, that you can find in your address bar when viewing a video on Facebook. That’s the only element you will need to embed a Facebook video.

Adding the shortcode to your theme

In order to add the functionality to your WordPress install, you will need to add a few lines of code to the functions.php file of your theme. If you do not have such a file, create it. This is easy to do and friendly to reseller hosting or any hosts for that matter.

Here is the function:

// Facebook Video Shortcode
function werewp_fn_fbvideo( $atts, $content = null ) {
	extract( shortcode_atts( array(
		"id" => '',
	), $atts ) );
	return '<object width="400" height="224" >
	<param name="allowfullscreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<param name="movie" value="http://www.facebook.com/v/' . $id . '" />
	<embed src="http://www.facebook.com/v/'.$id.'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
	</embed>
	</object>';
}
add_shortcode( 'fbvideo', 'werewp_fn_fbvideo' );

Add it to your file, save, and upload to your server. You’re done!

Display the video on your blog

Let’s take the example of the video of the latest addition to Facebook services, FB Places. The URL of the video is as follows: http://www.facebook.com/video/video.php/?v=10150257497405484

The only thing you will need to insert that video on your blog is the id at the end of the URL: 10150257497405484.

Then, in your visual editor, simply add the shortcode fbvideo where you want your video to appear. Of course, replace the ID by whatever video id you would like to diplay!

[[fbvideo id=”10150257497405484″]]

And that’s how it should look! Happy blogging, with one more Facebook feature on your blog!