How to Embed Facebook Videos in Websites or Blogs

I believe the one who sent this in through our Ask Cebu Tech Blogger section is also a blogger trying to uncover that little trick to embed Facebook videos on webpages.



This post may not be of the interest of some readers here, but yeah – CTB is committed to share some of those technical stuffs in blogging. Here’s the question:

Hi Bert, I’m subscribed to CTB and I noticed you embed videos from Facebook within your posts. I’m a blogger too and I want to know how you do it, particularly in Blogger / Blogspot platform. I highly appreciate if you can consider my query. Thanks

So there you go. She doesn’t want her name to be published so we’ll keep that way. But first, thank you for subscribing!



Okay.



Basically, Facebook allow sharing videos just within the social network but didn’t provide any simple way for users to embed those videos on other websites. Embedding Facebook videos is practically useful especially when a web publisher, for example, wanted the videos to be played right on their own websites. Without any further ado, here’s how to do it.



First, get the URL of the Facebook video. It should be like this:

http://www.facebook.com/video/video.php?v=2086427714794



Copy the code below and paste it in your webpage or text editor (of course in HTML format).



<object width="520" height="334" >

<param name="allowfullscreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name="movie" value="http://www.facebook.com/v/xxx" />

<embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"

allowscriptaccess="always" allowfullscreen="true" width="520" height="334">

</embed>

</object>



Note: I’ve tested this in WordPress and Blogger / BlogSpot, but haven’t tried yet in other CMS like Drupal, Joomla, and etc.



From the code above, I highlighted “xxx” characters in red. Just delete “xxx” and replace it with the video ID. Video ID is the combination of 13-digit number located in the URL of the video. In the example URL above, it’s 2086427714794.



So the resulting code would be like this:



<object width="520" height="334" >

<param name="allowfullscreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name="movie" value="http://www.facebook.com/v/2086427714794" />

<embed src="http://www.facebook.com/v/2086427714794" type="application/x-shockwave-flash"

allowscriptaccess="always" allowfullscreen="true" width="520" height="334">

</embed>

</object>



Now, you can already have Facebook videos embedded in your website or blog through this simple trick. You can find sample Facebook videos embedded on this blog here, and here, and here.



I hope you like it, and if you have related questions – just send us one through this link.



Update: Looks like Facebook already has an "embed" option added on video links. Just go to the video, on the bottom-right, there is an "Embed video" link which generates the link seamlessly. However, this is only available if you're the owner of the video. Or else, you still have to follow the steps above. Thanks Raymond for the heads-up!



To receive latest technology updates, you can subscribe either by E-mail or by RSS Feeds. Follow me also on Twitter.