What is it?

Instafeed.js is a dead-simple way to add Instagram photos to your website. No jQuery required, just plain 'ol javascript. (see ↑ there?)

downloadcheck out the code

Examples:


Buy Me a Coffee

If you enjoy using Instafeed.js and want to say thanks, you can leave me a small tip. All payments are handled securely through Stripe.

Leave me a tip →


Installation

Setting up Instafeed.js is pretty straight-forward. Just download the script and include it in your HTML:


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

Basic Usage

Here's how easy it is to get all images tagged with #awesome:


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>
      

Instafeed.js with automatically look for a <div id="instafeed"></div> and fill it with linked thumbnails. Of course, you can easily change this behavior using the standard options. Also check out the advanced options and the section on templating for additional customization.


Requirements

The only thing you'll need to get going is a valid client id from Instagram's API. You can easily register for one on Instagram's website.

If you want to get images from a specific user, you will need a valid oAuth token. Using an oAuth token has security risks. Read more here.


Standard Options


Advanced Options

Example Filter (get username + tagged):


<script type="text/javascript">
var feed = new Instafeed({
  get: 'user',
  userId: USER_ID,
  filter: function(image) {
    return image.tags.indexOf('TAG_NAME') >= 0;
  }
});
feed.run();
</script>
      

To see a full list of properties that image has, see this thread on GitHub.


Templating

The easiest way to control the way Instafeed.js looks on your website is to use the template option. You can write your own HTML markup and it will be used for every image that Instafeed.js fetches.


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID',
        template: '<a href="{{link}}"><img src="{{image}}" /></a>'
    });
    feed.run();
</script>
      

Notice the {{link}} and {{image}}? The templating option provides several tags for you to use to control where variables are inserted into your HTML markup. Available keywords are:


Pagination

As of v1.3, Instafeed.js has a .next() method you can call to load more images from Instagram. Under the hood, this uses the pagination data from the API. Additionall, there is a helper .hasNext() method that you can use to check if pagination data is available.

Together these options can be used to create a "Load More" button:


<script type="text/javascript">
var loadButton = document.getElementById('load-more');
var feed = new Instafeed({
  // every time we load more, run this function
  after: function() {
    // disable button if no more results to load
    if (!this.hasNext()) {
      loadButton.setAttribute('disabled', 'disabled');
    }
  },
});

// bind the load more button
loadButton.addEventListener('click', function() {
  feed.next();
});

// run our feed!
feed.run();
</script>
      

Getting images from your User Account

With Instafeed, it is possible to get images from a specific user id:


<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: YOUR_USER_ID,
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>
      

This setup requires an accessToken. Normally, using tokens like this in javascript would be very bad. However, since Instagram provides scoping in their API, you can limit the risk of user impersonation.

Just always make sure your token is set to basic authorization, which only allows GET requests. If you aren't sure what scope your token has, check under your account page.

Don't know your user id or token? Click here to get one.


Change Log