Playing with the Instagram API

http://instagram.com/developer/ All you need is JSONP and a client id

by lovromar

HTML

<form>
    <input type="search" id="search" results="5" placeholder="Search Instagram with a single word e.g. ilovemycat" />
    <input type="submit" />
</form>
<div></div>

SCSS

* {
    box-sizing: border-box;
}
html{
    overflow:hidden;
    height:100%;
}
body {
    padding:2%;
    background-color:#000;
    font-size:12px;
    line-height:18px;
    font-family:Arial;
    max-width:900px;
    height:100%;
    overflow:hidden;
    margin:0 auto;
}
form{
    display:block;
    height:10%;
}
input {
    display:inline-block;
    margin:0 -2px 0 0;
    padding:5px 10px;
    &[type=search] {
        width:75%;
    }
    &[type=submit] {
        width:25%;
    }
}
div {
    margin-top:2%;
    background-color:#333;
    height:88%;
    color:white;
    padding:10px;
    overflow-y:auto;
    img {
        display:inline-block;
        width:49.9%;
        margin:0 0 -5px 0;
        height:auto;
    }
}

JavaScript

if (!window.console) console = {
    log: function () {}
};

var id = "a778c35c48824baca6837071dba766df",
    url = "https://api.instagram.com/v1/tags/{*}/media/recent";

function buildImages(obj) {
    var str = "";
    $.each(obj, function (i, el) {
        str += '<img src="' + el.images.standard_resolution.url + '" />';
    });
    $('div').html(str);
}

$("form").on("submit", function (event) {
    event.preventDefault();
    var query = $('#search').val() || "ilovemycat";
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: url.replace('{*}', query) + "?callback=?",
        data: {
            client_id: id
        },
        success: function (a, b) {
            console.log("SUCCESS", a.data, b);
            if (a.data.length) {
                buildImages(a.data);
            } else {
                $('div').html("Sorry, no results for: " + query);
            }
        },
        error: function (a, b) {
            console.log("FAILURE", a, b);
            $('div').html("Sorry, there has been an error.");
        }
    });
});