Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-remark-embed-spotify

Embed Spotify songs, playlists, sets, and artist pages in your markdown files!

View a live demo here

Buy Me A Coffee

Install

  1. Install plugin to your site:
yarn add gatsby-remark-embed-spotify
  1. Add gatsby-remark-embed-spotify to your gatsby-transformer-remark plugins in gatsby-config.js:
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-embed-spotify"]
    }
  }
];
  1. Restart gastby.

Usage

## My blog post

This is an example of embedding a single spotify track.
Just type your markdown as you normally do, and then insert a valid
spotify link anywhere to automatically transform it into an embed!

https://open.spotify.com/track/6CnkGSMarTBjIKWuuGXBNl?si=ecMRoa36RnWte3RR7PdJhw

You can also embed albums

https://open.spotify.com/album/3ICWz0kXRrh74cfcS0diek?si=AEK51ar4RI6zNduAVMmI-Q

And playlists!

https://open.spotify.com/user/garetmckinley/playlist/2SmGA6PDALbMzfBwseeDNx?si=CDGId95KQHis8uYipbXLzQ

And artist pages!

https://open.spotify.com/artist/0nLTVC5FExtXgF3RoLh0TH?si=SIPTIBZHTaiODE_WNqB-BA

NOTE: Make sure to copy the link instead of embed code or Spotify URI.

screenshot for share > copy artist link

Configuration

plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-embed-spotify",
          options: {
            width: 800, // default is "100%"
            height: 600 // default is 400
          }
        }
      ]
    }
  }
];

License

MIT

© 2023 Gatsby, Inc.