Git Product home page Git Product logo

instafeed.js's Introduction

instafeed.js

Instafeed is a dead-simple way to add Instagram photos to your website. No jQuery required, just good 'ol plain javascript.

Installation

Setting up Instafeed is pretty straight-forward. Just download the script and include it in your HTML:

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

Basic Usage

Here's how easy it is to get all images tagged with #awesome:

<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Instafeed with automatically look for a <div id="instafeed"></div> and fill it with linked thumbnails. Of course, you can easily change this behavior using the advanced options.

Requirements

The only thing you'll need to get going is a valid client id from Instagram's API. You can easily register for one on Instagram's website.

If you want to get images from a specific user, you will need a valid oAuth token. Using an oAuth token has security risks. See the section on "Security Considerations"

Advanced Options

  • clientId (string) - Your API client id from Instagram. Required.
  • accessToken (string) - A valid oAuth token. Required to use get: 'user'.
  • get (string) - Customize what Instafeed fetches. Use popular, tagged, location, or user.
  • tagName (string) - Name of the tag to get. Use with get: 'tagged'.
  • locationId (number) - Unique id of a location to get. Use with get: 'location'.
  • userId (number) - Unique id of a user to get. Use with get: 'user'.
  • target (string) - The ID of a DOM element you want to add the images to.
  • links (bool) - Wrap the images with a link to the photo on Instagram.
  • limit (number) - Maximum number of Images to add. Max of 60.
  • resolution (string) - Size of the images to get. Use low_resolution, thumbnail, or standard_resolution.

Security Considerations

With Instafeed, it is possible to get images from a specific user id:

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: YOUR_USER_ID,
        accessToken: 'YOUR_ACCESS_TOKEN'
    });
    userFeed.run();
</script>

This setup requires an accessToken. Normally, using tokens like this in javascript would be very bad. However, since Instagram provides scoping in their API, you can limit the risk of user impersonation.

Just always make sure your token is set to basic authorization, which only allows 'GET' requests. If you aren't sure what scope your token has, check under your account page.

Contributing to Development

This isn't a large project by any means, but I'm definitely welcome to any pull requests and contributions. Everything is written and tested in CoffeeScript.

You can get your copy up and running for development quickly by cloning the repo and running npm:

$ npm install

This will install all the necessary test tools for testing. There is also a Makefile in the repo to make your tests quick and easy:

  • make test will run all the tests using Mocha + Chai + CoffeeLint
  • make min will create the minified version
  • make will run both the previous steps and compile everything

Change Log

  • (v0.1.0) - Initial release

instafeed.js's People

Contributors

stevenschobert avatar

Watchers

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