Add Instagram Photos To Your Website Using instafeed.js

Category: Javascript , Social Media | November 10, 2015
Author: stevenschobert
Views Total: 4,807
Official Page: Go to website
Last Update: November 10, 2015
License: MIT


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.


How to use it:

Include the instafeed.js script in your html page.

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

Create an empty container to place your Instagram photos.

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

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

var feed = new Instafeed({

    // insert your Instatram client ID here
    clientId: 'YOUR_CLIENT_ID'

    // More options here


Available options.

// Your API client id from Instagram.
clientId: 'YOUR_CLIENT_ID'

// 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',

// 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 from a user. Use userId to specify the user.
get: 'popular',

// Name of the tag to get. 
// Use with get: 'tagged'.
tagName: 'YOUR_TAG_NAME'

// Unique id of a location to get. 
// Use with get: 'location'.
locationId: 'UNIQUE_ID'

// Unique id of a user to get. 
// Use with get: 'user'.
userId: 'USER_ID'

// Size of the images to get. 
// 'thumbnail', 'low_resolution', 'standard_resolution'
resolution: 'thumbnail',

// Sort the images in a set order.
// 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.
sortBy: 'none',

// Wrap the images with a link to the photo on Instagram.
links: true,

// Set to true fetch data without inserting images into DOM. 
// Use with success callback.
mock: false,

// Maximum number of Images to add. Max of 60.
limit: 30

// By default, image urls are protocol-relative. 
// Set to true to use the standard http://.
useHttp: false

Callback functions.

// called before fetching images from Instagram.
before (function) 

// called when images have been added to the page.
after (function) 

// called when Instagram returns valid data. (argument -> json object)
success (function)

// called when there is an error fetching images. (argument -> string message)
error (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. 
filter (function)



  • v1.4.1

You Might Be Interested In:

Leave a Reply