Consistent "Listen On" Buttons for Podcast Websites

Marcus dePaula

As a website designer, I’ve tried a few different ways of adding the recognizable podcast “listen on…” buttons to client and personal podcast websites. We just launched my wife’s podcast, so I needed to add buttons that would make it easy for her listeners listen to the episodes in their favorite app and subscribe.

The problem is that each app platform has different style guides for their own branding, so if you use the button graphics each of them provide, you end up with a messy looking cluster of buttons of different shapes and colors. Plus, what if you don’t want the buttons to be black? After all, this is my podcast’s website, so I want to follow my own style guide to maintain a consistent user experience that fits my brand. This is just one of the many little details I take time to adjust that demonstrates to my listeners that I care about them.

I downloaded the vector files for each button from Podcast Insight’s very helpful post, “Podcast Badges & Buttons”. If you’re a podcaster and don’t already subscribe to their blog or follow them on Twitter, I highly recommend doing so now! (Although, I will point out that I disagree with Ross on his equipment recommendations.)

I only bothered creating buttons for the top three platforms which covers the vast majority of users: Apple Podcasts, Google Podcasts, and Spotify. Here are quick links to each of those source images and documentation that Ross Winn included in his post:

I used the largest white Spotify vector image as my starting point to paste the graphics and text from each of the other buttons into and resize until they were uniform. You can download a ZIP file of my three white image buttons by clicking the button below:

Download my "Listen On" buttons View fullsize
View fullsize
View fullsize

To simplify things and for maximum browser compatibility, I exported each button as a PNG image. Then I dropped all of them into a Squarespace Gallery Page, adding the appropriate links for each button in the Options tab.

Finally, I added a Summary Block, which pulls the photos from that Gallery Page, to the podcast page header, as well as to the end of each podcast episode page. I use the Summary Block with the Gallery Page so if I ever need to change any of the buttons, I just need to update the one version of images and links in that main Gallery Page, which will show the changes on all those Summary blocks throughout the website.

I got the links for each of the listening platforms from James Cridland’s fantastic PodNews.net website, after a quick search for the name of the podcast I’m working with. Again, if you’re a podcaster and don’t subscribe to his daily newsletter, you should do so right now.

You can see the results on the Book Marketing Simplified and The Photo Untaken podcast websites.

What do you use on your own website for your “listen on” links? Let me know in the comments below or on social media.