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. I have my Instagram feed configured here, here’s how I set it up.

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: '623597756',
    clientId: '02b47e1b98ce4f04adc271ffbd26611d',
    accessToken: '623597756.02b47e1.3dbf3cb6dc3f4dccbc5b1b5ae8c74a72',
    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.