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.

If you can’t get this working: PLEASE 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.
• You have closed the <fb:swf> tag, with />. If the tag isn’t closed, it won’t work.
• All quotes 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 value “imgsrc” is the preview image. This image is usually 120×90 pixels on YouTube, so when you set the width and height variables in the FBML markup, this image will not look so great because you’ll definitely want your embedded video to be larger than that. However, you can change the “imgsrc” URL to point to any image online, so you can create an image at the 340×270 dimensions (or whatever dimensions you wish — the 340×270 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.

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

More resources:
Facebook Developer Wiki on Embedding Video