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!
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;
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):
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”:
imgsrc=’http://www.hyperarts.com/facebook/_img/click-to-play.gif’ width=’492′ height=’391’/>
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