Add Instagram Photos To Your Website Using instafeed.js

Category: Javascript , Recommended , Social Media | November 11, 2020
Author: stevenschobert
Views Total: 158 views
Official Page: Go to website
Last Update: November 11, 2020
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:

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 accessToken here
    accessToken: 'YOUR_CLIENT_ID'

    // More options here

});

feed.run();

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: ['{{','}}']

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


2 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

Leave a Reply