Bandcamp Tips: Custom Header & Image Maps
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 🙂
August 28th, 2011 at 1:51 pm
It’s hilarious that this is by far the most popular post on my website…
Buy my solo records!! http://music.simonlittlebass.com 😉
September 19th, 2011 at 9:02 pm
So awesome – saved me hour or research probably – thx Simon!
September 21st, 2011 at 8:05 pm
My pleasure! Glad to be of service 🙂
November 4th, 2011 at 10:30 am
Thanks for this. I’m delighted with how easy it was; I thought it would be a real drag! 🙂
November 5th, 2011 at 2:03 pm
No worries Albert. Glad to be of service 🙂
January 16th, 2012 at 1:18 am
It didn’t work..
When I paste the HTML output all it says is
“Oops, you haven’t entered any area tags. If you don’t want to use an image map, select ‘Links to’.”
Im so confused please help 🙁
February 10th, 2012 at 7:06 am
It turns out Bandcamp won’t accept area tags that use https links, only http. So if your link starts with https, you need to remove the s and it will work.
February 11th, 2012 at 11:25 pm
I didn’t realize this Chris. Thanks for the extra info 😉
January 16th, 2012 at 1:19 am
Also it asks for area tags ONLY
AHHH!!
January 16th, 2012 at 1:31 pm
Hi Usman,
This is very strange. I just checked the Image Maps site and I can’t see any changes to the system which might affect the HTML output. The final code should contain these area tags as these are the part of the code that define the areas within the image which are clickable.
I’d check first that your boxes do not overlap in any way as this would definitely disrupt the area tag system (see my second image above). Otherwise all I can suggest is that you contact the Image Maps people and see what they can suggest.
As a lowly blogger and musician I am sorry I cannot offer any more positive advice. I posted this to help those who, like me, have very little programming experience. It’s more of a bluffers guide!
Good luck and I hope you get it sorted soon.
Simon 🙂
January 31st, 2012 at 2:42 pm
[…] 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 […]