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:


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


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:


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