How to embed tunes on your site with Spotify Play Button

Spotify has introduced a new feature called the Spotify Play Button, which lets you embed tunes in web pages with some html. See below for a few examples of what it looks like, and expect to see these grey boxes of streaming choons popping up a lot more in future.

You'll need to be a Spotify member with the desktop software installed for embedded songs to play, and clicking a track will pause whatever's playing in your Spotify desktop app. So those thinking this'll let you cheekily listen without signing up are mistaken. If you click the play button from a mobile device, it'll open the Spotify app if it's installed.

Embedding a tune is similar to the process that lets you embed YouTube videos on websites. First, find the song you want in Spotify, right-click the song and hit 'Copy Spotify URI'.

Then head over to this site and paste the code into the required field. Underneath that box you'll get a handy little paragraph of code, which you can paste into your blog or website's html, thus creating tunes.

Here's the default Play Button -- I think the massive album art is somewhat distracting and makes the whole box look like an ad.

Happily though, the Spotify site above that generates code lets you customise the box. This is the 'compact option':

Much better. You can change the size too if you like. Here, I've gone for 620 pixels wide, to fit with Crave's perfectly proportioned column width.

Wondering how I'm choosing these incredible tunes? They all feature on our amazing Sing-along-a-CNET Spotify playlist, comprising songs that we've referenced in our headlines over the years. The good news is you can embed entire playlists too, either as basic bars with tiny track skip buttons...

...or as a whole list. You can choose the 'light' theme too, as I have here. Note these options are only available if you go for the 'large' size option when you're customising the code.

And if you can't be bothered heading to that developer page every time you want to embed something, here's the code for the default size 'compact' Play Button -- save this code somewhere and paste the song URI over where I've helpfully typed 'Insert song URI here':

<iframe src="https://embed.spotify.com/?uri=Insert song URI here" style="width:300px; height:80px;" frameborder="0" allowTransparency="true"></iframe>

Pretty natty, and handy if you run a blog or website, especially one about music. But there are other things we're keen to see from Spotify -- how about an iPad app, or at least an Android app that's not totally borked?

Are you an avid Spotify listener? Tell me whether you like the service in the comments or over on our Facebook wall.