Adding the Bandcamp Player to a Facebook Fan Page

I’ve recently been working on some Facebook fan pages for musicians and thought it would be a good idea to add the Bandcamp player to the page to promote a free MP3 download by Cappo.  It wasn’t completely straight forward so here’s how to do it yourself…

1. Add the Static FBML application to your page (click on the ‘Add to my Page’ button underneath the logo and select the page you want to add the player to).
2. Go to your fan page and click ‘Edit Page’ underneath your profile picture.
3. Find FBML and select edit.

You have three options of where you can place your Bandcamp player…

1. On the wall tab (main page of the fan page).
2. On the boxes tab (a tab which can have multiple boxes on).
3. On it’s own tab.

As you can choose four different sizes of Bandcamp player I decided to have two players of the same track.  One small player for the left hand side of the wall tab and one larger player on it’s own tab.

Wall Tab Bandcamp Player

For the small player to go on the left hand side of the wall tab I named it ‘FREE DOWNLOAD’ in the title and in the body I put this code…

<fb:swf swfbgcolor="FFFFFF" quality="high" waitforclick="false" align="center" imgstyle="border-width:0px; border-color:white;" swfsrc='http://bandcamp.com/EmbeddedPlayer.swf/track=3422138133/size=tall/bgcol=242424/linkcol=f5f4f4/' imgsrc='http://www.leftofthewest.net/cappo/facebook/facebook-button2.jpg' width='190' height='270' />

To add your track or album to your fan page go to your Bandcamp site and select the page you want to share (if you want to add an album go to the album page and if you want to add just a track, click on the track and go to that page).

1. Click share on the correct Bandcamp page.
2. Select other.
3. Select the tall player for the wall tab.
4. Edit the background colour and text size (I changed mine to match Cappo’s Bandcamp profile).
5. Copy and paste the code and place it in a text document or a word file.
6. Find the part that starts value=”http://bandcamp.com/EmbeddedPlayer.swf/… and copy the link between the two ” “.
7. Swap it for the link in the code above where it says swfsrc=’

Facebook doesn’t allow Flash to automatically run on the page so you have to have a placeholder image in front of it.  However, you do not want to use mine so to change it just change the image in the imgsrc=’ ‘ part and add the width and the height in the next two parts (make sure you don’t make the placeholder smaller than the player though as you won’t be able to see the player when someone clicks to activate it).

If you don’t want create an image you can use this one here…

To use the image above use this code (making sure you change the player link highlighted in red to yours)…

<fb:swf swfbgcolor="FFFFFF" quality="high" waitforclick="false" align="center" imgstyle="border-width:0px; border-color:white;" swfsrc='http://bandcamp.com/EmbeddedPlayer.swf/...' imgsrc='http://www.ingeniousonline.co.uk/blog/images/bandcamp-placeholder.jpg' width='150' height='295' />

Once you have added the code click save, go back to the edit page and select application settings above the FBML box which you have just renamed.  Make sure the box has been ‘Added’ and then go to your wall tab if the box is not on the left hand side go to your boxes tab, find the box, select the pencil in the top right corner and click ‘Move to Wall tab’.

Bookmark This Post

Tags: Bandcamp, cappo, facebook, fan page, how to

This entry was posted on Tuesday, February 2nd, 2010 at 7:28 pm and is filed under facebook. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.