Instagram API Integration to get Instagram feed to your website

To integrate the Instagram API in your website, you need you have to follow following process

Log in to Instagram and open this page https://instagram.com/developer/clients/manage
Click on the button «Register a New Client».
Then Fill all the Mandatory fields, in Valid Redirect URIs specify your valid redirected URI and click «Register». Then click «Manage» button to obtain both Client ID and Client Secret of your just registered app.
Use the Client ID and Client Secret to generate access token with this link https://rudrastyh.com/tools/access-token. You can find more info there as well.

A Short Introduction about sandbox mode

All newly created apps start in Sandbox Mode
Apps in Sandbox mode have access only to 20 latest media of an access token owner (and sandbox users invited to your app).
To avoid these restrictions you should send your app to approval.

We can get instagram feed in our website by two ways

By User ID
By a Username

How can we get Instagram feed in our website by Using User ID?

Following is the javascript code to get instagram feed into our website by using User ID

var token ='your access token',
userid=3679808080,
 num_photos =5;// how much photos do you want to get
 
$.ajax({
 url:'https://api.instagram.com/v1/users/'+userid+'/media/recent',// or /users/self/media/recent for Sandbox
 dataType:'jsonp',
 type:'GET',
 data:{access_token: token, count: num_photos},
 success:function(data){
 console.log(data);
 for( x indata.data){
 
 }
 },
 error:function(data){
 console.log(data);// send the error notifications to console
 }
});

How can we get Instagram feed in our website by Using Username?

Following is the JavaScript code to get instagram feed into our website by using Username.

var token ='your access token',
 username ='vksbomen',// vksbomen - my username :)
 num_photos =4;
 
$.ajax({// the first ajax request returns the ID of user vksbomen
 url:'https://api.instagram.com/v1/users/search',
 dataType:'jsonp',
 type:'GET',
 data:{access_token: token, q: username},// actually it is just the search by username
 success:function(data){
 console.log(data);
 $.ajax({
 url:'https://api.instagram.com/v1/users/'+data.data[0].id+'/media/recent',// specify the ID of the first found user
 dataType:'jsonp',
 type:'GET',
 data:{access_token: token, count: num_photos},
 success:function(data2){
 console.log(data2);
 for(x in data2.data){
 
 }
 },
 error:function(data2){
 console.log(data2);
 }
 });
 },
 error:function(data){
 console.log(data);
 }
});