Display Instagram Posts on a Webpage with Instafeed.js

Update: 11 Aug 2016

This article has been updated to include a method to show ‘user details’ in each post.

Click here to jump to the update.

Instafeed is a simple javascript plugin that enables you to add Instagram photos to your website.

You’ll need to register your website as an application with Instagram and get an Access Token before you start - Instagram has recently changed the process, but it is quite straight-forward, just follow the steps here.

Setup


I wanted to create an Instagram Feed on my About page - the feed would pull the latest Images with respective URLs from my IG account, I also wanted to show the Like count and Comment count to go with each image.

I decided to use a jekyll include to templatize the feed; that basically means the feed code is seperated form my page code making it easier to update or relocate at a later date.

The include used on my About page:

{% include instafeed.html %}

Installation


  • To start, download the Instafeed.js plugin from Github and include it in your website assets
  • Above the script add <div id="instafeed"></div>, the plugin will automatially look for this element and fill it with your thumbnails.
  • Add a link to the instafeed.html file:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
  • Lastly, we need to add a script that tells the plugin to pull my photos and respective information:
    • userId: This is your unique user identifier, you can check yours here.
    • clientId: Follow this post to get your Client ID.
    • accessToken: Follow this post to get your Access Token.
    • resolution: Controls the size of the image returned - standard_rsolution is the largest size at 612x612px.
    • template: See below.
    • sortBy: Sort the images in a set order.
    • limit: Maximum number of images to display; Note that if your application has not been approved by Instagram the limit is always 20.
    • links: Automatically wrap images with a link to Instagram.
<script type="text/javascript">
  var userFeed = new Instafeed({
    get: 'user',
    userId: '8987997106',
    clientId: '924f677fa3854436947ab4372ffa688d',
    accessToken: '8987997106.924f677.8555ecbd52584f41b9b22ec1a16dafb9',
    resolution: 'standard_resolution',
    template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /><span>{{likes}}{{comments}}</span></a>',
    sortBy: 'most-recent',
    limit: 32,
    links: false
  });
  userFeed.run();
</script>

Adding a Template


The template function allows you to customise the output for each image. A full list of template options are available here.

For my template I wrapped each image inside an <a> tag that linked to the original photo (in a blank window), and included the Like and Comment scores for each photo.

If you are building your site in Jekyll make sure you wrap your template with the {% raw %} and {% endraw %} tags - this prevents the liquid language from being interupted by Jekyll.

Sample Feed


Here is a sample feed, it shows my last 4 Instgram posts

See the Pen Sample Instagram Feed with Instafeed.js by Matthew Elsom (@matthewelsom) on CodePen.

Update: User Details


Need to show your user details? You can use the {{model.user}} fuction to do that.

  • Username: {{model.user.username}}
  • Profile Picture: {{model.user.profile_picture}}
  • Full Name: {{model.user.full_name}}

See the Pen Sample Instagram Feed with Instafeed.js with User Details by Matthew Elsom (@matthewelsom) on CodePen.

If you liked that, try this...
Increasing User Control with Sort and Filter using List.js
Build a Dynamic Table of Contents with jQuery
Display Shots with the Dribbble v2 API