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