Simon Little

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=&lt;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=&lt;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…

Thought I’d write a quick post after spending a couple of hours this afternoon faffing about trying to customise the custom header on my Bandcamp page with the addition of an image map.

It’s actually much easier than at first it may seem and with just a few simple steps you can have your Bandcamp page integrating with your main website in a far more effective form. The addition of a custom url for your Bandcamp page means you can use the site as a shop-window for your music which forms part of your main website as a sub-domain. This is what many artists are doing now to promote their music, using their own site as a hub and using external sites such as Bandcamp for additional functionality.

This is how I created the image map…

First you need the actual image for the custom header. I did a screen grab (command-shift-4) from the home page on my main website. Here is the crucial piece of information (which cost me two failed attempts): Bandcamp custom headers are required to be between 975 pixels wide and 40-180 pixels tall. What I should have done was check the dimensions when I did the screen grab. Third time lucky…

Here is what my custom header looks like. I included the menu at the top so I could superimpose the image map later…

I then went to the excellent Image Maps site and uploaded the image. I shan’t bother to fully explain how to use the site as it is incredibly easy to figure out and simple to use. Basically once the image is uploaded you can create boxes around whichever blocks you want to add links to and away you go. Starts looking a little like this:

Once you’ve finished marking up the image, just click the Get Your Code button and copy the generated HTML code to your clipboard.

Then you hop over to Bandcamp and upload your custom header image on the main page. The final step is to go to your Profile page and paste the HTML into the Use an image map box in the Custom Header section.

Then you’re laughing.

Hope that was useful to somebody. This post could’ve saved me a good hour this lunchtime 🙂