Instagram Lite

A simple, lightweight jQuery plugin used to display a user's Instagram photos and videos.

Note that you must be the owner of the Instagram account being displayed and that Instagram only allows you to show up to 20 pieces of media.

See a demo

Important Read

This plugin requires a valid access_token issued by Instagram. To get an access token, login to the Instagram Developer site, create an app and hit this URL in your browser (replace CLIENT-ID with your client ID and REDIRECT-URI with your redirect URI):

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token&scope=public_content

Instagram will redirect you to your redirect URL with the access token appended to it. It should look like this:

https://myredireturi.com?access_token=1730464.199554e.e561d1b801d74e35a1453110a44a09e8

Copy the access_token in the URL. This is what you'll need to use the plugin.

Instructions

Include jQuery and the plugin in the head or footer of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<script src="/js/plugins/instagramlite.js"></script>

Create a list with an ID or class that will contain the user's Instagram photos.

<ul class="instagram-lite"></ul>

Initialize the plugin targeting the class, ID or element and pass the function your access token.

$('.instagram-lite').instagramLite({
    accessToken: 'XXXXXXXXXXXXXXXXXXXXX'
});

Required Properties

1. accessToken: string
   A string that defines your access token provided by Instagram.

Optional Properties

1. user_id: string
   A string that defines a user ID (not username). Note that the user must be registered as a Sandbox user in your client. (default: 'self').
2. limit: integer
   An integer that indicates the amount of photos to be returned. If loadMore is set, the limit property will determine how many photos are loaded each time. (default: 10).
3. list: boolean
   A boolean value that indicates whether or not to use list items (default: true).
4. urls: boolean
   A boolean value that indicates whether or not the images should be linked to their page on Instagram (default: false).
5. videos: boolean
   A boolean value that indicates whether or not videos should be displayed (default: false). ^*Note that videos are .mp4 and currently only work in webkit.
6. captions: boolean
   A boolean value that indicates whether or not the photo captions should be displayed (default: false).
7. date: boolean
   A boolean value that indicates whether or not the date of when the photo was taken should be displayed (default: false).
8. likes: boolean
   A boolean value that indicates whether or not the photo like count should be displayed (default: false).
9. comments_count: boolean
   A boolean value that indicates whether or not the photo comment count should be displayed (default: false).
10. error: function()
    A callback function that is triggered after the request if the request is not successful.
11. success: function()
    A callback function that is triggered after the request if the request is sucessful.

Example:

$(function() {
 
    $('.instagram-lite').instagramLite({
        accessToken: 'XXXXXXXXXXXXXXXXXXXXX',
        list: false,
        urls: false,
        success: function(data) {
            console.log(data);
        },
        error: function(data) {
            console.log(data);
            $('.instagram-lite').remove();
        }
    });
});