How To Integrate Instagram Into Your Hugo Website

~~This is a quick tutorial to teach you how to integrate your Instagram 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 part:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{ $dataJ := getJSON (printf
"https://api.instagram.com/v1/users/self/media/recent/?access_token=%s"
.Site.Params.access_token) }} {{ range $dataJ.data }}
<a href="{{ .link }}" target="_new">
  <div
    class="cover-card col-sm-4"
    style="background: url({{ .images.standard_resolution.url }}) no-repeat center top;background-size:cover;"
  >
    <p>
      {{ with .caption }} {{ .text }}<br />-<br />
      {{ end }}
      <span class="play-date" data-date="{{ .created_time }}"></span>
    </p>
  </div>
</a>
{{ end }}

On line 1-3 we connect to the Instagram api with 1 parameter:

access token (which you can generate here )

This returns something like:

{
  "pagination": {
    "next_url": "https://api.instagram.com/v1/users/30589186/media/recent?access_token=30589186.1677ed0.04f23d0cd29246d692e1f240b0fd836a\u0026count=1\u0026max_id=1352196774743616727_30589186",
    "next_max_id": "1352196774743616727_30589186"
  },
  "meta": {
    "code": 200
  },
  "data": [
    {
      "attribution": null,
      "tags": ["test", "hugo", "wercker", "ifttt"],
      "type": "image",
      "location": null,
      "comments": {
        "count": 0
      },
      "filter": "Amaro",
      "created_time": "1475414438",
      "link": "https://www.instagram.com/p/BLD981pBazX/",
      "likes": {
        "count": 3
      },
      "images": {
        "low_resolution": {
          "url": "https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/14488341_1365561496789352_8898975373191020544_n.jpg?ig_cache_key=MTM1MjE5Njc3NDc0MzYxNjcyNw%3D%3D.2",
          "width": 320,
          "height": 320
        },
        "thumbnail": {
          "url": "https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/14488341_1365561496789352_8898975373191020544_n.jpg?ig_cache_key=MTM1MjE5Njc3NDc0MzYxNjcyNw%3D%3D.2",
          "width": 150,
          "height": 150
        },
        "standard_resolution": {
          "url": "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14488341_1365561496789352_8898975373191020544_n.jpg?ig_cache_key=MTM1MjE5Njc3NDc0MzYxNjcyNw%3D%3D.2",
          "width": 640,
          "height": 640
        }
      },
      "users_in_photo": [],
      "caption": {
        "created_time": "1475414438",
        "text": "Which one to pick? #test #ifttt #wercker #hugo",
        "from": {
          "username": "alrayyes",
          "profile_picture": "https://scontent.cdninstagram.com/t51.2885-19/11821796_875675509184288_365567230_a.jpg",
          "id": "30589186",
          "full_name": ""
        },
        "id": "17842838194149837"
      },
      "user_has_liked": false,
      "id": "1352196774743616727_30589186",
      "user": {
        "username": "alrayyes",
        "profile_picture": "https://scontent.cdninstagram.com/t51.2885-19/11821796_875675509184288_365567230_a.jpg",
        "id": "30589186",
        "full_name": ""
      }
    }
  ]
}

Lines 3 - 16 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~~ ifttt to trigger a build every time I upload a photo .

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

You really shouldn’t be using products owned by Facebook . Personally I don’t use Instagram anymore, and therefore don’t have a working demo to show. At the time of writing Facebook is closing down the Instagram API so all of this probably won’t work in the not too distant future. ↩︎