Ivan Lebanov Full-stack web developer

Ivan lebanov's signature

Spotify API integration with WordPress

Aim.

My goal was to showcase what I am listening to/last song I listened to in Spotify as I am a big user/fan of the platform. If you’re interested in the final code scroll down to the download button.

API.

Spotify’s API is based on REST principle and is pretty straight-forward to use. It does return JSON and seem to be consistent most of the time apart from one exception (read on and find out the bug I found). It does have rate limits. If you get 429 response code then you’ve exceeded the amount you can send at the moment.

Authorization.

Spotify uses the OAuth 2.0 authorization for every single endpoint. You can find out more on authorizing in their article. In a nutshell the user has to sign up in your Spotify app and you will be able to obtain a token. The token does expire after an hour and you have to make an API call to obtain a new one.

Realizing the problem.

It is always a good idea to divide a problem into a several smaller ones and work towards completing them. That might not be always easy but always try to start with that technique. In my case I have to:

  1. Login with my Spotify account
  2. Get the authentication token
  3. Check if the token is valid otherwise get a new one & save it in a field
  4. Make an API call to the endpoint for the current playing song
  5. Visualize the response & style it

Even though that is rather high-level it helps for code structure and to actually be able to resolve the issue.

1. Login with my Spotify account.

Start with googling. Before approaching a problem it is always a good idea to see how people have approached it. In my case I found a good example for a login with Spotify’s web api with node.js. This is my starting point as I only need to get my token once and then call the endpoint to refresh it.

2. Get the authentication token.

First thing you need to worry about is to create the app in Spotify’s developer section. After that you can put your client_id, client_secret & redirect_uri(all have to match with the Spotify app you created). I personally chose the ‘authorization_code’ example so I can refresh my token after that in the background. Serve the app as explained in the example repo from the authorization_code folder.

After you have the authorization code is a good idea to play around with postman.

Having done that I added the option in the WordPress admin.

3. Check if the token is valid otherwise get a new one.

If your API call returns 401 it is Unauthorized so it is time to get a new one. This is made trough the endpoint https://accounts.spotify.com/api/token. The ideal workflow would be that to happen in the background and then to perform the API call to get the current song so the user doesn’t see any difference. Ideally that would be executed in the back-end because it will contain your sensitive information.

4. Make an API call to the endpoint for the currently playing song

In my javascript file I have a few functions.

getNewToken – makes an AJAX call to your WordPress back-end which makes a curl request to get a new token and return the response. On success the function to get the current song is triggered.

getCurrentSong – simply makes an ajax call to the spotify API. On success triggers the function which visualizes the text to the front-end else on error tries to get a new token. Takes one parameter – “newtoken” so it can be used for both cases(when the token is working and when a new one is supplied).

visualise – a function which has the aim to visualise the response. However trough testing I saw that when an ad is playing or you’re playing on the phone with a standard Spotify account an empty response is returned. That’s a potential bug in their code. Just having update to premium /there is currently 0.99 for 3 months offer/ found out that the error doesn’t persist.

5. Visualize the response & style it

The javascript code shows how the data is being put to the view. I personally decided to have the html loaded in the view with a class which hides it on the main section. Styling in my site is minimal so it has not been included in the gist. Use your imagination and tweak the code 🙂

Final verdict & link to gist

It is always fun and educational to work with a new API. Thanks for your time. I hope it was interesting and helpful.
Link to gist.