Skip to content
A responsive Spotify widget to embed music into blog pages
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css cleaned up the CSS a bit Aug 12, 2017
html quick HTML Aug 12, 2017
js initial commit for v 0.0.1 of spotify embed Aug 12, 2017
copy-uri.gif initial commit for v 0.0.1 of spotify embed Aug 12, 2017
embed-gif.gif initial commit for v 0.0.1 of spotify embed Aug 12, 2017
readme.md don't actually need bootstrap Aug 12, 2017

readme.md

Responsive Spotify Widget

A simple widget to embed music into your blog posts. In Action!

Ever miss the good old days of Myspace where you could see what people were listening to? Well, you're in luck because now you can embed music on every page of your site.

The widget itself is very simple and is based off of Spotify's existing embeddable play button so no external API's are required and it should work with almost any CMS, templating language, or as embedded HTML.


Requirements

  • Font Awesome
  • jQuery 😱

Getting Started

Getting started is really easy. You can either choose to clone the repo and take the code you need or go to the files and copy and paste into your existing code. If you are just embedding the HTML, make sure to add in embed URI (see Usage) in whichever widget size you choose to use.

If you are going to be using a CMS or templating language, your development process is going to differ. The general process is as follows:

  1. Copy/Clone the HTML, CSS, & JS files into your project
  2. Declare the embed URI (!!!SPOTIFY_EMBED_URI in the HTML) as a variable in whatever language you are building the widget in.
  3. Declare the blurb (if you want it) as a variable in whatever language you are building the widget in.
  4. That's it!

Usage

Once you are have the code, all you need to do is copy the embed URI from Spotify for any song, album, or playlist. To do this, all you need to do is:

  1. Find the item you want to embed
  2. Right click on it
  3. Click Share
  4. Then click copy URI embed code

After you have the code, just copy it in your preferred CMS or template language and it will embed once you publish!

enter image description here

Editing the Code

If you want to change the colors, position, etc. the CSS is very short and straight forward. All of the JS is in jQuery and could easily be ported/changed to any flavor of JavaScript that you prefer.

You can’t perform that action at this time.