Embed Your YouTube Channel or Playlist in a Static FBML Page

Create the Custom Video Player in your Channel Account

Log in to your YouTube account;

Once you are logged in, you want to go to this URL:
http://www.youtube.com/custom_player/

Make your selections, making sure that, under “Layout,” you select the player that doesn’t have the two columns of thumbnails to the right of the main video (the one on the left, below):

Video Player layout choices

(You want to use the narrower player because Facebook plans to reduce the width of Application Tabs from 760px to 520px in “early 2010″)

Select the videos to populate your slideshow/player (“My Videos”, “My Favorites” or a Playlist):

Content for Player

After choosing all your options, click the “Generate Code” at the bottom of the page;

Your “Embed Code” that is generated will look something like this:


<object width="416" height="337"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8PvopkXZyiXyT0J8U47lw7x5Fc="></param><embed src="http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8PvopkXZyiXyT0J8U47lw7x5Fc=" type="application/x-shockwave-flash" width="416" height="337"></embed></object>

Create the FBML Code for Static FBML

You will need to extract the “value” string from the <param> tag in the YouTube-generated code and make it the value for “imgsrc”:


<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/umf/click-to-play.gif' width='492' height='391'/>

The “imgsrc” is the absolute URL to the image that will be clicked on to load the video player in your FBML page (Facebook doesn’t allow Flash to load or JavaScript to run until the user takes an action, usually a click). Make sure the image is the same dimensions as the width and height values of the video player, as reflected in the YouTube-generated code (492 x 391px, in the example here).

Simply paste the code into your Static FBML instance and, assuming the URLs to the player and to the load image are correct, it should work.

NOTE: If you can’t get it working, make sure:

  • The URLs to both the activation image (imgsrc) and the video channel 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 </fb:swf>. 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’ ).

For businesses or organizations that have a YouTube channel, the good news is that you can embed a slideshow of your YouTube channel on a Static FBML application tab page. The presentation is quite nice, with the main video and, below it, a scrollable row of thumbnails that appears when the big video is moused over.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: