How to Embed Spotify in your Vizzes

by Louise Le

For my TIL Christmas Song viz in Figure 1 (see it here!), I embedded a Spotify playlist so you can listen to the music in the viz as you explore. Embedding a Spotify playlist/ track/ album can be great for adding another dimension to your vizzes. For example, they can supplement a viz about podcasts, movie soundtracks, or other musical topics.

Fig 1. The Colours of TIL’s Christmas

 

Doing this though, was not as easy as I expected. I expected a simple ‘copy playlist link’ from Spotify and paste into the Web Page object on Tableau Desktop (Figure 2) and boom! Embedded playlist. Nope.

Method 1 below will show you what happens when you paste a URL in directly. In Method 2, I go over how to embed your playlist more neatly.

 

Fig 2. How simple I thought embedding a playlist would be

 

 

Method 1: Pasting URL in Web Page directly

To retrieve your link, go into Spotify (web player, desktop or mobile versions will work), locate your track/album/playlist, click on the three dots ‘…’ and click (in my case) ‘Copy Playlist Link’ (Figure 3). This will copy the link to your clipboard.

Fig 3. Retrieve your Spotify link

 

After inputting my playlist URL as in Figure 2, the result was as shown in Figure 4. The whole web page was inserted into the box instead of a small play button with album pictures as I wanted. According to other blog posts I found on this topic, Spotify provides an embed link as well as a regular link. However, it seems that this is no longer the case. Boo.

If this method suits your vizzing purposes then awesome! If not, read on to Method 2.

 

Fig 4. What happens when you insert the playlist URL directly

 

 

Method 2: Editing URL into embed-able format

When you copy a link from Spotify, it will look something like this:

 

                     https://open.spotify.com/playlist/0hQKgwFSOR0YYDHVtAUloO

 

What we want, is a format like this:

 

https://embed.spotify.com/?uri=spotify%3Aplaylist%3A0hQKgwFSOR0YYDHVtAUloO

 

To get your URL into an embed-able format, copy the last string (after the last /) in your URL and paste in the link below where it says ‘PASTE HERE‘. Change the word ‘playlist’ in the link below to ‘track’ or ‘album’ in the link below if necessary.

 

https://embed.spotify.com/?uri=spotify%3Aplaylist%3APASTEHERE

 

Now, paste your new embed URL into a Web Page object in Tableau Desktop. You will get a white box that you cannot interact with as shown in Figure 5. This is fine! When you upload to Tableau Public, your embedded playlist will look something like Figure 6. Perfect!

 

Fig 5. What will happen when you insert an embed link

 

Fig 6. Embedded playlist as seen in Tableau Public

 

 

 

Happy Viz-mas!

 

 

Louise

Check me out my blog feedmedata and follow me on @FeedMeData_

4 mins read

Thu 31 Jan 2019