How to create a Masonry based Instagram gallery using Instagram API and jQuery?

Instagram, most popular iOS and Android based photo sharing app that have currently some bigger giants (like Google) sharing some amazing pics daily. With its powerful API we can generate some creative and useful features or plugins for websites for more better social integration.

Masonry, a powerful Javascript library used by uncountable designers to create interactive and user friendly layout. Its integration with Instagram will give out a fantastic and amazing gallery based on Masonry layout. To retrieve the images and data of a user, it is necessary to know a bit about Instagram API.
Before driving in have a look at demo.

See the Pen Masonry based Instagram gallery

See the Pen Masonry based Instagram gallery by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

As I mentioned that it is necessary to have outlook of Instagram API and make sure you should have an Instagram account. So to work with it we need following things:

• Instagram Access token
• User Id (of user you want to extract data)
• Masonry

Get Instagram User Id

First, to get User Id go to Jelled.com and put your username and in return it will display your user id.

Get the access token

Second important part to extract user recent media is to get access token. For that go to Instagram developer API console and click on the arrow on left (shown below).

Then select users/{user-id}/media/recent 

Now after selecting it, click on template multiple tab menu and put in your user id. Then click on OAuth 2 in dropdown menu of authentication as shown:

After clicking, a popup will appear so you have to sign-in to your Instagram account. After signing in just click on Send (orange button). The response will contain access token as shown:

All you need to do is to copy the access_token value which is a complex combination of numbers,letters and symbols. Now next we will extract data using user ID and access token, for that we will use the following link

https://api.instagram.com/v1/users/USER_ID/media/recent?access_token=ACCESS_TOKEN&count=25

NOTE: You do not have to get access token again and again for different users, just save it with you so you can use it anywhere in Instagram API for different applications.

Replace USER_ID with the user id and ACCESS_TOKEN with access token you generated and 25 (count ) with how many responses you want in return.

Extract Data Using jQuery

When you will access the link you will get a JSONP data, so you will require to use $.ajax method to extract the required data. So the request will be made something like this one.

$.ajax({
    type: "GET",
    dataType: "jsonp",
    url: "https://api.instagram.com/v1/users/1067259270/media/recent?access_token=567615373.1fb234f.c968f34c56d649d7a518ba9ba40c8e12&count=25",
    success: function (json) {
    // data will be extracted here
    }
});

 In above request I'm extracting data of Google Instagram account, but the problem is that the data is in array so I need to put $.each function for each data.

For this the code will be something like below one:

 $.each(json.data,function(){
// Data will be extracted using this notation  

});

So the final code will be.... 

HTML

<div class='instagram-gallery'></div>

jQuery

<script src='masonry.desandro.com/masonry.pkgd.min.js' type='text/javacsript'/>
$.ajax({
    type: "GET",
    dataType: "jsonp",
    url: "https://api.instagram.com/v1/users/1067259270/media/recent?access_token=567615373.1fb234f.c968f34c56d649d7a518ba9ba40c8e12&count=25",
    success: function (json) {
        $.each(json.data, function () {
            var thisdata = this;
            $('.instagram-gallery').append("<div class='instagram-img'><div class='imagebox'><span class='likes'>" + this.likes.count + "</span><img src='" + this.images.low_resolution.url + "'/></div><div class='instagram-description'><span class='caption'>" + this.caption.text + "</span><span class='author'>" + this.user.full_name + "</span></div></div>");
        });
        var $container = $('.instagram-gallery');
        // initialize
        $container.masonry({
            itemSelector: '.instagram-img'
        });
    }
});

Last Words

This gallery is a simple gallery, you can make some more creative stuff using Instagram vast API and using different plugins. Creativity has no limits, if you find any new idea, our comments are open.