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.
- 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
REDIRECT_URI with your values:
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.
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
} characters, or Jekyll will try to process them first and your template won't work. See templating.
Need web application development, maintenance for your existing app, or a third party code review?
Velocity Labs can help.Hire us!