Introduction

In this blog, 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. Log in to your Instagram account
2. Get your Instagram access token. http://instagram.pixelunion.net/
HTML code to display Instagram photos
  1. <div class="container">
  2. <!--display instagram photos-->
  3. <ul id="InstaFeed"></ul>
  4. <!--#END# display instagram photos-->
  5. </div>
Javascript code
  1. $(document).ready(function() {
  2. var token = ""; //your access token here. Visit http://instagram.pixelunion.net/ to get your access token
  3. num_photos = 20; //limit number of photos
  4. $.ajax({
  5. url: 'https://api.instagram.com/users/self/media/recent',
  6. dataType: 'jsonp',
  7. type: 'GET',
  8. data: { access_token: token, count: num_photos },
  9. success: function(data) {
  10. console.log(data);
  11. for (x in data.data) {
  12. $('ul').append('<li><a target="_blank" href="' + data.data[x].link + '"><img src="' + data.data[x].images.low_resolution.url + '"></a></li>');
  13. }
  14. },
  15. error: function(data) {
  16. console.log(data);
  17. }
  18. });
  19. });
Thanks for reading!