Easily Add An Instagram Feed To Jekyll

I've had a Flickr integration on here for years, but don't post there much anymore. Felt it was time to update my photo stream to Instagram.

The process is fairly straightforward, but you'll need a few pieces of information first and a bit of setup.

Your Instagram User ID

You'll need the numeric ID of your Instagram account. I used this tool to find my Instagram User ID. Copy that somewhere, you'll need it soon.

A Registered Instagram Client

Sign into your Instagram account and then head over to register your client. There will be a few required pieces of information to create the client:

Application Name

You can just use your website name.

Description

Something descriptive…

Website URL

Your website's URL.

Valid redirect URIs

Your website's URL, again.

Next, there will be a Security tab at the top. It's easy to miss, but you need to uncheck Disable implicit OAuth. This is important!

Once you've submitted the registration, you should see your client, with a Client ID. You'll need this ID for the next step.

Get Your Access Token

Copy and paste the following URL into your browser, replacing CLIENT_ID and REDIRECT_URI with your values:

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token

If all goes correctly, you should be on your redirect URI and there should be an access token as part of the path. Copy the access token, as you'll need it to make requests to Instagram.

Displaying Images

There's a simple JavaScript library that you can use to display Instagram images, called Instafeed.js. Follow their installation instructions to add the JavaScript to your Jekyll site. You can always refer to the source of this site if you want to see what I did.

Next, add a div with an id of instafeed where you'd like your images to display. Regenerate your Jekyll site and viola, Instagram images! Style them as you like.

By default, it will return the latest 20 images, which for my purposes, was more than enough. You can see my photos page here.

One thing to note, that caused me some trouble. If you want to use a different template to display your images, be sure to escape the { and } characters, or Jekyll will try to process them first and your template won't work. See templating.

---

• ← Previous Post
• Next Post →

---