Adding Spotify playlist to your gatsby site

Attention

Possibly outdated

Last updated : 26/April/2020

Follow below steps to setup Spotify Music Player in a Gatsby site,

1. Create a account in Spotify

2. Create a new playlist

3. Search and Add songs to your playlist

4. Go to your homepage in Spotify, click Your Library and then your playlist and then click on the 3 dots(…) and from submenu, copy the playlist link
   

   For me playlist link look like this,
   https://open.spotify.com/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=jN0r2_DTSaal9A92sYf1Vw

   Update the link like below(add /embed/),
   https://open.spotify.com/embed/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=Tg-Dup3iQ7ivdIGo1R5fAQ

   Note : If you miss the above step, you will get to play only 30 seconds of song in Web player

5. Add this to your gatsby mdx file

   import SpotifyPlayer from "./SpotifyPlayer";
    
   <SpotifyPlayer
     uri="spotify:user:Bobby:playlist:0sz2J5ZVROxMv3ZkVMTKuw"
     size="large"
     theme="black"
     view="list"
   />

6. SpotifyPlay.js looks like this ```js:title=content/pages/music/SpotifyPlay.js /**

   • Spotify player iframe widget
   • @author Alexander Wallin office@alexanderwallin.com
   • @see https://developer.spotify.com/technologies/widgets/spotify-play-button/ */

   import React, { Component } from “react”

   // Size presets, defined by Spotify const sizePresets = { large: { width: 300, height: 380, }, compact: { width: 300, height: 80, }, }

   /**

   • SpotifyPlayer class */ class SpotifyPlayer extends Component { // ------------------------------------------------------ // Render // ------------------------------------------------------

     render() { // const { uri, view, theme } = this.props let { size } = this.props

     if (typeof size === string) { size = sizePresets[size] }

     return (

     <iframe title="Spotify" 
             src="https://open.spotify.com/embed/playlist/0sz2J5ZVROxMv3ZkVMTKuw?si=Tg-Dup3iQ7ivdIGo1R5fAQ" 
             width="300" height="380" frameborder="0" allowtransparency="true" 
             allow="encrypted-media">
     </iframe>      
     

     ) } }

   export default SpotifyPlayer ```

All this in Spotify comes under Play Button.

# Resources

• Spotify for Developers : Widgets → Guides