How to Embed Your YouTube Channel or Playlist in a Static FBML Page

Posted: June 3, 2011 in How to Embed Your YouTube Channel or Playlist in a Static FBML Page, wordpress


UPDATE: YouTube has changed the admin interface, and I have changed this post to reflect these changes.

PLEASE NOTE: Having answered the same questions about embedding YouTube videos and Flash in Static FBML custom tabs and using FBML many many times, I’m closing comments on this article and have posted a troubleshooting post for embedding YouTube videos and Flash which addresses all the issues that cause users problems when implementing the fb:swf FBML tag on their custom tabs. Please refer to this article for help, as I’ve closed comments on this post.

The troubleshooting article, combined with this tutorial and the many user comments, should address your issues and get you sorted out. Cheers!

In my earlier post on embedding Flash or YouTube videos on your Static FBML page, I described how Facebook’s Static FBML application supports the embedding of Flash objects, including YouTube videos.

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.

Here’s the drill:

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):


(You want to use the narrower player because Facebook plans to reduce the width of Application Tabs from 760px to 520px in “early 2010″ (See my post on the Facebook Fan Page width reduction.)

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


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>
http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8PvopkXZyiXyT0J8U47lw7x5Fc=</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=&#8217;
imgsrc=’http://www.hyperarts.com/facebook/_img/click-to-play.gif&#8217; 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. (Refer to my 

Comments
  1. [...] How to Embed Your YouTube Channel or Playlist in a Static FBML Page (freelancedesignerindelhi.wordpress.com) [...]