How to Stream Instagram Photos Directly to Website with JavaScript

Introduction

In this post, I will demonstrate how you can stream Instagram photos directly to your website. When you post new photos and videos to Instagram, the script will automatically update with the new content.

First, do the following steps

1. Login to your Instagram account

2. Get your Instagram access token. http://instagram.pixelunion.net/

HTML code to display Instagram photos

<div class="container">  
                <!--display instagram photos-->  
                <ul id="InstaFeed"></ul>  
                <!--#END# display instagram photos-->             
</div>  

Javascript code

$(document).ready(function(){  
var token = ""; //your access token here. Visit http://instagram.pixelunion.net/ to get your access token  
num_photos = 20; //limit number of photos  
$.ajax({  
url: 'https://api.instagram.com/users/self/media/recent',  
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><a target="_blank" href="'+data.data[x].link+'"><img src="'+data.data[x].images.low_resolution.url+'"></a></li>');  
}  
},  
error: function(data){  
console.log(data);  
}  
});  
});  

Thanks for reading!

#javascript #Instagram