Add Instagram Photos To Your Website Using instafeed.js

Category: Javascript , Recommended , Social Media | May 18, 2020
Author: stevenschobert
Views Total: 5,173
Official Page: Go to website
Last Update: May 18, 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 Images to add. Max of 60.
limit: 30,

// debug mode
debug: false,

// Custom rendering template
template: '<a href="{{link}}"><img title="{{caption}}" src="{{image}}" /></a>',
templateBoundaries: ['{{','}}']

Callbacks & functions.

// transform function
transform: null,

// sort function
sort: null,

// render function
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.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:


Leave a Reply