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

1. Log in to Instagram and open this page https://instagram.com/developer/clients/manage
2. Click on the button «Register a New Client».
3. 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.
4. 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){
         $('ul').append('<li> <img src="' + data.data[x].images.low_resolution.url'">+</li>');
  }
 },
 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 rudrastyh
 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){
    $('ul').append('<li> <img src="' + data.data[x].images.low_resolution.url'">+</li>');
    }
   },
   error:function(data2){
    console.log(data2);
   }
  });
 },
 error:function(data){
  console.log(data);
 }
});

How to generate access token?
Follow the below link to generate your access token

https://elfsight.com/blog/2016/05/how-to-get-instagram-access-token/

Source: http://www.cryptextechnologies.com/blogs/instagram-api-integration-feed-to-your-website