How to Add a Playlist to Blogspot

By Ashley Poland

Blogger doesn't offer any gadgets that allow you to easily insert a playlist into your blog, but the HTML/Javascript gadget together with an external service can be used to share your music with your visitors. If your music is available on Spotify, you can create the playlist and then add it to Blogger. If the music you want to use isn't available on Spotify and you have the Web space to host the necessary files, you can use a standalone version of the WordPress Audio Player. If you don't have Web space but want to use files from your computer, another tool available is PodSnack.

Using Spotify

Right-click on the Spotify playlist that you want to add to your blog. Select the "Copy Embed Code" option.

Open your Blogger dashboard and click the "Options" button. Select "Layout."

Click "Add Gadget" where you want the playlist to display. Depending on your Blogger layout, you can add your gadget to the sidebar, the footer or even the header.

Select the "HTML/Javascript" gadget. Paste the Spotify playlist embed code into the widget's Body field. Click "Save" to commit the changes and add the Spotify playlist.

Using PodSnack

Sign in to PodSnack. You can use an email address, Google, Twitter or Facebook to set up an account. The free version will play a short ad before the music starts, shows only the first five tracks of the playlist and plays only five minutes of each track.

Name your playlist, then add tracks to it. PodSnack allows you to add audio from YouTube, your computer or you can record new audio. If you use YouTube videos, be aware that PodSnack will include a thumbnail of the video on supported audio players. Click "Next" when you are ready to proceed.

Choose a visual interface for your playlist, and then modify the settings. You can change the colors, size, volume and whether to show sharing buttons. Click "Finish."

Click "Embed" to get the code.

Go to the layout page on Blogger and add a new HTML/Javascript gadget. Paste the embed code into the HTML box and click "Save."

Using the Standalone WordPress Audio Player

Download the WordPress Audio Player standalone files and upload them to your Web server. You will need to upload two of the files from the ZIP file: "player.swf" and "audio-player.js." You should also upload the audio files that you want to play with the standalone player.

Open a new HTML/Javascript gadget on Blogger. The first bit of Javascript below is intended to be inserted into the head of your document, but it can go first in the gadget.

<script type="text/javascript" src="path/to/audio-player.js"></script>

<script type="text/javascript">
AudioPlayer.setup("", {
width: 290

Replace "" with the path to the two standalone files you uploaded to your Web server. The homepage for the standalone player (link in Resources) details several options you can set up for the player, including the width, whether the background is transparent and the initial volume.

Add the code for the audio player itself, which looks similar to the following:

<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", { soundFile: "" });

To include a playlist of multiple files, you'll need to add the file URLs and follow them with a comma as shown here:

soundFile: ","

Do this for each file that you want to include with the audio player.

Save your gadget and test your player.


Spotify's embedded playlist offers several different options, which are explained in the blog post "Embed a Spotify Play Button on Your Blog, Forum or Website" (link in Resources).