Minimal Instagram Photo Gallery Plugin With jQuery - handlegram

File Size: 5.82 KB
Views Total: 2540
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Instagram Photo Gallery Plugin With jQuery - handlegram

handlegram is a simple-to-use jQuery plugin which uses JSONP to fetch and show recent or popular Instagram photos by user, location or hashtag.

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. Load jQuery library and the jQuery handlegram plugin in the html document.

<script src="//"></script>
<script src="handlegram.jquery.js"></script>

2. The plugin requires handlebars.js for dynamic template processing.

<script src="//"></script>

3. Create the handlebars.js template for your Instagram photo gallery with the following tags:

  • {{image}}: URL of the image source.
  • {{likes}}: Number of likes
  • {{caption}}: Image's caption text
  • {{link}}: URL to view the image on Instagram's website
  • {{username}}: Username
  • {{date}}: Date in format dd/mm/yyyy
<div class="instafeed">
  <script id="instagram-template" type="text/x-handlebars-template">
    {{#each this}}
    <div class="YOUR-CONTAINER">
        <div class="photo-box">
            <div class="image-wrap">
                <a href="{{link}}"><img src="{{image}}" alt=""></a>
            <div class="description">
                <strong>{{likes}} Likes</strong>

4. Initialize the plugin and insert your client ID into the JavaScript. By default, the plugin will get the popular photos from your Instagram account.

    clientId: 'YOUR CLIENT ID HERE',
    template: $('#instagram-template')

5. Customize the plugin with the following options:


  // Instagram Client ID
  clientId: 'YOUR CLIENT ID HERE',

  // 'popular', 'tag', 'location', 'user'
  get: 'popular',

  // requires get: 'tag',
  tagName: null

  // requires get: 'location',
  locationId: null

  // requires get: 'user',
  userId: null

  // 'thumbnail', 'low_resolution', 'tandard_resolution'
  resolution: 'low_resolution',

  // Maximum number of photos
  limit: 10,

  // Callback
  onComplete: null

Change log:


  • Empty caption fix

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