Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

Add Instagram photos to your website

I came across a really good light-weight plugin to add Instagram photos to your website and this was by using Instafeed.js. No jQuery required, just plain ‘ol javascript.

https://raw.github.com/stevenschobert/instafeed.js/master/instafeed.min.js

How do I set it up?

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>

Instafeed.js also supports AMD/CommonJS:


// AMD
require(["path/to/instafeed"], function(Instafeed) {

});

// CommonJS
var Instafeed = require("instafeed.js");

NPM/Bower

Instafeed.js is also available on NPM and Bower:


npm install instafeed.js      # npm
bower install instafeed.js    # bower

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

and fill it with linked thumbnails. Of course, you can easily change this behaviour using the standard options. Also check out the advanced options and the section on templating for additional customizations.

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 need help with that step, try Googling “How to get an Instagram client ID“.

Standard Options

  • clientId – Required. Your API client id from Instagram.
  • accessToken – A valid oAuth token. Can be used in place of a client ID.
  • target – The ID of a DOM element you want to add the images to.
  • template – Custom HTML template to use for images. See templating.
  • get – Customize what Instafeed fetches. Available options are:
    • popular (default) – Images from the popular page.
    • tagged – Images with a specific tag. Use tagName to specify the tag.
    • location – Images from a location. Use locationId to specify the location.
    • user – Images with a user. Use userId to specify the user. More info here.
  • tagName – Name of the tag to get. Use with get: ‘tagged’.
  • locationId – Unique id of a location to get. Use with get: ‘location’.
  • userId – Unique id of a user to get. Use with get: ‘user’.
  • sortBy – Sort the images in a set order. Available options are:
    • none (default) – As they come from Instagram.
    • most-recent – Newest to oldest.
    • least-recent – Oldest to newest.
    • most-liked – Highest # of likes to lowest.
    • least-liked – Lowest # likes to highest.
    • most-commented – Highest # of comments to lowest.
    • least-commented – Lowest # of comments to highest.
    • random – Random order.
  • links – Wrap the images with a link to the photo on Instagram.
  • limit – Maximum number of Images to add.
  • resolution – Size of the images to get. Available options are:
    • thumbnail (default) – 150×150
    • low_resolution – 306×306
    • standard_resolution – 612×612

Advanced Options

  • before – A callback function called before fetching images from Instagram.
  • after – A callback function called when images have been added to the page.
  • success – A callback function called when Instagram returns valid data. Takes the JSON data as an object argument.
  • error – A callback function called when there is an error fetching images.Takes an error message as a string argument.
  • mock – Fetch data without inserting images into DOM. Use with success callback.
  • filter – A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. See the example below for more information.

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>

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:

  • {{type}} – the image’s type, can be image or video.
  • {{width}} – the image’s width, in pixels.
  • {{height}} – the image’s height, in pixels.
  • {{orientation}} – the image’s orientation, can be square, portrait, or landscape.
  • {{link}} – URL to view the image on Instagram’s website.
  • {{image}} – URL of the image source. The size is inherited from the resolution option.
  • {{caption}} – Image’s caption text. Defaults to empty string if there isn’t one.
  • {{likes}} – Number of likes the image has.
  • {{comments}} – Number of comments the image has.
  • {{location}} – Name of the location associated with the image. Defaults to empty string.
  • {{id}} – Unique ID of the image. Useful if you want to use iPhone hooks to open the images directly in the Instagram app.
  • {{model}} – Full JSON object of the image. If you want to get a property of the image that isn’t listed above you access it using dot-notation. (ex: {{model.filter}} would get the filter used)
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion