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

Optional Properties

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();
		}
	});
});