How to embed tunes on your site with Spotify Play Button

Spotify now lets you embed tunes in websites. Here's what it looks like and how to do it.

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.

Tags:
Software
About the author

Luke Westaway is a senior editor at CNET and writer/ presenter of Adventures in Tech, a thrilling gadget show produced in our London office. Luke's focus is on keeping you in the loop with a mix of video, features, expert opinion and analysis.

 

Join the discussion

Conversation powered by Livefyre

Don't Miss
Hot Products
Trending on CNET

HOT ON CNET

How well do you know your surge protector?

Whether you're looking to add more outlets, or want to add a layer of protection between your gear and the outside world, here's what you need to know.