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){ $('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
