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="//code.jquery.com/jquery.min.js"></script>
<script src="handlegram.jquery.js"></script>

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

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></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>
            <div class="description">
                <strong>{{likes}} Likes</strong>
                <p>{{username}}</p>
                <small>{{caption}}</small>
                <small>{{date}}</small>
            </div>
        </div>
    </div>
    {{/each}}
  </script>
</div>

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.

$('div.instafeed').handlegram({
    clientId: 'YOUR CLIENT ID HERE',
    template: $('#instagram-template')
});

5. Customize the plugin with the following options:

$('div.instafeed').handlegram({

  // 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:

2016-05-02

• 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.