How to add Instagram feed using JavaScript

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.

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

<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!