How To Integrate Last.fm Into Your Hugo Website

This is a quick tutorial to teach you how to integrate your Last.fm feed into your hugo site . To keep things nice and simple I’ve created a demo theme to get you started.

The demo is basically a one-page template. The important:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{ $dataJ := getJSON (printf "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=%s&api_key=%s&format=json&limit=%s" .Site.Params.username .Site.Params.apikey (.Site.Params.limit) ) }}
{{ range $dataJ.recenttracks.track }}
    <a href="{{ .url }}" target="_new">
        <div class="cover-card col-sm-4" style="background: url({{ range last 1 .image }}{{ index . "#text" }}{{ end }}) no-repeat center top;background-size:cover;">
            <p>
                {{ printf "%s - %s" (index .artist "#text") .name }}<br>
                -<br>
                {{ if isset .date "#text" }}<span class="play-date" data-date="{{ (index .date "uts") }}">{{ index .date "#text" }}</span>{{ else }}<span class="play-date" data-date="">Now playing...</span>{{ end }}
            </p>
        </div>
    </a>
{{ end }}

On line 1 we connect to the Last.fm api with 3 parameters:

username
limit (aka how many results do you want with a maximum of 200)
api key (which you can get here )

This returns something like:

{
  "recenttracks": {
    "track": [
      {
        "artist": {
          "#text": "Years Years",
          "mbid": ""
        },
        "name": "1977",
        "streamable": "0",
        "mbid": "",
        "album": {
          "#text": "Communion",
          "mbid": ""
        },
        "url": "https://www.last.fm/music/Years++Years/_/1977",
        "image": [
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/34s/bcf1058b23fb9871695ac9e57582e095.png",
            "size": "small"
          },
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/64s/bcf1058b23fb9871695ac9e57582e095.png",
            "size": "medium"
          },
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/174s/bcf1058b23fb9871695ac9e57582e095.png",
            "size": "large"
          },
          {
            "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/bcf1058b23fb9871695ac9e57582e095.png",
            "size": "extralarge"
          }
        ],
        "date": {
          "uts": "1475601846",
          "#text": "04 Oct 2016, 17:24"
        }
      }
    ],
    "@attr": {
      "user": "alrayyes",
      "page": "1",
      "perPage": "1",
      "totalPages": "175083",
      "total": "175083"
    }
  }
}

Lines 2 - 12 basically just loop through this json and output corresponding html.

The rest of the html is basically styling and using momentjs to generate pretty human-readable datetimes. There is one small caveat though, as the generated site is static you need to rebuild it sporadically to keep the scrobbles up to date. I accomplish this using a cron job to trigger wercker .

That’s all there is to it. The same principle can also be used to integrate Instagram into your site . Hopefully this tutorial was clear and concise enough. If not please let me know in the comments below.