How to Embed Spotify Playlists to Your Websites/Blogs

Do you want to share Spotify songs with your friends online or promote your bands online? If so, one of the best ways is to use the Spotify play button. This feature offers a convenient way for users to listen to music directly without the need of using Spotify Web Player or desktop client. It works well on email, Facebook, forum, websites and blogs like Wordpress, Tumblr and so on.

Here we will show you how to embed Spotify playlists to your websites in two fantastic ways.

add spotify to website

Part 1. How to Add and Customize Spotify Playlists, Albums, Songs

It is easy to add Spotify music to your own website or other blogs, forums of which you have access to the Html editing.

Embed Spotify Playlists

Step 1. Locate the songs, playlists which you want to add to your website.

Step 2. Click the "..." icon > Click "Share" > Click "Copy Embed Code" to copy the Html code to the clipboard.

Step 3. Go to the page of your website where you want to add the music and open it with an Html editor such as Dreamweaver. If you are using a blog, you can add a new Widget/Html element. For forums, you can switch to the Html post editor.

Step 4. Paste the code in where you want it and then submit the update.

Step 5. You will see the Spotify play button on the page and click it play directly.

copy embed code

Customize Spotify Play Button

To make the Spotify play button match your website, blogs better, you can also customize the parameters.

1. You can change the item size by the parameters of "width" and "height".

<iframe src="https://open.spotify.com/embed/user/gnaun8mtnwl5dcgjv2hpugkxs/playlist/4lflKxmBKFcFUISWUmbg63" width="280" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

2. Change the theme color of the player as black by adding "&theme=black".

<iframe src="https://open.spotify.com/embed/user/gnaun8mtnwl5dcgjv2hpugkxs/playlist/4lflKxmBKFcFUISWUmbg63&theme=black" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

3. If you want to see the cover instead of the list, you can also add the option "&view=coverart".

<iframe src="https://open.spotify.com/embed/user/gnaun8mtnwl5dcgjv2hpugkxs/playlist/4lflKxmBKFcFUISWUmbg63&view=coverart" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Part 2. Can You Embed Spotify Music without Using Html Code

Although the process to edit the Html code is not difficult, some new users may still not be able to do that. In addition, some blogs, forum just don't provide the option to edit Html code. This means you can't embed the Spotify html code. So can we add Spotify songs without editing Html?

The answer is Yes. Many blog and forum platforms also have the widgets for you to upload audio files directly. You can prepare your Spotify MP3 songs first and then you will be able to browse the files from your local computer. This method is highly recommended if you are not a tech developer.

To prepare your Spotify offline MP3 songs, you can use DRmare Spotify Song Converter for Windows/Mac. It is a well-designed tool with highest performance and reliability. Yet, it provides lifetime free update so that to keep its cutting-edge all the time.

Leading Music Converter for Spotify

drmare spotify music converter
  • Contain all the helpful features such as editing ID3 tags, customize output formats
  • It has the exclusive lossless audio encoding technology and 5X faster acceleration
  • It is at a low price compared to what it has to offer in the market
  • Supports all of the latest Windows & Mac systems with Spotify desktop client

Step by step instruction on how to save Spotify songs offline

Step 1Add the link of your Spotify music
load spotify music
You can drag & drop the tracks, albums you want to use for your websites from Spotify app to DRmare. It supports to convert up to 100 songs at a time.
Step 2Do some customization
customize spotify for website
Next, you can head to the top menu and choose "Preferences" to open the settings. From there, you can set the output format, channel, sample rate, bit rate as well as other parameters.
Step 3Apply the settings
apply the settings
Finally, please click "Convert" to apply all the settings and export the Spotify songs to your local computer.
Step 4Upload Spotify music to a blog
upload audio to tumblr
The instruction varies based on different blogs. Take Tumblr for example, you can login to your Tumblr account first. Then click the "Audio" icon from the dashboard and choose an MP3 file and click "Upload".

Part 3. Q & A

A1: Can I set Spotify to play automatically on website after uploading?

Q: Unfortunately Spotify embed code doesn't support this right now. But you can download Spotify music as MP3, then you can upload it and set it autoplay by other widgets.


A2: What blogs can I upload Spotify songs?

Q: Generally, it supports almost any blogs such as Blogger, Wordpress, Tumblr, Squarespace and much more.


A3: Do you need to login to listen to the music with the Spotify play button?

Q: You can preview 30S without logging in.

Jan 25, 2019 5:14 pm

Posted by Harry Zamorski to Spotify Music Tips

author

Leave a comment