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:

48 Comments

  1. Posted March 23, 2010 at 11:27 am | Permalink

    Right on.
    The new index page feature is also pretty groovy!
    Keep up the good work.

  2. Posted March 23, 2010 at 11:53 am | Permalink

    This will be a great addition to an already tight integration with our official site! Thanx!

  3. Posted March 23, 2010 at 12:04 pm | Permalink

    This is…. Beyond excellent… Thanks so much!

    Bandcamp just gets it right, every time, all the time.

  4. Posted March 23, 2010 at 12:41 pm | Permalink

    brilliant! but: target=”_blank” doesn’t seem to work.

  5. Posted March 23, 2010 at 12:43 pm | Permalink

    Thanks Robert, we’ll get that fixed.

  6. Posted March 23, 2010 at 1:10 pm | Permalink

    Yet another reason why Bandcamp rules!

  7. Posted March 23, 2010 at 1:19 pm | Permalink

    nice work! new EA header installed http://escapeact.bandcamp.com/

    thanks guys :-)

  8. Posted March 23, 2010 at 2:01 pm | Permalink

    Dudes,

    You rock most hard, but what I would LOVE is a pop-out BC player for my blog. Any chance of such a thang?

    Thanks!

    Jeff

  9. Posted March 23, 2010 at 2:08 pm | Permalink

    I love you!

  10. Posted March 23, 2010 at 2:10 pm | Permalink

    This is really awesome! You guys really know how to make things easier to work with :D

  11. G
    Posted March 23, 2010 at 4:49 pm | Permalink

    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. :)

  12. Posted March 23, 2010 at 7:36 pm | Permalink

    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 :)

  13. el Rafa
    Posted March 23, 2010 at 7:37 pm | Permalink

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

  14. Posted March 24, 2010 at 12:30 am | Permalink

    brilliant

    this is what i did with it (3 verry subtile links in the header):

    http://www.akwalek.tk

    *note: if you use a large monitor the BC navigation bar is kinda annoying right there in the middle of the screen…

  15. Kevin
    Posted March 24, 2010 at 3:08 am | Permalink

    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!

  16. Posted March 24, 2010 at 5:05 am | Permalink

    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!

  17. Posted March 24, 2010 at 5:14 am | Permalink

    Will you marry me ?

    New header up : http://thot.bandcamp.com/

    Thank you to the bandcamp team !

  18. Posted March 24, 2010 at 1:23 pm | Permalink

    Some more great features put to use:

    http://islandsofescape.bandcamp.com/

    brilliant stuff,
    Thankyous.

  19. Posted March 25, 2010 at 9:52 am | Permalink

    Yes! Another rad feature release. As if the new index page wasn’t enough!

    Check this: new index page and a working site map:

    http://theenrighthouse.bandcamp.com/

    Can’t thank you enough for making my life as a musician easier month after month – and, perhaps more importantly, more stylish and fun!

    -Mark

  20. Guillaume
    Posted March 26, 2010 at 4:39 pm | Permalink

    Awesome!
    Keep it simple…
    My header: http://anyversionofme.com/

    Guillaume

  21. Posted March 28, 2010 at 6:11 am | Permalink

    I did it!

    http://maciekpankiewicz.bandcamp.com/

    Love you guys!

    M.

  22. Posted March 28, 2010 at 9:43 am | Permalink

    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?

  23. Posted March 30, 2010 at 11:20 am | Permalink

    Thanks for catching that Robert, we’ll get it fixed up shortly.

  24. Posted March 31, 2010 at 9:01 pm | Permalink

    This is freakin’ awesome!! Thanks!

  25. Posted April 1, 2010 at 10:42 am | Permalink

    You guys are teh awesome. If I could make sweet love to Bandcamp, I would.

  26. Posted April 1, 2010 at 11:52 am | Permalink

    Got mine done, fiddly little buggers they are!

    http://music.esgi.co.uk/

    Looking gooooood :-)

  27. Posted April 1, 2010 at 4:28 pm | Permalink

    I can’t believe how good you guys are at responding to user requests. Thanks very much, and nice work!

  28. Posted April 1, 2010 at 7:13 pm | Permalink

    Very cool – thanks for the tip!

  29. laurakalbag
    Posted April 2, 2010 at 1:35 am | Permalink

    Any chance of allowing just normal HTML and CSS in the header?

  30. Posted April 2, 2010 at 5:38 am | Permalink

    You guys just rock! Thanks alot.

  31. Posted April 2, 2010 at 9:13 am | Permalink

    Gracias Bandcamp!

  32. Posted April 2, 2010 at 10:24 am | Permalink

    This is the best thing ever. Thanks for all of this.

  33. Posted April 2, 2010 at 9:47 pm | Permalink

    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

  34. Posted April 5, 2010 at 12:59 am | Permalink

    Works like a charm, cheers guys ;)

  35. Posted April 7, 2010 at 7:09 pm | Permalink

    You guys are great, thank you for the wonderful implementation!

  36. Posted April 8, 2010 at 1:59 pm | Permalink

    Just finished updating the first version on:

    http://iancampbell.bandcamp.com/

    Looking forward to making this even more seamless. Great feature!

  37. Posted April 10, 2010 at 9:49 am | Permalink

    I’m loving this feature, came out just in time for the redesign of my site! Great job guys!

  38. Posted April 10, 2010 at 2:50 pm | Permalink

    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!

  39. Posted April 12, 2010 at 11:17 am | Permalink

    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…

  40. Posted April 15, 2010 at 8:01 pm | Permalink

    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!

  41. Posted April 15, 2010 at 8:02 pm | Permalink

    Yep, we’ll get that fixed, thanks Jenefer.

  42. Posted April 17, 2010 at 1:23 am | Permalink

    I just played around with the image map feature for my artist Emily Zisman (http://emilyzisman.bandcamp.com). I wanted a very simple usage that somewhat matched the minimal design of her site. As I get a chance to make the site more “beautiful”, I’ll do the same with the Bandcamp site!

  43. Posted April 20, 2010 at 10:55 am | Permalink

    Thanks for this amazing feature (hell, for all your features.) Our band website is looking pret-ty nif-ty… Check us out: (http://cascadearray.com)

  44. Posted April 21, 2010 at 8:48 am | Permalink

    Love being able to integrate some of our website look & menu links into the bandcamp site! Thank you!!

  45. Posted April 21, 2010 at 4:53 pm | Permalink

    Finally got mine up and running: http://christinablust.bandcamp.com. Everything integrates so nicely with my main site now – thanks Bandcamp!

    Also, I found this explanation/how-to of image mapping extraordinarily helpful: http://webdesign.about.com/od/imagemaps/a/aabg051899a.htm

  46. Robbie
    Posted May 13, 2010 at 10:11 am | Permalink

    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!

  47. Matt
    Posted May 17, 2010 at 7:49 pm | Permalink

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

  48. Posted July 10, 2010 at 12:36 pm | Permalink

    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!!
    :D

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

    Ricardo_

2 Trackbacks

  1. By Integrating Bandcamp into Your Existing Site on March 24, 2010 at 4:45 am

    [...] We enjoy doing as we are told: VIEW HERE [...]

  2. [...] music player widgets, allow you to customize your store’s colors and design, and you can even integrate your Bandcamp store into your existing website by using an image map. Also, instead of picking fixed prices for you music and merchandise, you create “minimum [...]

Follow

Get every new post delivered to your Inbox.

Join 1,402 other followers

%d bloggers like this: