Giter VIP home page Giter VIP logo

instafetch.js's Introduction

Instafetch.js

Build Status Dependency Status

Instafetch.js is a 6KB JavaScript plugin for the Instagram API using fetch instead of jQuery.

Installation

Instafetch.js is available on CDNJS, NPM, Bower, and GitHub.

CDNJS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/instafetch.js/1.5.0/instafetch.min.js"></script>

NPM

npm install --save instafetch.js
require('instafetch.js');

Bower

bower install instafetch.js
<script type="text/javascript" src="path/to/bower_components/instafetch.js/dist/instafetch.min.js"></script>

GitHub

Download the script or the minified version in the dist folder.

<script type="text/javascript" src="path/to/instafetch.min.js"></script>

Usage

The Instagram API uses the OAuth 2.0 protocol, so you're going to need an access token. The easiest way to get your access token is login to Instagram on your browser and generate one on Pixel Union.

<script type="text/javascript">
  instafetch.init({
    accessToken: 'ACCESS TOKEN',
    target: 'instafetch',
    numOfPics: 20,
    caption: false
  });
</script>

Instafetch.js will look for an element with the ID of instafetch by default. The target element can be changed when initializing the plugin.

Options

Name Description Default Value
accessToken Generate this on Pixel Union null
target id of the element to insert the images into 'instafetch'
numOfPics Maximum number of pictures to display 20
caption Whether to generate markup text false
articleClassName ClassName for the article tags null
aClassName ClassName for the a tags null
figureClassName ClassName for the figure tags null
imgClassName ClassName for the img tags null
divClassName ClassName for the div tag of the captions null
pClassName ClassName for the p tag of the captions null
imgLazyLoad If true, the src of the image is replaced with a data-src, for use with Lazy Loading. (e.g. lazyload) false

Promise Polyfill

Instafetch.js was only 3KB initially, but those 3KB didn't support any version of Internet Explorer. IE will return "Promise is undefined" and the Instagram feed will be empty. Version 1.2 included the ES6-Promise polyfill, which added an extra 7KB just for IE. Version 1.3 removed the ES6-Promise polyfill for another Promise polyfill that only added 3KB.

Changelog

1.5

  • Updated Promise polyfill
  • Fixed bug for returned images without a caption

1.4

  • Updated Fetch-JSONP
  • Switched from ES5 to ES6

1.3

1.2.2

  • Fixed installation instructions for NPM

1.2.1

  • Published different paths on NPM and Bower

1.2

1.1

  • Changed Instagram API endpoint
  • Removed user ID

1.0

  • Initial release

Issues

Please submit any issues here.

License

Instafetch.js is licensed under the MIT License.

instafetch.js's People

Contributors

thomasvaeth avatar jetroid avatar bhague1281 avatar

Stargazers

Evan Ford avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.