Display Instagram Feed on Website with Instafeed.js

In this blog, you’ll learn the simply way to display Instagram post or feed on HTML or dynamic websites with the help of Instafeed.js plugin.

Instafeed.js is a very easiest way to call the Instagram post and display on your HTML design or format.

Download Instafeed.js & installation.

To start, download the Instafeed.js plugin from Github or instafeedjs and include it in your website assets or JS folder.

Install or include js file to your page:

<script type="text/javascript" src="path/to/instafeed.min.js"></script>

Get Instagram Client ID or Access token.

Get the client id & Access token from Instagram developer account.

If you haven’t already, so you follow this link  to get your access token or follow the article …

add image

Create HTML div

After JS Installation or get your Client id or Access token we have to create a div in HTML body tag where we wanna to call or display Instagram post.

<div id="instafeed"></div>

Js Script to call the post.

There’s a host of ways you can implement certain types of feeds, whether you want it to grab your own feed, or search for a specific hashtag. You can read more about doing this in the readme that can be found here  https://github.com/stevenschobert/instafeed.js/blob/master/README.md Anyway, so here’s how we implemented a feed:

var galleryFeed = new Instafeed({
        get: "user",
        userId: xxxxxxxxx, //Paste your user id
        accessToken: "2921981936.23865a4.893659c6c36845bcbfaxxxxxxxxxxxx",
        resolution: "standard_resolution",
        useHttp: "true",
        resolution : "low_resolution",
        limit: 10,
        template: '<a href="{{link}}" class="instagram-feed" ><img src="{{image}}" alt"" /><span>Likes: {{likes}}</span><span>Comment: {{comments}}</span></a>',
       target: "instafeed",
       after: function() {
         // disable button if no more results to load
       },
  });
galleryFeed.run(); 

Let’s break down each line to help make sense of it all.

1. var feed = new Instafeed({ Creates a new instance of Instafeed and wraps it into a variable
2. get: 'user', This is what determines the type of feed we want. In this example we have opted to get our own feed
3. userId: 'xxxxxxxxx', This is the ID you will have gotten from https://smashballoon.com/instagram-feed/find-instagram-user-id/ earlier
4. template: '<a href="{{link}}" class="instagram-feed"><img src="{{image}}" />...</a>', This is basically what the JS is adding to your page, for every image the API is feeding in. You’ll see on mine that I’ve added a class called instagram-feed, which applies the CSS styling I’ve made
5. accessToken: 'xxxxxxxxx' This is generated at http://instagram.pixelunion.net/ – you must be logged into the Instagram account you want to validate before visiting this site as it will ask you to authorise the app before proceeding
6. }); These are the closing tags from var feed new instance
7. galleryFeed.run(); This executes everything

And there you have it — that’s everything you need to do to get a live instagram feed on your site!