Instagram Stream jQuery Plugin

jQuery plugin that displays latest images from Instagram with addition to text that can be added inside of gallery.

Author: Pixel Industry
Website - pixel-industry.com
Licence - MIT

Description

jQuery plugin that displays latest images from Instagram with addition to text that can be added inside of gallery. You can use it on multiple places across your website. Only thing you need is the username of the account from which you want images to be shown. Plugin now requires access token to fetch images from your account along with Instagram username.

Installation

This plugin needs only two js files to work. You must include them at the bottom of the body in your HTML document. These are:

• jQuery library
• instagram-stream.jquery.js file which is included in the download package.

HTML Structure & jQuery code for Deviantart Feed

<article class="instagram-stream">
<div class="is-text">
    <h1>Some heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget nulla bibendum, ullamcorper sem auctor, vulputate tortor. Ut vitae metus odio. </p>
</div>
</article>

Now enter this js code inside "script" tags at the bottom of the body in your HTML document:

// defaults
jQuery('.instagram-stream').instagramstream({
    limit: 10, // number of images to fetch
    username: 'pixel_industry', // your username
    overlay: true, // add overlay layer of hover effect
    textContainer: '.is-text', // default: '.is-text', pass jQuery object or selector
    textPosition: '4', // place that at this position
    textSize: '1', // size of text e.g. 1 - has size like one image; 2 - has size of two images etc.
    imageQuality: 'standard', // standard | low | thumbnail; standard: 640 x 640px; low: 320 x 320px; thumbnail: 150 x 150px
    accessToken: '' // your access token
});

Notes

• Recent API and Terms changes allows fetching images only from your own account.
• Access Token is now required to fetch images from Instagram account. Guide for generating access token can be found here.
• If you can't get images to appear. Try generating token with URL below:
  

  https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID]&redirect_uri=http://localhost&response_type=token&scope=basic+public_content+follower_list+comments+relationships+likes

CSS Styling

When plugin loads, it makes one unordered list. Inside of it, every image is one list item. To style it, simply refer to for example .instagram-stream li in your css file and edit it the way you like. We also included demo with simple html and css styling for easier plugin understanding.

Change Log

v1.0.3

• Fixed issues with recent API and terms changes.

v1.0.2

• New parameters: "textSize" and "imageQuality" introduced.

v1.0.1

• Image and text size issues fixed.

v1.0

• Initial release