Add Instagram Photos To Your Website Using instafeed.js

Category: Javascript , Recommended , Social Media | June 2, 2021
Author:stevenschobert
Views Total:4,354 views
Official Page:Go to website
Last Update:June 2, 2021
License:MIT

Preview:

Add Instagram Photos To Your Website Using instafeed.js

Description:

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:

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.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

You Might Be Interested In:


3 thoughts on “Add Instagram Photos To Your Website Using instafeed.js

    1. CSS Script Post author

      I double-checked the library and it worked fine. Did you insert your own Instagram token into the accessToken option?

      Reply
  1. soberer

    I was able to make the load more work on v1… but not anymore with v2.. is a documentation about this?

    $(‘#instaload’).on(‘click’, function() {
    feed.next();
    });

    Reply

Leave a Reply