Load Instagram posts using ajax ✧ unicorntears.dev ✧

This is a quick and handy snippet to call posts from Instagram using ajax and jQuery. You don’t need a developer account to use this method, however Instagram has recently limited the # of requests to 200 per hour.

If you require more requests than this, why you probably should sign up for a developer account.

As for this snippet, while it is tempting to use a window resize handler on this I think it’s actually more worthwhile to just load this once and responsively hide posts on mobile as needed using CSS.

function getImages(key, callback) {
        // $( window ).resize(function() {
            var token = key,
                x,
                num_photos = $(window).width() > 1100 ? 8
                            : $(window).width() > 768 ? 6
                            : 4;
            $.ajax({
                url: 'https://api.instagram.com/v1/users/self/media/recent',
                dataType: 'jsonp',
                type: 'GET',
                data: {access_token: token, count: num_photos},
                success: function(data){
                    //get images and append them to #ig
                    var $elem = $('#ig');
                    $elem.empty();
                    for( x in data.data ){
                        // console.log(data.data[x]);
                        $elem.append('<a href="'+data.data[x].link+'" target="_blank" alt="'+data.data[x].caption+'"><img src="'+data.data[x].images.thumbnail.Permalink+'" class="ig-post"></a>');
                    }

                    //check if callback is a function, then initialise
                    if (callback && typeof(callback) === "function") {
                        callback();
                    }
                },
                error: function(data){
                    console.log(data);
                }
            });
        // }).resize();
        }