Adding Spotify Widget to your's Websites!

Spotify Play Button

Add a Spotify Play Button to your blog, website, or social page—all your fans have to do is hit “Play” to enjoy the music.

Note: By using the Spotify Tools, you accept our Developer Terms of Use.

Spotify Play Buttons can be added to any webpage that supports <iframe> tags. You can create Play Buttons for albums, tracks, artists, or playlists.

When a logged-in Spotify user clicks the button, the music will start playing in the Spotify player. If the user is not logged into their Spotify account, they will be prompted to do so. If the user does not have a Spotify player they will be sent to the Spotify sign-up page or prompted to download a suitable client, in a new window.

Follow the steps below and you’ll have your site singing in seconds.

You can choose different button themes and sizes, and you can link to any song or album in our music catalog, or to any playlist that you have created. (Note that we do have a few Terms of Use that we need you to comply with.)

Get the Code

1. Right-click any song, album or playlist in the Spotify player and select “Copy Track Link” or “Copy Spotify URI”:
   
2. Paste the link or URI in the field below:
   (For example, spotify:track:2TpxZ7JUBn3uw46aR7qd6V or http://open.spotify.com/track/2TpxZ7JUBn3uw46aR7qd6V.)
3. Copy the code below and paste it on your website.

Preview

Options

Size:

 Large (default)

 xpixels

 Compact (default)

 xpixels

Theme*:

 Dark (default) Light

View*:

 List (default) Cover Art

* Custom themes and views are only available for Spotify URIs referring to an album, an artist or a playlist.

Available parameters

Parameter	Value	Large	Compact	Defaults
uri	Valid Spotify URI or HTTP link	✓	✓
theme	black, white	✓	x	black
view	list, coverart	✓	x	list

Examples

<iframe src="https://embed.spotify.com/?uri=spotify:track:5JunxkcjfCYcY7xJ29tLai" frameborder="0" allowtransparency="true"></iframe>

<iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ&view=coverart" frameborder="0" allowtransparency="true"></iframe>
<iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ&theme=white" frameborder="0" allowtransparency="true"></iframe>

ue"></iframe>
<iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ&theme=white&view=coverart" frameborder="0" allowtransparency="t
r

Note: The iframe attributes allowtransparency="true" and frameborder="0" are required for the button to render correctly.

Player min/max sizes

You specify the height and width of the player by setting the height and width properties of the iframe.

Player size	Height	Width
Minimum size	80px	250px
Maximum size	720px	640px

What kind of player is rendered?

The larger player will be rendered if the given height is 80 pixels greater than the given width. Otherwise the compact player will be rendered.

Examples

<iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ" width="250" height="80" frameborder="0" allowtransparency="true"></iframe>

<iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

Multiple tracks player

You can create a playable list of tracks without using a Spotify playlist by specifying a title and a comma-separated list of track IDs. The track ID is the 22 character string found after “spotify:track:” of each Spotify URI.

Example

<iframe src="https://embed.spotify.com/?uri=spotify:trackset:PREFEREDTITLE:5Z7ygHQo02SUrFmcgpwsKW,1x6ACsKV4UdWS2FMuPFUiT,4bi73jCM02fMpkI11Lqmfe" frameborder="0" allowtransparency="true"></iframe>

Frequently Asked Questions about Spotify Play Button

Controlling through Javascript

Is there a JS SDK for the player? Can I send play/pause commands using Javascript?

The Play button doesn’t have any observable events, nor does it listen for any. Playback can only be triggered by the user clicking the button.

We’re certainly looking at creating a JS SDK; it’s a bigger project and right now we’re focussing on quickly releasing APIs to open up the general Spotify ecosystem (catalogue, playlists, etc).

None of these requests are falling on deaf ears, and we’re working hard to bring out as much functionality as we can.

Playlists

The playlist rendered is not updated

Any changes you make to a playlist will be synced to your Spotify Play Button within minutes (max 10 mins).

The widget doesn’t render all the tracks within a playlist

We only show the first 200 tracks in any playlist.

A user’s playlist of starred tracks is currently not available.

I can’t find out how to sort the tracks within a playlist

The displayed order is the one in which they are arranged in the playlist for regular playlists, and the order in which they were added in the case of a user’s starred playlist. If you want to change the order in your regular playlists, open (for example) the Spotify Desktop Player and drag-and-drop your tracks into the order you require. Alternatively, you can programmatically reorder tracks through our 

Terms of Use

To protect users, content providers, the Spotify trademarks, our software and the Spotify service we require you to comply with our Spotify Widget Terms of Use.