Integrating Bandcamp into Your Existing Site (SPOILER ALERT: Image Maps)

Once again to the Bandcamp mailbag:

“Is it possible to add html links to the custom header? Right now the whole thing links back to the home page, but wouldn’t it be cool if we could put a few tabs on that bad boy linking to say our blog, or our true home page? This would make an already awesome site a bit more customizable and integrated into an artist’s other web activities. We love how we can bring Bandcamp into our other sites, but what about bringing a bit of us into Bandcamp?”

“I want to provide navigation links back to the other parts of our site from our music ‘page’ (which is in reality our Bandcamp page). Is there any chance that you might include some way of making customisable links to provide this functionality?”

“Is it possible to upload an html image map with my custom header image? I’d like there to be seamless clicking between my Bandcamp pages and the rest of my site, and that would require my site’s navigation to appear on my Bandcamp pages as well.”

We enjoy doing as we are told:

Yep, from your Profile page, you can now specify an image map for your custom header, thereby emulating your own site’s navigation and making its integration with Bandcamp seamless. Here’s an example of an image map applied to the custom header of the most excellent Chicago rock band, Empires:

The above is just a simple custom header with an image map, no iframe trickery needed. Note too that they’ve customized their Bandcamp URL (to http://music.weareempires.com), making the integration even tighter.

Here’s another example:

Again, a custom header, image map, and some creative design, and Jed’s Bandcamp-powered music pages smoothly integrate into his own site.

Aside 1: An image map is just some basic HTML code that turns various parts of an image into clickable links. You can create them using Dreamweaver, Photoshop or most any other image editing program (there are even a few web-based image map generators if you’re feeling mildly masochistic).

Aside 2: Eagle-eyed readers will note that in the Profile page UI shown above, there’s also a new option to set your entire header to link anywhere you wish (whereas before it always linked back to the top-level of your Bandcamp site).

Please point us towards your own image map uses in the comments, we’d love to see them!

Update April 27, 2010: Cool image maps are popping up left and right. A few recent favorites:

50 thoughts on “Integrating Bandcamp into Your Existing Site (SPOILER ALERT: Image Maps)

  1. Nice! I haven’t used an Image Map in many years, since slicing became vogue, but it makes total sense here. Ah, the good old days of simple HTML where you could see everything that was happening in one file. 🙂

  2. Really nice feature. Hacked together a quick image map with a web utility, and now pretty much all my music stuff is interlinked.

    I love the new index feature too; I find it’s a much nicer way of presenting things than going straight to the latest release (which might not always be what you want fans to see).

    Thanks, and keep up the good work 🙂

  3. Loving this. Next I’m really hoping to see an option allowing us to add our own custom HTML headers 🙂

  4. Excellent new features, well done! Might I suggest that the new index page could be developed a little more. The ability to add a little bit more information would be great, just a couple simple things like a short bio on there, maybe with a 200-300 word limit so the page doesn’t get too massive. Also, maybe a simple and unobtrusive way of syndicating an RSS feed from say a blogspot or similar from the band would be cool. This would make this index page more useful and give the visitor a bit more info about whose page they are looking at. Obviously, no one wants this to turn into a myspace style mess though!

    Great work, bandcamp is going form strength to strength, easily the best platform for musicians sharing their music on the internet!

  5. brilliant feature once again!
    I’ve been working on the integration of bandcamp into my site and vice versa. This completes it very nicely; it all comes together now. Wonderful!

  6. but there is something that might seem odd to a potential customer. when checking out, the custom header appears on the top of the paypal site. problem: the image map-links also appear, unclickable of course.
    wouldnt it be better to use a different or no logo image file for paypal use?

  7. Love your guys site. Truly a mastery of code. I’ve been waiting for a site like this to come out for a long time and you guys did it better than I could imagine. Seamless strong code that works cross browser, I love it. I just worked for 4 hours with your page and got something great rolling, I can’t wait to incorporate it even more. Thanks again bandcamp, and to all that work on your team, you guys are doing it RIGHT!!!!!!

    music.makeshiftprodigy.com
    makeshiftprodigy.com

    thanks,

    Joe Bauer

  8. I’m a musician, NOT a whizzzz at web design and I love the image mapping! Really makes the site “feel” like a website. thanks!

  9. You guys are really listening, thats awesome! Maybe for the next round of tweaks, you can make it so every artist listed in a site that uses their bandcamp as a label page (er go mine), u can also have a link for each separate artist you list. Right now, every artist goes to the SAME link posted in account profile. Just a thought…

  10. The “_parent” target doesn’t seem to work either. I have bandcamp as my “music” page integrated with my bandzoogle.com hosted web site. I have an issue with the bandzoogle site-wide music player. When coming from my bandzoogle site to my “music” page (bandcamp site) and then back to bandzoogle site via clicking a menu option in my bandcamp image map header, a second site-wide music player will stack. I was told to add the target=”_parent to my image map links to fix this. However, after I enter my area tags it seems to automatically remove my _parent targets. Can this be fixed? Small issue I know but there may be others integrating bandcamp with bandzoogle. Thanks!

  11. Robbie here from bandcamp. I just wanted to give the heads up to those waiting with bated breath — area tags in the custom headers now support the target attribute and title attribute. Hooray!

  12. Anyone know how that lakefield site from the favorites section is managing to get their background image to appear in the header section?

  13. Thanks so much Bandcamp for all the features and tools for the musicians. I recently joined Bandcamp and i love it so much. I also made the integrations with my web and everything is working fine. Two month ago i have no idea about html,CNAME, DNS, Image Map, etc…I started to study , create my website for myself and also integrated with Bandcamp, so Thank You Very , Very Much from the other side of the world, and don`t forget to check my site and music. Best regard, keep it up the good work!!
    😀

    http://delonelyman.ricardogonzalezdiaz.com/album/delonelyman

    Ricardo_

Comments are closed.