Bandcamp Tips: Embedding Bandcamp Players On Your Site
Hello folks,
I had a rather fraught evening last night when I discovered that my lovingly-crafted website front page, with all it’s cunningly placed Bandcamp players, did not display properly on certain mobile devices. Now I am a bit of an Apple fan and thus only tested the page on my iPhone and iPad 2. I have no way of testing it on an Android phone or Opera etc, but seeing as though a huge proportion of us use various “iDevices” to browse the internet I thought this was issue enough to take immediate action.
Yes, I am a big geek and this post might not be of interest to many of you; but if like me you use Bandcamp as the major distributor for your music then this issue may well affect you too. The embeddable players are one of the best features offered by Bandcamp and one of the many reasons I chose to go down that route to distribute my music.
After a bit of digging around and a call for help to the lovely people of Twitter (@basdriver, @solobasssteve and @alunvaughan were all very helpful) I think I discovered the root of the problem. I was using the original Bandcamp embed code, which looks like this:
<object width=”400″ height=”100″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”quality” value=”high” /><param name=”allowScriptAccess” value=”always” /><param name=”allowNetworking” value=”always” /><param name=”wmode” value=”transparent” /><param name=”src” value=”http://bandcamp.com/EmbeddedPlayer.swf/album=<iframe width=” /><param name=”allownetworking” value=”always” /><param name=”allowscriptaccess” value=”always” /><embed width=”400″ height=”100″ type=”application/x-shockwave-flash” src=”http://bandcamp.com/EmbeddedPlayer.swf/album=<iframe width=” quality=”high” allowScriptAccess=”always” allowNetworking=”always” wmode=”transparent” allownetworking=”always” allowscriptaccess=”always” /></object>
Now it looks to me like this contains a Flash player link, which iDevices do not support. Plenty of people have Flash-based websites which simply do not display on iPhones, iPads etc. That would drive me round the bend by the way…
The newer embed codes (and the default code when you click the “Share” button on Bandcamp these days) does not contain a Flash link. They look like this:
<iframe width=”400″ height=”100″ style=”position: relative; display: block; width: 400px; height: 100px;” src=”http://bandcamp.com/EmbeddedPlayer/v=2/album=2386594114/size=venti/bgcol=FFFFFF/linkcol=4a4a4a/” allowtransparency=”true” frameborder=”0″><a href=”http://music.simonlittlebass.com/album/the-knowledge-of-things-to-come”>The Knowledge of Things To Come by Simon Little</a></iframe>
So all you need to do is go through your site and replace any old embed codes with the new version. Simple as that really.
Also, in case you wanted to center the player on your page like I did, you’ll need to wrap the embed code with <p align=”center”>code</p>. In case you were wondering…
Sorry for the geekfest, but my previous post on Bandcamp image maps proved rather popular and if I can save you the hour or two of frantic Googling that I experienced last night, my job is done.
Good luck 😉
ps. If you haven’t heard my latest solo album The Knowledge of Things To Come (shame on you), then here is said Bandcamp player in all it’s glory (cunningly centered too by the way!). Feel free to embed it somewhere for your friends and help spread the word. You have instructions now so no excuses…
October 17th, 2012 at 3:08 pm
Hi Simon,
I wonder how you find out the album number 2386594114 for your album. I can’t find the number that corresponds to my bandcamp page. Can you help me out ?
Thanks
Mathias / Blue Jam
October 18th, 2012 at 1:25 pm
Hi Mathias,
I’ve had a look and can’t find a place that directly displays the album number. When you generate an embed code through the Bandcamp share menu the album code will be filled in automatically, so i guess if you need the code for some other purpose you could bring up the code through the share option and copy and paste it.
Hope that’s of some help. Sorry for the vagary…
November 5th, 2012 at 9:22 pm
Hello, I have found a way to find the album number, if you use or Firefox or Chrome, go to the page of the album, display the source code (ctl-u) then perform a cherch by typping “tralbum_param : { name : “album”, value : ” and you will find the number. I hope this will help you.
November 28th, 2012 at 11:53 am
Another approach is to use the Bandcamp API to first search for your band, then search for discography. The API results show the ID’s.
Search: http://api.bandcamp.com/api/band/3/search?key=vatnajokull&name=rail%20fan&debug
Discography: http://api.bandcamp.com/api/band/3/discography?key=vatnajokull&band_id=3763052998&debug
Just replace the `name` and `band_id` values in the above URLs to find out your own.
May 30th, 2013 at 4:20 am
If you don’t mind helping me out – trying to get this all to work. I feel like all the ‘coding’ is right, but i’m not seeing anything come up. Using CargoCollective, first time attempting a website, etc. etc. Could I possibly shoot you what I have? Any help would be much obliged. Thank you.