{"id":371,"date":"2017-05-12T20:00:23","date_gmt":"2017-05-12T20:00:23","guid":{"rendered":"http:\/\/musician.io\/?p=371"},"modified":"2022-01-20T13:34:50","modified_gmt":"2022-01-20T13:34:50","slug":"how-to-put-spotify-playlist-wordpress","status":"publish","type":"post","link":"https:\/\/zeroniche.com\/how-to-put-spotify-playlist-wordpress\/","title":{"rendered":"How to put a Spotify playlist on WordPress"},"content":{"rendered":"\n

Add a Spotify playlist to WordPress and customize it<\/h2>\n\n\n\n

The question of whether Spotify is good or bad for musicians is the topic of another conversation. Spotify is used by millions of people and looks like it\u2019s here to stay despite recent lawsuits<\/a>. If you have your music on Spotify or you have a playlist that you\u2019d like to share with your fans or friends then read on and learn how to embed a Spotify playlist on WordPress<\/strong>.<\/p>\n\n\n\n\n\n\n\n

There are quite a few plugins<\/strong> out there that will perform some of the tasks that I\u2019m about to show you but I always choose a bit of manual coding over a plugin in most cases. Plugins can add a bit of overhead to your site. If you\u2019ve worked in a DAW<\/a> you\u2019ll understand what overhead is. Processing power and bandwidth are things we want to save and not squander. If you spend a bit of time to improve the loading time of our site you will benefit from the results<\/a> in the long run.\n<\/p>\n\n\n\n

\"download<\/figure>
\"Spotify<\/figure><\/a><\/div>\n<\/div>\n\n\n\n

First things first, check your WordPress theme. You want a good solid theme to allow integration of plugins and external JavaScript that may add a bit of load to the download times. Use a fast WordPress theme like Astra<\/a> or GeneratePress<\/a>.<\/p>\n\n\n\n

Getting the playlist URL<\/h2>\n\n\n\n

Here\u2019s something to think about if you\u2019re doubting that an increase in speed will make any difference to your business. Kissmetrics<\/a> posted statistics that claim that ‘If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost you $2.5 million in lost sales every year'.
\nKeep it simple<\/strong>. Now back to the task.<\/p>\n\n\n\n

Spotify\u2019s developer pages don\u2019t explain the steps to embed a playlist in WordPress properly so pay attention folks!<\/p>\n\n\n\n

1. Open up your Spotify App<\/a> <\/strong>on a desktop computer.
\n2. Find your playlist, right-click it (from the sidebar) and select Copy Embed Code<\/strong>.<\/p>\n\n\n\n

\"Spotify
Spotify Playlist Copy Embed Code<\/figcaption><\/figure><\/div>\n\n\n\n

If you have the playlist open in the main pane you can click the circle with the three dots just beside the green Play button and select Copy Embed Code<\/strong> here also.<\/p>\n\n\n\n

\"Spotify
Spotify Playlist Copy Embed Code Full Playlist<\/figcaption><\/figure><\/div>\n\n\n\n

3. Open your WordPress Admin<\/strong>.
\n4. If you plan to put the playlist in the sidebar then click on Appearance<\/strong> > Widgets<\/strong>
\n5. Choose a text widget from the options on the left and send it to the sidebar, footer, or area you\u2019d like the playlist to appear.<\/p>\n\n\n\n

\"Add
Add Text Widget in WordPress<\/figcaption><\/figure><\/div>\n\n\n\n

6. The text widget will appear in its new location and you can now paste the Spotify embed code<\/strong> in the Content:<\/strong> area. There\u2019s no need to put a title as that\u2019s entirely optional.
\n7. Click Save and check your results on the live page.<\/p>\n\n\n\n

\"Add
Add Playlist Embed Code to Widget<\/figcaption><\/figure><\/div>\n\n\n\n

Adding custom styling<\/h2>\n\n\n\n

You\u2019ll notice that the Spotify playlist is a fixed height and that might not be the perfect situation. Maybe you want 20 or 30 songs in your playlist to display. We can fix that with some CSS styles<\/a>.<\/p>\n\n\n\n

Open the WordPress Customizer (Apperance > Customize) and go to Additional CSS.<\/p>\n\n\n\n

Paste this code into the text area and click Publish<\/p>\n\n\n\n

iframe {\n height: 800px;\n width:100%;\n }<\/code><\/pre>\n\n\n\n
This code will change the iframe attributes to make the playlist 800px tall. You can change this value to whatever you want.<\/p>\n\n\n\n
And there you have it. An embedded Spotify playlist in your blog<\/strong> with custom height.<\/p>\n\n\n\n
Make sure that the width of the widget space on your WordPress theme is wide enough to allow the full version of the playlist. I\u2019ve found that if I try to put the playlist in a very narrow sidebar then a compact version of the Spotify player appears and it\u2019s not possible through customization to change this.<\/p>\n\n\n\n
<\/div>\n\n\n\n
\"How<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
Add a Spotify playlist to WordPress and customize it The question of whether Spotify is good or bad for musicians is the topic of another conversation. Spotify is used by millions of people and looks like it\u2019s here to stay despite recent lawsuits. If you have your music on Spotify or you have a playlist that you\u2019d […]<\/p>\n","protected":false},"author":1,"featured_media":390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[167],"tags":[43,83,93],"featured_image_src":"https:\/\/zeroniche.com\/wp-content\/uploads\/2016\/03\/spotify-logo-primary-post-1.jpg","featured_image_src_square":"https:\/\/zeroniche.com\/wp-content\/uploads\/2016\/03\/spotify-logo-primary-post-1.jpg","author_info":{"display_name":"KJ","author_link":"https:\/\/zeroniche.com\/author\/bhixe\/"},"_links":{"self":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/posts\/371"}],"collection":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":0,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/posts\/371\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/media\/390"}],"wp:attachment":[{"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/media?parent=371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/categories?post=371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeroniche.com\/wp-json\/wp\/v2\/tags?post=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}