Instaphotos
Display Instagram user feed with PHP, jQuery and Handlebars Template.
##Usage
1 - Paste right before your page's closing </body>
tag
<!--[if lt IE 9]> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <![endif]--> <!--[if (gte IE 9) | (!IE)]><!--> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--<![endif]--> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script> <script type="text/javascript" src="/path/to/instagram.min.js"></script>
2 - From within a script tag or a JS file
Instaphotos.init({ template: $('#instagram-template').html(), // The ID of your template container: $('#container'), // domNode to attach to username: 'pinceladasdaweb', // Instagram username count: 12 // Number of photos to display, default 12 });
##Customize Template
1 - To customize the template open the index.html file and look for the following block of code:
<script id="instagram-template" type="text/x-handlebars-template"> {{#each this}} <div class="photo clearfix"> {{#if description}} <a target="_blank" title="{{description}}" href="{{url}}"><img src="{{image}}" alt="{{description}}"></a><span class="heart">{{likes}}</span> {{else}} <a target="_blank" title="{{url}}" href="{{url}}"><img src="{{image}}" alt="{{url}}"></a><span class="heart">{{likes}}</span> {{/if}} </div> {{/each}} </script>
Change the HTML as it deems necessary.
Authentication
In the request.php
file enter your token, you can get one here: http://www.pinceladasdaweb.com.br/instagram/access-token/
Compatibility
IE 7+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
License
Instaphotos is licensed under the MIT License.