Add Spotify Play Button to my Jekyll theme
I like to listen music while I’m writing stuff, so today I decided to embed a Spotify Play Button in my blog. This button will help me to remember, in the future, what I was listening during a post writing.
Adding the Spotify button to my Jekyll theme has been very simple. That’s how I did to introduce this little improvement.
As you can see from my Github profile, this blog stands on the shoulder of Jekyll. Also, I chose an interesting theme named Hydejack that I forked from this Github repository.
Hydejack comes with a set of useful Jekyll configuration parameters allowing to customize page layouts.
Looking at the
_layouts\post.html file, I saw that the current layout of a post page can be affected by specific parameters. These must be written at the top of each Markdown file representing a post. For example, looking at the
.md file of this post itself, you can see the following:
I’ve defined a new custom parameter, named
spotifyTrack, that must contain a Spotify URI reference.
For example, for this post, I am using this:
Adding the button
Then, to display a Spotify Play Button in each blog post page, I’ve simply edited the
_layouts\post.html file of my Hydejack fork by adding the following:
The above snippet, when processed by Jekyll, checks if in the current Markdown file does exist a reference to a parameter named
spotifyTrack. If so, it displays an
iframe containing the Spotify Play Button referring to the specific Spotify URI.
Easy come easy go, the outcome of my tiny improvement is at the bottom of this post!