Add Facebook Videos to Fan Pages Using FBML

Wouldn’t it be cool if you could add a video right to one of your tabs on your Facebook fan page? Now you can!

First, just set up a tab with the FBML application. The following FBML snippet will help you get started. I’ve marked in the areas that need special attention. See below for how to swap them out and where to get each item.

<fb:swf swfsrc="{__SWF_source.swf__}?v={__videoid__}&ev=0" flashvars="video_autoplay=1&video_src={__url.mp4__}&fbt_play_again=Play+Again" imgsrc="{__thumb_URL__}" width="{__width_in_px__}" height="{__height_in_px__}" imgstyle="width:{__width__}px; height: {__height__}px;" />

Each of the sections marked in {__} needs to be replaced. To get the values you need, you need to go to the video tab in your page and find the video you’re trying to add. You can click View Source and dig through the code, but the easiest way to do this by far is to use Firefox with FireBug. Firebug is a plugin that will allow you to quickly see the HTML associated with an element on the page. Once installed, navigate to the page with your video on it and click on the little bug in the bottom right corner of the browser. The firebug panel will appear at the bottom of the screen. Click on the small blue arrow and you’ll be able to mouse-over elements on the page and see the corresponding HTML code below. Each of the elements below are easily found by using firebug to get the block of code for the video on that page.

Firebug in action:

Sample HTML code from a Facebook video:

<embed width="756" height="540" flashvars="video_id=1189859419627&amp;video_length=348680&amp;video_seconds=348&amp;video_category=0&amp;video_rotation=0&amp;fbt_play_again=Play+Again&amp;fbt_go_to_video=Go+to+Video&amp;fbt_next_video=Next+Video&amp;fbt_share=Share&amp;play_context=6&amp;connect_to_owner=0&amp;share_id=s%3D11%26appid%3D2392950137%26p%5B%5D%3D1189859419627&amp;video_player_type=video_player_hq_permalink&amp;lowqual_width=400&amp;lowqual_height=300&amp;highqual_width=716&amp;highqual_height=540&amp;lowqual_stage_width=500&amp;lowqual_stage_height=300&amp;highqual_stage_width=756&amp;highqual_stage_height=540&amp;video_width=716&amp;video_height=540&amp;mvp_connect=1&amp;stage_width=756&amp;stage_height=540&amp;video_owner_name=Twin+Harbor+Web+Solutions%2C+Inc&amp;video_owner_href=http%3A%2F%2Fwww.facebook.com%2Ftwinharbor&amp;video_src=http%3A%2F%2Fvideo.ak.facebook.com%2Fvideo-ak-sf2p%2Fv2686%2F179%2F52%2F1189859419627_4540.mp4&amp;video_timestamp=Added+about+7+months+ago&amp;video_title=Waypoint+Site+Traffic+Statistics+%5BHQ%5D&amp;thumb_url=http%3A%2F%2Fvthumb.ak.fbcdn.net%2Fvthumb-ak-sf2p%2Fv2336%2F126%2F107%2F1022602683%2Fb1022602683_1189859419627_1403.jpg&amp;highqual_src=http%3A%2F%2Fvideo.ak.facebook.com%2Fvideo-ak-sf2p%2Fv6808%2F179%2F52%2F1189859419627_43357.mp4&amp;lowqual_src=http%3A%2F%2Fvideo.ak.facebook.com%2Fvideo-ak-sf2p%2Fv2686%2F179%2F52%2F1189859419627_4540.mp4&amp;fbt_lowqual=View+in+Regular+Quality&amp;fbt_highqual=View+in+High+Quality&amp;highqual_is_on=1&amp;motion_log=%2Fvideo%2Fmotion_log.php&amp;histogram_is_on=1&amp;video_autoplay=0&amp;width=756&amp;height=540&amp;user=1022602683&amp;log=no&amp;div_id=id_4b96b2d08bb3b1bffb4f1&amp;swf_id=swf_id_4b96b2d08bb3b1bffb4f1&amp;browser=Mozilla%2FNetscape+6.x&amp;string_table=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fflash_strings.php%2Ft88067%2Fen_US" wmode="opaque" scale="noscale" salign="tl" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="swf_id_4b96b2d08bb3b1bffb4f1" id="swf_id_4b96b2d08bb3b1bffb4f1" style="" src="http://static.ak.fbcdn.net/rsrc.php/z4HBM/hash/3krgnmig.swf" type="application/x-shockwave-flash">

SWF Source

This is the source of the SWF file (flash file) that acts as the player. Look for the URL that ends in .swf (highlighted in red above).

MP4 Source

This is the only somewhat tricky part. You need to specify the source video file, an MP4 file. It’s in there, but a little harder to see. I’ve highlighted the part you want in green this time. It looks like this:
http%3A%2F%2Fwww.facebook.com%2Ftwinharbor&video_src=http%3A%2F%2Fvideo.ak.facebook.com%2Fvideo-ak-sf2p%2Fv2686%2F179%2F52%2F1189859419627_4540.mp4

Why does this look so weird? It’s encoded. Encoding essentially means, you can take one URL, and pass it as a parameter inside of another URL, but you have to encode the special characters. Take this URL and decode it back to normal by using an online URL decoder, found here. Paste it in, hit decode, and you’ve got your URL.

Video ID

This is the long number also highlighted in red above. This will tell the player which video to load.

Width and Height

The width and height of the video are customizable. The originals are specified in orange above. You can choose to display the video in a smaller space if you like. You need to specify them manually, both the width and the height. You also need to specify them twice; once in a style tag, once in attributes right on the main tag. Doing it twice helps browser compatibility. Internet explorer doesn’t respect the element attributes, so you need to add the style tag to make sure it works everywhere.

You should also be aware of proportions. Sometimes you need to do a little algebra to get the video to the correct size. The formula is simply, W1/H1 = W2/H2. I suppose a separate post is in order for that bit.

Thumb URL

You’ll want to specify a thumbnail URL. This is the image that displays before you click and play the movie.

Other Notes