Spotify/iTunes Integration Research

From my research what seems to be the most common way to put a Spotify/iTunes playlist onto your website is through the use of ‘widgets’. Widgets are dynamic web applications that can be shared essentially from one website to another where the code could be installed.

Spotify Intergration

“If you have direct access to the HTML of a page, and your page is hosted on a website that supports iframes, you can paste the embed code that you get from the Follow Button or Play Button generator directly into the page’s HTML.

You need to paste it into your web page somewhere between the tags <body> and </body>. ”

Using an iframe would be a very straight forward method of playing that particular Spotify widget onto the pianist website I’m building. Simply resize the dimensions within the iframe code once I get it to fit. I do however want it to be responsive so that’s accessible for all users including mobile users.

To do that Spotify have already outlined to just set the iframe size to 100% and they’ve provided further help and examples if I need them.

The widgets change their layout depending on the iframe size.

If you want the widget iframe size to be set to 100%, you can achieve that using CSS. For more info, Google for “fluid iframe”. You can also use > Generic iFrame, and paste the code for the iframe. For a working example, check”


iTunes Integration

iTunes seems to use the iframe model of widgets to install into your site. It even has a customisable builder which is a very handy tool for everyone, not just your average web designer like me.



It is as I thought it was going to be. The use of iframes have been around for a long long time even way back when I started playing around with web design in 1999. It is however slow content as it has to load content from another web server before it loads in our browser which is annoying. Though it can’t be helped.

I’ll simply use the embed codes from the builders provided by both Spotify and iTunes and amend them myself making sure to keep the code responsive for mobile devices.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s