Hugo Instagram Feed

tips & tricks
1

Here is a quick way to render your recent Instagram photos with Hugo’s powerful getJSON function.

Note: This uses the Instagram API that will be deprecated in 2020. The new Instagram Graph is currently open only for business accounts.

First of all you need an Instagram API Access Token. You can find the instructions to generate it over here

Store the token in your site’s config like so:
inst_access = "ACCESS TOKEN"

Then create a partial under /layouts/partials/instafeed.html with the following content:

  {{ $urlPre := "https://api.instagram.com/v1/users/self/media/recent?access_token=" }}
  {{ $id := .Site.Params.inst_access }}
  {{ $inst := getJSON $urlPre $id }}
  {{ range first 5 $inst.data }}
  <li><a href="{{ .link }}" target="_blank"><img src="{{ .images.standard_resolution.url }}" alt="{{ .caption.text }}"></a></li>
      {{ end }}

Note that I am rendering the first 5 most recent photos. You can modify the code snippet so that it fetches up to 20 photos (that’s the Instagram API limit).

Also this solution is static. Meaning that if you upload a new Instagram photo it will not show in the feed until you re-generate your site. There are JS solutions out there for this functionality. But there are also people like me who like to use as little JS as possible. And Hugo makes this possible.

Enjoy!

9 Likes