Aside from using third party application providers like myself and Involver used in the previous example to add YouTube to your Facebook Fan page, you can also embed the video in its own tab using Facebook Mark Up Language (FBML). Before I get started on this topic if you do not know html or you are not interested in working under the hood there is no sense to even attempt this and you can easily hire someone like me to develop your Facebook applications for you.

Here are some things you will need to proceed. First you will need access to a web server since you will need to reference files from your own severs to place on Facebook, although I should mention it s possible to use Facebook, YouTube, Flickr Picasso etc for these purposes. You will also need a good html editor such as Dreamweaver (my personal choice). Lastly you will need the FBML Static page application to build all this with.  

FBML is a markup language similar to HTML used in web page design check out this link for a good example http://www.facebook.com/pages/Whitecap-Stand-Up-Paddleboarding/139837049542?v=app_7146470109 or http://www.facebook.com/redbull?ref=search&sid=657977681.1311036517..1#!/redbull?v=app_123793864961&ref=search. Although similar to HTML, FBML has a series of custom tags (you can even create some of your own) that will only work in the Facebook environment and there are HTML tags that will not work in the Facebook environment.  A complete list of FBML tags can be found at http://wiki.developers.facebook.com/index.php/FBML . Although similar to HTML, FBML does not allow certain tags such as object embedding; which would seem like the first choice for embedding a YouTube video in your Facebook Fan Page. With that said let’s get started.

The first step in all this is to install the FBML application to make it available to you Facebook Fan Page. At this point I should mention that FBML only works on Fan Pages and will not work on personal profile pages. So navigate to you fan page and in the Facebook search box on top of the page type in FBML. Then look for the Static FBML application and click on the link. Once on the application page look for the link on the left hand side that reads add to my page and click it. Then if you have more than one page you will need to select which page to install the app to and just click add to page and the app will be added. Then naviage back to your fan page and click edit page.

At this point you will see the FBML application and just click edit. Now you are in the FBML application for your fan page and in the title enter YouTube. By the way the title will be the name of your tab in this case will be YouTube. Now comes the HTML/FBML part. Open your HTML editor and eneter the following code which I will explain in further detail.

<fb:swf

swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"

swfsrc='http://www.youtube.com/v/xxxxxxxxxxx'

imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='400' height='256' />

First the <fb:swf is the flash player object and is necessary to embed the video player in the Facebook page. The swfbgcolor is the background color and the other attributes here are pretty self explanatory. The swfsrc is the video source which is a absolute reference to your YouTube video. You will need to replace the xxxxxx with your url id which can be found by going to your YouTube account and copying the url of your video. Once doing so you will need to remove everything after the & so your swfsrc reference should look like ‘http://www.youtube.com/v/JOt2Qp0H9G8’ . Note that FBML uses (‘) instead of (“) without the parentheses which is common for HTML. Then the imgsrc is your thumbnail image for your video and in this case you would just repalce the xxxxxxx with your YouTube id and include the /2.jpg or you can reference another image to be used as the thumbnail located somewhere else such as Flickr or even on Facebook itself. Then the width='400' height=‘256’ specifies the width and height of the thumbnail which can also be applied to your video. Then the only thing left to do is to close the <fb:swf with </ Then if you like you can add a caption below the video by using <h1> This is my YouTube Video </h1> and add a description within the <p> </p> tags. You can also add Twitter links and basically the list here is endless.

When you have all your code ready for testing you can go here http://developers.facebook.com/tools.php?fbml and paste you code into the left box and preview the results in the right box and when you have it the way you want it just go back to the FBML and click save changes. Now navigate back to your Fan Page and click the + sign and look for your YouTube App and select it and it will be placed on your tabs. To move it just drag it to where you want it to go and you are done. If you have a lot of tabs it may be necessary to go to the >> to find the tab you just created and drag it over from there.

As you can see I have used the fb:swf  here http://www.facebook.com/pages/Whitecap-Stand-Up-Paddleboarding/139837049542?v=app_7146470109 to actually embed a Facebook video instead of YouTube for an example and named the tab Contest Giveaway. This is a great example of why you may need to embed a video rather than using the Involver app or just using the Facebook vide upload.

 The uses of Static FBML application is endless as you can easily see and that using this application you can build all kinds of rich content right within Facebook.  We all know why this is a good idea as over half of the 400 million users and going here every day. In my next post I will show you how to feed your blog into the Notes section of your Facebook page.