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.
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.
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.
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.
Method 2: Editing URL into embed-able format
When you copy a link from Spotify, it will look something like this:
What we want, is a format like this:
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.
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!
This post was also posted on thedataschool