Gatsby remark plugin for embedding Spotify songs, albums, playlists, or artist pages.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.npmignore
LICENSE
index.js
package.json
readme.md
yarn.lock

readme.md

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