Add Instagram Photos To Your Website Using instafeed.js

instafeed.js is a small and simple JavaScript library used to fetch and display photos from Instagram based on the user, tag, popular and location, relying on the Instagram API.

Examples:

• Hemeon.com
• VinThomas.com
• The Kozik Cocoon

How to use it:

1. Include the instafeed.js script on your html page.

<script src="instafeed.min.js"></script>

2. Create an empty container to place your Instagram photos.

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

3. Fetch and display Instagram photos inside the container you just created.

var feed = new Instafeed({
    // insert your Instatram accessToken here
    accessToken: 'YOUR_CLIENT_ID'
    // More options here
});
feed.run();

4. Available options.

// access token timeout
accessTokenTimeout: 5000,
// API timeout
apiTimeout: 5000,
// A valid oAuth token. Required to use get: 'user'.
accessToken: 'YOUR_ACCESS_TOKEN'
// The ID of a DOM element you want to add the images to.
target: 'instafeed',
// Set to true fetch data without inserting images into DOM. 
// Use with success callback.
mock: false,
// Maximum number of API requests.
apiLimit: null,
// Maximum number of Images to add. Max of 60.
limit: 30,
// Where you want to add the images.
target: 'instafeed',
// debug mode
debug: false,
// Custom rendering template
template: '<a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></a>',
templateBoundaries: ['{{','}}']

5. Callbacks & functions.

// A custom function to filter images from your results
filter: function(imageData){
  //...
},
// A custom function to transform images before redering
transform: function(imageData){
  //...
},
// A custom function to sort the results
sort: null,
// A custom function to render data
render: null,
// called when Instagram returns valid data. (argument -> json object)
success: null, 
// called when there is an error fetching images. (argument -> string message)
error: null,
// before/after callbacks
before: null,
after: null,
// 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. 
filter: null,

Changelog:

v2.1.0 (06/02/2021)

• Adds {{position}} template helper.

v2.0.0 (06/02/2021)

• Official v2 release

v2.0.0rc3 (11/11/2020)

• Fixes assignment to undeclared variable match bug.
• Adds ES module support by building a separate distributable instafeed.es.min.js.
• Re-adds pagination support via hasNext and next methods.
• Adds apiLimit option to override how many images are requested from the Instagram API. This option supersedes the limit option.
• Adds pooling support when apiLimit is higher than limit.

v2.0.0rc2 (11/11/2020)

• Adds before callback option that was missing from 2.0.0-rc1.
• Fixes Invalid State Error bug in Internet Explorer.
• Hashtags are now parsed from the image caption, and made available as a tags array on the image data.
• Changed default timeout options apiTimeout and accessTokenTimeout from 5000 (5 seconds) to 10000 (10 seconds)

v2.0.0rc1 (05/18/2020)

• Adds before callback option
• Fixes Invalid State Error bug in Internet Explorer
• Hashtags are now parsed from the image caption, and made available as a tags array on the image data.
• Changed default timeout options apiTimeout and accessTokenTimeout from 5000 (5 seconds) to 10000 (10 seconds)

03/30/2020

• Update for latest Instagram API.

11/10/2015

• v1.4.1