Display Spotify Episodes on Your Website: Simple API

March 20, 2024
APIs, Developers, PHP, Wordpress
LinkedInTwitterFacebookEmail

If you’re posting your podcasts on Spotify, they already provide a nice little podcast page for you. But if you have a website (and you should, even if it’s simple), you might want to display the latest podcast episodes on your website but integrated into your specific design.

This is fairly simple to create by utilizing Spotify’s API and a little PHP.

The coding below is added into WordPress, inside of the functions.php file, utilizing a shortcode so that you can easily add it anywhere in a WordPress site. The core programming can be easily added to any other coding as well.

Copy & Paste Code

Below is a gist on Github of the entire code inside of a PHP function. Check below for the coding explanation.

How the Spotify API works

The first item you’ll need to edit is the Client ID and Secret. You’ll need the spotify login to get those from the account.

The other item you need is the show ID. You can find this in the URL at the top when you look at the entire show’s URL. For example, when you view your podcast’s page (ie: https://open.spotify.com/show/2xUzg09NLMBmh1HKg9uHpB), the show ID is the string at the end starting with 2x…

The next section you’ll need to look at is line 40, which starts with: <div class=”podcast_row”>

This is where you’ll return the information about the podcast and integrate it with HTML. In this example, you have a row that then has columns in it. I only wanted to show the latest 4, so I use the little counter to stop it when it’s over 4. The podcasts are already ordered by the most recent first.

The link here opens the Spotify page for that podcast episode, but you can do alternative things with that quite easily.

We used the ob_start() and ob_get_clean() to capture the HTML and return it where we want it on the page.

To use this in WordPress, you can simply add the [getSpotify] shortcode anywhere in the page. 

At the bottom of the code, you can print all the results by uncommenting lines 74-76. That will show the entire breakdown of what it gives you, so you can add features – including the podcast image – as you like!

Check out the website we created this on, and how the integration of design can make a huge difference: Live Example

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>