If you’re running a Hugo site and want to embed Spotify tracks, albums, or playlists easily into your posts, you can create a custom shortcode to streamline the process. Something like this:

I recently came across a helpful gist by j-un, and I’ll walk you through how to use it.

🛠️ Step-by-Step: Create the Spotify Shortcode⌗

1. Create the shortcode file⌗

Navigate to your Hugo site’s root and create the following file:

layouts/shortcodes/spotify.html

2. Add this code to spotify.html⌗ 

{{- $type := .Get "type" | default "track" -}}
{{- $id := .Get "id" -}}

<iframe style="border-radius:12px" 
        src="https://open.spotify.com/embed/{{ $type }}/{{ $id }}?utm_source=generator" 
        width="100%" 
        height="152" 
        frameBorder="0" 
        allowfullscreen="" 
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
        loading="lazy">
</iframe>

This shortcode accepts two parameters: • type: track, album, or playlist • id: the unique Spotify URI or ID

3. Use the shortcode in your Markdown⌗

The Supermen Lovers — Starlight (Radio Edit).

🔍 Finding the Spotify ID

To embed the right item, grab its Spotify URI or share link:

	•	Right-click on a track/album/playlist in the Spotify app or web
	•	Choose “Share” → “Copy Link”
	•	Your link will look like https://open.spotify.com/playlist/1ZB8MpiU0KZP1U9vU2k33d?si=499c9b00517d4ef6
	•	The ID is the last part of the URL: 1ZB8MpiU0KZP1U9vU2k33d?si=499c9b00517d4ef6

{{< spotify type="playlist" id="1ZB8MpiU0KZP1U9vU2k33d?si=499c9b00517d4ef6" width="100%" height="250" >}}

✅ Done!⌗

Now you can quickly embed Spotify content across your Hugo site with a simple shortcode, keeping your markdown clean and your music loud. 🎧