jQuery Plugin To Create Dynamic Spotify Playlists

A lightweight jQuery plugin that allows you to dynamically add tracks to your Spotify playlist created using Spotify Web API.

How to use it:

1. Place jQuery JavaScript library and the Spotify Add to Playlist jQuery plugin at the end of the html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery_spotify_add_playlist.js"></script>

2. Create a 'Add to playlist' button and use the data-track attribute to specify which song you'd like to add into your Spotify playlist.

<iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A6ToM0uwxtPKo9CMpbPGYvM" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>
<button data-track="3A6ToM0uwxtPKo9CMpbPGYvM">Add This Song to Playlist</button>

3. Style the 'Add to playlist' button whatever you like.

button {
  background-color: #2EBD59;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 4.8% 7%;
}

button:hover {
  background-color: #181818;
  color: #2EBD59;
}

4. Invoke the plugin.

// Click function just used as an example
$('button').click(function(e) {
  // Set Track ID
  var track = $(this).data('track');
  $(this).spotify_add_to_playlist({
    // Playlist Name - can be whatever you like
    playlist_name:'My Funky Playlist',
    // Client ID from your Spotify application in step 2
    client_id:'',
    // Track Spotify ID
    track: track
  });
  e.preventDefault();
});

Change log:

2015-10-27

• update

---

This awesome jQuery plugin is developed by ewillhite. For more Advanced Usages, please check the demo page or visit the official website.