JSFiddle - React, Tailwind, and code Playground

by Cory Hughes

HTML

<h1>Instagram Feed for @pumpki</h1>
<ul id="rudr_instafeed"></ul>

CSS

#rudr_instafeed{
  list-style:none  
}
#rudr_instafeed li{
  float:left;
  width:300px;
  height:300px;
  margin:10px
}
#rudr_instafeed li img{
  max-width:100%;
  max-height:100%;
}

JavaScript

var token = '613.8f85ba3.36298ceba05b4e548a55b1c626540f53', // learn how to obtain it below
    userid = 613, // User ID - get it in source HTML of your Instagram profile or look at the next example :)
    num_photos = 20; // 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 in data.data ){
			$('ul').append('<li><img src="'+data.data[x].images.standard_resolution.url+'"></li>');
			// data.data[x].images.low_resolution.url - URL of image, 306х306
			// data.data[x].images.thumbnail.url - URL of image 150х150
			// data.data[x].images.standard_resolution.url - URL of image 612х612
			// data.data[x].link - Instagram post URL 
		}
	},
	error: function(data){
		console.log(data); // send the error notifications to console
	}
});