jQuery Plugin To Display Instagram Photos On Your Web Page - Instagram Lite

Instagram Lite is a tiny jQuery plugin used to fetch and display recent photos from an Instagram user using Instagram API. The plugin will organize and display the photos in an UL LI based list so you can fully customize the photo layout via CSS as you prefer.

Important Note:

This plugin is broken since Instagram has changed its API. You can now use the Feed Instagram Graph API plugin instead.

How to use it:

1. Include the necessary jQuery library and the jQuery Instagram Lite plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="src/instagramLite.js"></script>

2. Create an UL list for the Instagram widget.

<ul class="images">
</ul>

3. Get a clientID from Instagram API page and insert it into the javascript.

clientID: '199554eb34504658a4770d2859b5a583',

4. Call the plugin on the UL list and specify an username and other useful options.

<script>
$('.images').instagramLite({
username: 'USERNAME',
clientID: 'YOUR API KEY',
});
</script>

5. Available options and callbacks.

$('.images').instagramLite({
  accessToken: null,
  user_id: 'self',
  limit: 10,
  list: true,
  urls: false,
  captions: false,
  date: false,
  likes: false,
  comments_count: false,
  error: function() {},
  success: function() {}
});

6. Sample CSS to beautify the photo list.

ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 200px;
}
ul li img {
display: block;
width: 100%;
height: auto;
}

Change logs:

2018-03-06

• Bugfixed.

2018-03-01

• ES5 -> ES6

2017-06-09

• added user id option

2016-07-12

• updated plugin to use access token instead of client id

2015-10-22

• added comment count

2015-07-17

• updated loadMore to use underscore convention

---

This awesome jQuery plugin is developed by michael-lynch. For more Advanced Usages, please check the demo page or visit the official website.