Home

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

IEChromeFirefoxOperaSafari
IE 7+ ✔Latest ✔Latest ✔Latest ✔Latest ✔

License

Instaphotos is licensed under the MIT License.