We were putting together a sports club site https://carltonlive.com/ when someone had the ‘bright idea’ to put in a Spotify playlist. There are 3 methods that we will talk through here. The first didnt work for us at all – we are thinking that it may be due to a clash with the theme. So we came up with a third.
All 3 methods rely on getting a playlist link. To do that:
- Sign in to Spotify
- Click the 3 dots beside or below the playlist
- Click on “Copy Playlist Link”
Method 1: use the Spotify playlist link.
- Open up the WordPress site that you wish to put the playlist into
- Using the Classic Editor – simply paste the link to where you want the playlist to sit
- Using the Blocks Editor – click on Embed>Spotify. The editor will ask you to paste the Playlist link.
- Publish your work
Note: this method did not work for us, the player didnt render on the front end.
Method 2: Use a WordPress Spotify Plugin.
We came across a numbr of them here: https://wordpress.org/plugins/tags/spotify/
We didnt go with this method as the site is chock full of functionality already – we preferred not to add another plugin
Method 3: Iframe your playlist
It may sound daunting to the beginner but it is really straight forward.
Copy this code:
<iframe src="https://embed.spotify.com/?uri=spotify:user: your user name here:playlist:your playlist id here" width="300" height="300"></iframe>
- Replace “your user name here” with your Spotify User name.
Note: to get your user name, click on your profile at the top right hand corner, then “Account overview”
2. Replace “our playlist id here” with your actual playlist id. This can be found in your Playlist link:
Copy and Paste the jumble of letters and numbers after …playlist/
So in total, our iframe code will be:
<iframe src="https://embed.spotify.com/?uri=spotify:user: rbu5hdnq93b0nu88nqzizwsmb:playlist:4P0nTID3y5cClEQsnYw3qq" width="300" height="300"></iframe>
Publish the page and you should have your Spotify playlist embeded nicely into you wordpress site.
If you want to change the size of the box that is displayed, you can change the width and height numbers in the code. Note: these are in pixels.