Christian Montoya

How to create a custom image map header for your Bandcamp page

This tutorial is written primarily for the folks at 8bc.org, chipmusic.org, and ds10forum.com, but should prove useful for anyone who wants to create a custom header on Bandcamp that links to their various social media profiles.

Bandcamp offers a stellar solution for independent musicians to publish & sell their work, but it doesn't offer many customization options beyond the header image and the colors. If you want to link to your Myspace / Facebook / etc. from Bandcamp, the only way to do so is to use an image map for your header. If "image map" makes you say "hey-what-now?", don't fret… all you need to know is that it's an archaic blob of HTML that's hard to write by hand, but easy to make with the right tools. First, you need to make your header with icons that represent each of the sites you will be linking to. Mine looks like this:

decktonic.bandcamp.com Header Screenshot

If you want, you can download a template PSD that has some icons already positioned, as well as a background layer and a place to put your artist name & tagline:

Bandcamp Header Template [PSD, 314kb]

The icons are evenly spaced in a row, 24 pixels from the top and 16 pixels from the right. Each one is 60×60 pixels, and there is 12 pixels of space in between. The icon layers are linked so you can move them all together… if you want, you can add or delete any icons and just follow these measurements to make everything fit. If you decide to use this exact template without modifying the icons, then here's your image map code:

<area shape='rect' coords='546,20,611,85' href='YOUR FACEBOOK URL' alt='Facebook'  title='Facebook'>
 
<area shape='rect' coords='616,20,681,85' href='YOUR MYSPACE URL' alt='Myspace'  title='Myspace'>
 
<area shape='rect' coords='686,20,751,85' href='YOUR LAST.FM URL' alt='last.fm'  title='last.fm'>
 
<area shape='rect' coords='756,20,821,85' href='YOUR YOUTUBE URL' alt='Youtube'  title='Youtube'>
 
<area shape='rect' coords='826,20,891,85' href='YOUR SOUNDCLOUD URL' alt='Soundcloud'  title='Soundcloud'>
 
<area shape='rect' coords='896,20,961,85' href='YOUR 8BITCOLLECTIVE URL' alt='8bitcollective'  title='8bitcollective'>

If, however, you decide to add some more icons or maybe go with a completely custom header, that's fine. As long as the different sections you want to link do not overlap, you can make your header as wild as you want (as long as it is 975 px wide). Whether you make a custom one or not, save it as a JPG or a PNG and upload it to Bandcamp. To do this, log in, look at your Bandcamp page, and click on "design" in the header. Once that's done, you'll need to input your image map markup. If you need to make some custom markup, you can use the image map generator at image-maps.com. It's a simple tool so I won't explain it, but if you need help, make sure to view their tutorial. When you have your code, go to "profile" at the top of your Bandcamp page and scroll down until you see "Custom Header." Choose the second option and just paste your markup in that tiny little box. Save your changes and check to see if the various parts of your header on your page are actually linked. If anything goes wrong, try, try again! Or, you can post questions in the comments, though I can't promise to answer every one.

Hopefully you'll find this tutorial useful and you'll have a slick looking Bandcamp page that links to the rest of your online world. Make sure to check out my Bandcamp page too: Decktonic on Bandcamp. And if you know any other musicians who might find this tutorial useful, share it!

Thank you for reading • Published on June 10th, 2010 • Please take a moment to share this with your friends