Spotify widgets

Use a shortcode to embed a Spotify widget in your Hugo site. Available widgets include artist, playlist, album, track, podcast, and episode.

To get the URL of a Spotify item:

  1. Log in to Spotify

  2. Locate the artist, playlist, album, track, podcast, or episode

  3. Click on the ellipsis next to the item

    Spotify item ellipsis
  4. Choose Share > Copy link

Widgets

Artist

{{< spotify url=https://open.spotify.com/artist/6qGkLCMQkNGOJ079iEcC5k?si=PKeRvIL9TxmernzM2RSCYQ loading=eager >}}

Playlist

{{< spotify url=https://open.spotify.com/playlist/37i9dQZF1DZ06evO3NpPH1 >}}

Album

{{< spotify url=https://open.spotify.com/album/3h7X7RcVxhSNLCCxJ7I9ar?si=yRK97habReW1KhaGXlIImw >}}

Track

{{< spotify url=https://open.spotify.com/track/47LAsDpMZHXbjX6r3piIqK?si=d649b0af936d4df7 >}}

Podcast

{{< spotify url=https://open.spotify.com/show/0dWpNy3iA6Mm3xYaHB2Zi9?si=1efbcdacec344504 >}}

Episode

{{< spotify url=https://open.spotify.com/episode/24yx39nxmZf7LbJTIkVBOG?si=fdcd5ef67d594cd1 >}}

Shortcode

Arguments

url
(string) Required. The URL of the artist, playlist, album, track, podcast, or episode.
useTheme
(bool) Optional. If true, the background color is automatically determined by content. If false, the background color is dark gray (#282828). The default is true.
width
(string) Optional. The width attribute of the iframe element. The default is 100%.
height
(string) Optional. The height attribute of the iframe element. For shows and episodes, the default value is 232px. For other widget types, the default value is 380px.
class
(string) Optional. A class name to add to the class attribute of the iframe element.
id
(string) Optional. The id attribute of the iframe element.
loading
(string) Optional. The loading attribute of the iframe element, either eager or lazy. The default is lazy.

Example

{{< spotify 
  url=https://open.spotify.com/track/6PCUP3dWmTjcTtXY02oFdT?si=576230b575ad4886
  useTheme=false
  width=67%
  height=200px
  class=my-class
  id=my-id
  loading=eager
>}}

Source code

layouts/shortcodes/spotify.html
{{- /* Last modified: 2023-06-30T12:24:14-07:00 */}}

{{- /*
Copyright 2023 Veriphor LLC

Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
*/}}

{{- /*
Renders a Spotify Widget.

Spotify Widgets provide an embeddable view of an album, artist, episode, playlist, podcast, or track for use within your Hugo project.

References:

  - https://developer.spotify.com/documentation/widgets/
  - https://developer.spotify.com/documentation/widgets/terms/
  - https://www.spotify.com/us/legal/privacy-policy/
  - https://support.spotify.com/us/article/gdpr-article-15-information/

@context {string} Inner The content between the opening and closing shortcode tags.
@context {string} InnerDeindent The content between the opening and closing shortcode tags with indentation removed.
@context {string} Name The file name of the shortcode template, excluding the extension.
@context {int} Ordinal The zero-based ordinal of the shortcode on the page, or within its parent shortcode.
@context {page} Page A reference to the page containing the shortcode.
@context {map} Params The parameters specified in the opening shortcode tag.
@context {hugolib.ShortcodeWithPage} Parent The context of the parent shortcode.
@context {text.Position} Position The position of the shortcode within the page content.

@method {any} Get Returns the parameter value for the given key (for named parameters) or position (for positional parameters).
@mathod {bool} IsNamedParams Returns true if the shortcode is called with named instead of positional parameters.
@method {maps.Scratch) Scratch Returns a writable Scratch to store and manipulate data.

@param {string} Params.url The URL of the artist, playlist, album, track, podcast, or episode.
@param {string} [Params.id] The id attribute of the iframe element.
@param {string} [Params.class] A class name to add to the class attribute of the iframe element.
@param {string} [Params.width=100%] The width attribute of the iframe element.
@param {string} [Params.height=232px or 380px] The height attribute of the iframe element. For shows and episodes, the default value is 232px. For other widget types, the default value is 380px.
@param {string} [Params.loading=lazy] The loading attribute of the iframe element.
@param {bool}   [Params.useTheme=true] Render using the Spotify theme? If true, the background color is automatically determined by content. If false, the background color is dark gray (#282828).

@returns {text.HTML} A Spotify Widget.

@example {{< spotify url=https://open.spotify.com/playlist/37i9dQZF1DZ06evO3NpPH1 >}}
*/}}

{{- /* Verify minimum required version. */}}
{{- $minHugoVersion := "0.114.0" }}
{{- if lt hugo.Version $minHugoVersion }}
  {{- errorf "The %s shortcode requires Hugo v%s or later." .Name $minHugoVersion }}
{{- end }}

{{- /* Get context. */}}
{{- $name := .Name }}
{{- $ordinal := .Ordinal }}
{{- $position := .Position }}

{{- /* Set default height for each widget type. */}}
{{- $defaultHeight := dict
  "album" "380px"
  "artist" "380px"
  "episode" "232px"
  "playlist" "380px"
  "show" "232px"
  "track" "380px"
 }}

{{- /* Parse url. */}}
{{- $url := "" }}
{{- with .Get "url" }}
  {{- $url = . }}
{{- else }}
  {{- errorf "The %q shortcode requires a url parameter. See %s" $name $position }}
{{- end }}
{{- $path := (urls.Parse $url).Path }}
{{- $type := index (split $path "/" ) 1 }}

{{- /* Set defaults. */}}
{{- $class := printf "spotify spotify-%s" $type }}
{{- $id := printf "h-sc-%s-%d" $name $ordinal }}
{{- $width := "100%" }}
{{- $height := index $defaultHeight $type }}
{{- $loading := "lazy" }}
{{- $useTheme := 1 }}

{{- /* Get parameters. */}}
{{- with .Get "class" }}
  {{- $class = printf "%s %s" $class . }}
{{- end }}
{{- with .Get "id" }}
  {{- $id = . }}
{{- end }}
{{- with .Get "width" }}
  {{- $width = . }}
{{- end }}
{{- with .Get "height" }}
  {{- $height = . }}
{{- end }}
{{- with .Get "loading" }}
  {{- $loading = . }}
{{- end }}
{{- if isset .Params "useTheme" }}
  {{- if in (slice false "false") (.Get "useTheme") }}
    {{- $useTheme = 0 }}
  {{- end }}
{{- end }}

{{- /* Define attributes map. */}}
{{- $attrs := dict
  "class" $class
  "id" $id
  "style" (printf "width: %s; height: %s; border: none;" $width $height)
  "loading" $loading
  "src" (printf "https://open.spotify.com/embed%s?theme=%d" $path $useTheme)
  "allow" "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  "allowfullscreen" "allowfullscreen"
}}

{{- /* Render. */}}
<iframe
{{- range $k, $v := $attrs }}
  {{- if $v }}
    {{- printf " %s=%q" $k (string $v) | safeHTMLAttr }}
  {{- end }}
{{- end -}}
></iframe>
{{- /**/ -}}
Last modified: