One question I get asked a lot is whether or not it’s possible to embed an entire YouTube playlist into Facebook. If you’re developing a custom Facebook application, the easiest way to do this is to grab the playlist’s RSS feed and parse that out, embedding each RSS item as a video.
If you’re using Static FBML this gets a little more limited, since you can’t pull in a script to parse that RSS feed – instead, you can use the playlist module YouTube provides.
The reason we can do this without an application is because YouTube lets you create custom players for playlists. These custom players contain all of the playlist info inside of one Flash file, which means you can embed it the way you’d embed any other Flash file.
Create a Custom Player
First, go to the custom player page on YouTube, and set up a new player for the playlist you want to display. You’ll have some display options such as color, which playlist you want to feature, and the layout style you want for your player.
As you can see, you have a choice of a slideshow-type of playlist, where each video plays successively one after another and you don’t have a visible list of the playlist as a whole – or a grid view that uses a hero-box style, with a player window and a grid that shows a preview of what’s up next in the list.
If you change your mind after saving your playlist, you cannot edit this setting, but you can always create a new custom player using the alternate layout.
After you’re done, the end result should look something like this:
(That’s a live playlist, so feel free to click around.)
In our example, YouTube will generate code that looks like this:
Believe it or not, the hardest part is done.
Embed the Playlist Flash File
Now, we just refer back to the tutorial that explains how to embed Flash files in Static FBML and use the newly created YouTube url as the swf url. In the example above, http://www.youtube.com/cp/vjVQa1PpcFN2npRJAPohx0LtIq-WWFNy-wlBQ52WB7A= is the url of the playlist swf, so our embed code would look like this:
Since Flash isn’t permitted to autoplay in Facebook fan pages, you’ll want to create an image the same size as your playlist to display to the user before they’ve clicked to let them know that they should click on the image to start the player, and then edit the imgsrc parameter to use that image.
You’ll probably also want to size the player down a bit. The Facebook fan page width is only 520 pixels wide, so the default size YouTube gives you will be way too big at 746 wide by 413 high.
If we resize it down proportionally to fit, we end up with 510 wide by 282 high. Our FBML embed code looks like this:
[php][/php]That’s actually a little cramped for my taste, but it would do in a pinch. The other alternative is to pick the slideshow-style layout that plays videos successively without the grid. The size player YouTube generates for that is 416×337, which will fit quite comfortably within the Facebook fan page width.
So that’s all there is to it. Of course, if you want a more customized display of your playlist, you’re most likely going to have to set up a Facebook application, but if you can make this layout work within your Static FBML page design, it’s an easy solution.
