Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

Related: How to Embed Your YouTube Channel Video Player in a Static FBML Page

Related: Tutorial: Embedding Vimeo Videos in your Facebook Fan Page with Static FBML

As detailed in my previous blog post on the Facebook application Static FBML, this Facebook app is a great way to create custom pages with layouts created in CSS/HTML, or by using Facebook's proprietary FBML (Facebook Markup Language).

Recently, someone asked us how to embed video in a Static FBML page. Well, you can actually embed any Flash object using FBML, and it's pretty easy. Here's how it's done if you want to embed a YouTube video (Note: you can use this technique to embed any Flash object with the .swf extension).

PLEASE NOTE:

1. Static FBML can only be used on Fan Pages, not Personal Profiles or Group pages.
2. You can only use CSS and HTML in these pages, and FBML.
3. Your video cannot start playing when the page loads. Facebook requires a user action (usually a click) to load Flash or run JavaScript.
4. To position your video on your page, put the fb:swf code in a containing DIV, set to the width of the video, and position the DIV using CSS.

If you can't get this working::

• Check your URLs: Make sure the URLs to both the activation image (imgsrc) and the video or Flash object are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.
• URLs are case sensitive: All directory and file names after the domain name are case sensitive. One misplaced capital and it won't work!
• Close the fb:swf tag Make sure you have closed the <fb:swf> tag, with "/>" (without the quotes). If the tag isn’t closed, it won’t work.
• Make sure quotes match and are closed: It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width="xxx' ).

Embed a YouTube video using FBML

Here's the code you put on your Static FBML page:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />


Replace "xxxxxxxxxx" with the YouTube video ID, which is the string of characters after the "v=" in the URL in your browser's address bar (up to the "&" or anything following it, if you see that after the string of letters and numbers). For example:

http://www.youtube.com/watch?v=JOt2Qp0H9G8&feature=related

You would replace "xxxxxxxxxx" with "JOt2Qp0H9G8" in both places, resulting in:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/JOt2Qp0H9G8'
imgsrc='http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg' width='340' height='270' />


You can also change the values for "swfbgcolor" and "imgstyle" to your preferences.

The value "swfsrc" is the absolute URL to the Flash file you want to embed (YouTube videos are in Flash format).

The Preview / Activation Image — imgsrc

Facebook requires a user action (usually a click) to trigger Flash or JavaScript to run. There is no way around this requirement. The "imgsrc" image is the image the user will see in place of your video. When s/he clicks the image, your video loads.

To eliminate a second click to start the video after it loads, try setting your video to autoplay so that it plays immediately when the user clicks the activation image. You do this by appending "&autoplay=1" to the swfsrc URL:

swfsrc = 'http://www.youtube.com/v/JOt2Qp0H9G8&autoplay=1'


The value "imgsrc" is the preview/activation image. The YouTube thumbnails are small( usually 120x90 pixels), so you don't really want to use those for your activation image.

You can change the "imgsrc" URL to point to any image online, so you should probably create your own image at the 340x270 dimensions (or whatever dimensions you wish — the 340x270 is just an example), upload it to your server (or use an image hosting service like Photobucket to host your images).

On your Fan Page, an image appears first (the value of "imgsrc"). When the user clicks the image, it turns into the Flash object.

Positioning / Aligning your Video on the Page

If, for example, you want to center your video/Flash on the page, you need to put it inside a containing DIV and position the DIV using CSS, as in this example using the width of 492 pixels:

<div style="margin:0 auto; width:492px;">
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI='
imgsrc='http://www.hyperarts.com/facebook/_img/click-to-play.gif' width='492' height='391'/>
</div>

The "margin:0 auto" centers the containing DIV on the page. You can set the top and bottom margins to whatever values you wish, but the left and right values have to be set to "auto" to center the DIV.

The above is ONLY an example; set the values appropriate to your video/Flash.

Feel free to ask questions via comments, and I'll try to help.

More resources:
Facebook Developer Wiki on Embedding Video