Instagram API

by Dhanck

HTML

<h1>Instagram</h1>

<div id="info"></div>
<h2>Raw JSON string (for debugging)</h2>

<div id="raw_json"><pre></pre></div>

CSS

#info {
    margin-bottom:2em;
}
#raw_json {
    border:1px solid #333;
    background-color:#ccc;
    padding: 2em;
    word-wrap: break-word;
    margin-bottom: 2em;
}
#parsed_json {
    padding:2em;
    border: 1px solid blue;
}
h2 {
    margin:0;
    padding:0;
    font-weight:normal;
    font-size: 1.3em;
}

JavaScript

var baseURL = 'https://api.instagram.com/v1/';
var method = 'media/popular';
var clientID = 'e0eb0bea7bf144aebfb2fb7dedb1cce1';

var fullUrl = baseURL+method+'?client_id='+clientID;

$.ajax({
  dataType: "jsonp", // IMPORTANT!
  url: fullUrl,
    success: function(response){
        showJSON(response.data[0].images.thumbnail.url);
        for (var i in response.data){
            var img_url = response.data[i].images.thumbnail.url;
            //showJSON(     response.data[0].images.thumbnail);
            //$('#info').append('<li>'+ img_url + '</li>');
            $('#info').append('<img src="' + img_url + '" />');
        }    
    }
});

// TIP: paste the JSON output in http://www.jsoneditoronline.org/ to read it better //
function showJSON(jsonStr){
    $('#raw_json pre').text(JSON.stringify(jsonStr));
}