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:

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.

Advertisement

468x60_makemoney

Advertisement

Themeforest
Previous post

Using SSL in a Facebook Application Tab

Next post

Clear Default Form Input Value on Click Using FBJS

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • Great job with this site!

  • Thanks! Still have a ways to go, but I'm excited about it 🙂

  • Iva

    Awesome tutorial. Come to think, this website is what the world of tutorials was missing in general, instead of yet another site teaching hopeless cases how to work in PS.

    Is there a way one could this with custom playlist from somewhere else, done with jwplayer or flowplayer?

  • Heya Iva 🙂 You should be able to use jwplayer – I'm not familiar with flowplayer, but as long as it's a hosted swf file, you should be able to use fb:swf. The only potentially tricksy bit could be if you're pulling in the playlist via XML, since you may run into crossdomain issues or facebook might see that you're trying to pull in a third-party file and try to ask permission to allow.

  • al er

    Or take the url until ''…..true'' then write swf before /v/ ( … /swf/v/…) then u can use the video on fb

  • Adam

    This worked great, thanks. Is there any way to center the video player on the page?

  • Sure, you would just use CSS:
    http://www.w3schools.com/css/css_align.asp

    So, like

    <div style="text-align: center; margin: auto">{your playplist</div>
    • Hi snipe, I tried the css trick as well as fbml’s own center=”align” to no avail. I quite frankly don’t understand. My swf media player won’t budge (it ain’t youtube, could that be it?)If it helps, here’s the link in question : http://goo.gl/nFCVThanks 🙂

      • What specific CSS trick did you use? And what browser are you using? The link is helpful, but I’m not exactly sure what I’m looking at, or what it’s supposed to look like.

        Did you use {div style=”text-align: center;”}your playlist>{/div}

        (replace curly quotes with HTML brackets, of course.)

      • Yep, used that text-align, no go. Even used to define my div’s width & height just in case, nothing.Browsers tested : firefox 3.6.9, chrome 6 and safari 5.What you’re supposed to see is the vertical media player (once you click on the image of course) center aligned in that black div.Right now my full code is the following:

        &lt;fb:swfswfsrc='<a href="http://bandcamp.com/EmbeddedPlayer.swf/album=2015342616/size=tall2/bgcol=000000/linkcol=ffffff" rel="nofollow">http://bandcamp.com/EmbeddedPlayer.swf/album=2015342616/size=tall2/bgcol=000000/linkcol=ffffff</a>'align="center"quality="high" waitforclick="false" imgstyle="border-width:0px; border-color:white;" imgsrc='<a href="http://www.formemusic.com/IMG/fb_page_music_player2.jpg" rel="nofollow">http://www.formemusic.com/IMG/fb_page_music_player2.jpg</a>' width='530' height='800' /&gt;&lt;/fb:swf
      • ah, sorry about all those br tags, unintended. Let me try this again:

      • I think Disqus is still breaking it. Can you go to pastebin.com and paste it in there, and reply with the url? Will be easier.

      • No problem! here it is: http://pastebin.com/jPrTGCqC

      • Seems like I reached the end of Disqus threading capabilities =), here is the pastebin link in case you didn’t get notified from the one below:

        http://pastebin.com/jPrTGCqC

      • I’m sorry, I’m still not quite getting what it’s supposed to look like. But your div is 530 and so is your swf, so centering is sort of irrelevant, no?

      • hey thanks for your help so far, appreciate it.
        The Swf is 170px actually, it doesn’t show because i was brilliant enough to make its bg black… 😉 here’s a sketch if it helps

        http://www.formemusic.com/IMG/facebookpage_forme.jpg

  • Adam

    Awesome, thanks. This site is a brilliant idea, much appreciated.

  • Thank you for this awesome tutorial. It was really helpful. I was able to add a player to my facebook artist page (http://www.facebook.com/asialakay) very easily. Yes, this was much appreciated. xo ~ Asia Lakay

  • Well, I was already excited when I saw the name of your site (my sister and I spent around half a minute saying how perfect it is) and then when you were actually able to explain to ME how to do this… wow! Thank you!

    • Glad it helped! 🙂

  • Inprevious

    I’ve tested in mozzila and it doesn’t works .. but in google chrome is all right. HELP?

    • Can you be more specific? “Doesn’t work” isn’t really helpful.

  • Jim

    Snipe, I work in facebook development and I am required to support the iPad. One thing that is great about embedding a YouTube video is that they sniff the device and provide a non-flash player where required. However, the multi-video player they provide is flash-only so I can’t use it. Take a look at Borders Books facebook page. It’s produced by Buddy Media, it sits on a page tab, and it changes videos ‘on the fly’ meaning it doesn’t reload the page or the player. It appears to load a new video into the existing player. Any idea how they accomplish that?

  • Victor Ramirez

    Hello Snipe!

    I have a big doubt regarding the interconexion of Facebook and Youtube.

    I know this post wast written one year ago, so probably many things
    changed already, for example, now is quite easy to share the playlists
    from Youtube to Facebook.

    My questions is, is it possible to post different Youtube lists in
    different facebook fan pages? I have four fanpages and only one youtube
    channel. Can I upload the videos of all the fan pages with one unique
    channel associating one playlist to one fanpage, or should I create for
    youtube channels?

    Thank you for your answer!!

    Victor