Get photos from Instagram via API

luke harby

by Dhanck

HTML

<div class="instagram-wrapper"></div>

CSS

body,
.instagram-wrapper {
    margin:0;
    padding:0;
}
.instagram-wrapper a {
    float:left;
    margin:0 1px 1px 0;
    padding:0;
    width:calc(20% - 1px);
}
.instagram-wrapper a:link, 
.instagram-wrapper a:visited {
    opacity:0.7;
    transition: opacity 400ms ease-in-out;
    overflow:hidden;
}
.instagram-wrapper a:hover {
    opacity:1.0;
    transition: opacity 400ms ease-in-out;
}
.instagram-wrapper a img {
    display:block;
	width:100%;
    margin:0;
    padding:0;
}

JavaScript

initInstagramFeed = (function(){
   		var igID = '524223308106'; //lukeharby
	    var igClientID = '37f944b55b27422d973fdea0e1c803cb';
	    var igClientSecret = '1897b131caa24988b6d61ea30531353a';
	    var count = 33; // weird max image?
	    var accessToken = '10054954.1677ed0.c830fee08ea9418a8fa8a795d49364ac';
	    $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/" + igID + "/media/recent/?access_token=" + accessToken + '&count=' + count,
			success: function(data) {
				for (var i = 0; i < count; i++) {
					$(".instagram-wrapper").append("<a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.thumbnail.url +"' /></a>");
				}
				console.log(data);
			},
			error: function(){
				console.log('Something went wrong', data);
			}
		});
    }());