Bandcamp Player on your Facebook Page

[rbmonosylabik]

I love Bandcamp for music distribution, so I just spent some time trying to make its player the music player for my Facebook page. You can see the results on my facebook page: http://www.facebook.com/pages/Monosylabik/5945599330

Here's how to do it:

• You need to install the Static FBML app on your page. It allows you to add boxes to your profile containing custom HTML or FBML code. Go to http://www.facebook.com/apps/applicatio ... 5945599330 and click Add to my Page.
• On your page, click Edit Page below your image. Scroll down to the Static FBML app, click on the pencil icon and click Edit
• Give your box a title, then in the FBML text field, paste this code:
  

  Code: Select all

  <fb:swf swfbgcolor="FFFFFF" quality="high" waitforclick="false" align="center" imgstyle="border-width:0px; 
   border-color:white;" swfsrc='[BANDCAMP_CODE_URL]' imgsrc='[PLACEHOLDER_IMAGE_URL]' width='[CODE_WIDTH]' height='[CODE_HEIGHT]' />
  

• Now, go to your Bandcamp page, click Share, and select Other. Select your player size. I chose Tall to be able to put it on the main profile page sidebar, but you could use Grande or probably even Venti if you're going to put it in a Tab. Select your background and link color and wether you want a visualization or not (it does carry over to the Page )
• Copy the resulting code to a text editor. Now, you need to take the following parts of the resulting code and replace them in the code I gave above:
  
  1. Replace [BANDCAMP_CODE_URL] with the whole URL after <param name="movie" value=". It looks something like this (depending on your settings):
     

     Code: Select all

     http://bandcamp.com/EmbeddedPlayer.swf/album=#######/size=grande/bgcol=FFFFFF/linkcol=4285BB/

  2. Replace both [CODE_WIDTH] and [CODE_HEIGHT] with the width and height in the Bandcamp code.
  3. Finally, you'll need to add a placeholder image the user has to click to launch the player. This is because Facebook doesn't allow Flash files to play automatically, and without that user click, your player will be invisible. Here's one you can use for the Tall player:
     
     
     
     If you want to use that, replace [PLACEHOLDER_IMAGE_URL] with this URL:

     Code: Select all

     http://img260.imageshack.us/img260/9692/bcplaceholder150x295.jpg

     Or you can make your own and upload it somewhere. Just make sure it's the same size as the player and that it is in either .jpg or .gif format.
• Click Save Changes
  
  Now, go to your Page, and if everything went right, your player should be under the Boxes tab. You can move it to your sidebar by clicking its Pencil icon and selecting Move to Wall Tab.
• ...Profit

[Echotone]

Thanks for sharing this man, I will try it as soon as I have time
Cheers

[allanaceflyer]

Like the track good that is.

[distaudio]

Thanks very much. Worked perfectly.

[friend_kami]

doesnt work at all for me. infact, when adding i have no pages to add (says the plugin) and when im trying to find this edit where i am supposed to scroll down to the plugin, it doesnt exist at all.

ohwell :/

edit: doh, fanpage. not profile. my bad :p

[Simbosan]

Isn't FBML being phased out very soon? Nice work though, don't mean to rain on your parade =)

S