Easy Instagram JSON API

Get A Users Feed in JSON
Tagged: developmentWednesday, November 15, 2017

Getting a users Instagram feed in JSON to use on a website

Purpose: I had a fairly simple requirement for my latest website project. Create a carousel from an Instagram Feed to be used on a websites home page. I started out using a handy username/media/ path that returned a JSON feed of that users activity. YAY! Problem was solved until Instagram removed that feature (see issue on stackoverflow ). Granted it was one of those undocumented tricks, so I did not expect it to work forever.

Before going a custom route, I tried some CMS modules

This was for a Drupal website, and although there are a few modules to produce an Instagram feed block, they did not fit our needs. They either ran into synchronization issues, if a picture was later modified or deleted. Or the module was limited in how it displays the photos such that I could not create a carousel.

I finally decided it best to just build the carousel in Javascript, (the site was already using owlCarousel) so I could stop messing around and get exactly the result I wanted. This was now going to involve working the OAuth, even though I just need a simple JSON feed.

Getting Started with the Instagram OAuth 2.0

I will show you how to get an access token so you can get started with their API, this won't be creating some kind of web application. Just the steps to get the token to start grabbing Instagram content.

Creating an Instagram Client

Head on over to www.instagram.com/developer/clients/manage/ and get a Client Started. You may have to use a Mac/Safari browser to create a client, as Instagram really isn't keeping their site up to date, see this stack overflow issue

alt text

Clicking manage client will get you access to your Client ID and Client Secret this will be handy later.

Under the Security Tab add your website as a valid redirect (it needs to be exact).

alt text

Lets Get the Access Token

This is going to feel like an escape room puzzle but bear with me!

Using the Client ID and your website address you added to the security tab. Update the following link https://api.instagram.com/oauth/authorize/?client_id=123456&redirect_uri=https://www.yoursite.com/&response_type=code with your client ID and website.

After you visit that link, you should be redirected to your website with a code at the end of the URL something like this: https://www.yoursite.com/?code=d463396625846578346339662f7b1c save that code you will need it in the next step.

Grab Postman

Head on over to https://www.getpostman.com/ and download the post man app. Its a tool to easily work with APIs and its handy to have and will make the next step easier.

Now using that code we will make a POST back to Instagram and finally be able to get that access token we need. Select POST and click on the body and set it to x-www-form-urlencoded then fill in the key/value pairs with your information. You will need the client id and secret from when you created your client.

alt text

You should receive back a JSON response with your access token. Now you can finally use the Instagram API. That is your access token so protect it and don't just use it in your public JavaScript AJAX calls.

Finally you can make API calls!

Now you should be able to use the access token to grab any users latest posts by following the examples in their docs.

Custom Drupal Module to Save The Feed

Now I forked a Drupal module that would allow me to fetch and save this Instagram feed and not expose my access token. You can find the module on my github https://github.com/NickStees/drupal-cache-external-files. The original module auto-magically created the save location (which always leads to problems) and was originally built for css. So I adjusted it so it can save any file type and I could save it exactly where I wanted it, and even rename it to feed.json so its a static file. Then the Drupal cron will keep this file up to date, while not using up all my API quota calls.

alt text

Ajax the Feed.json to build the Instagram Feed

The next part is just to use javascript to ajax call this feed.json and inject the Instagram feed. Using the below placeholder markup and related javascript (with jQuery) we can inject the Instagram feed into the page.

<div id="banner-insta">
  <div class="container">
    <h2>Instagram Feed</h2>
    <div class="owl-carousel owl-theme" id="banner-insta-target">
      Loading...
    </div>
  </div>
</div>
var instabanner = $("#banner-insta-target");
if (instabanner.length) {
  // assemble unique URL every hour so content is always fresh
  var d = new Date();
  var hrs = d.getHours();
  var day = d.getDate();

  $.get("/sites/default/files/cef/instagram/feed.json?" + day + hrs, function(
    data
  ) {
    instabanner.html(""); // remove Loading.. placeholder text
    var ouputHtml = "";
    var limit = 10;

    // loop over instagram posts and build output
    for (var i = 0; i < limit; i++) {
      var post = data.data[i];
      ouputHtml +=
        '<div class="insta-post"><a href="' +
        post.link +
        '" class="bk-image" style="background-image:url(' +
        post.images.standard_resolution.url +
        ')" alt="' +
        post.caption.text +
        '">';
      ouputHtml += "</a></div>";
    }

    // Take the output and inject it into the page
    // then have owlCarousel turn it into a carousel
    instabanner.html(ouputHtml).owlCarousel({
      autoPlay: 3000, //Set AutoPlay to 3 seconds
    });
  }); //end get
} //end if

Conclusion

In the end this worked out great for my project. I did not have to worry about duplicating data and storing the Instagram content. I do feel the Instagram API is a bit overkill if you just want to display a custom activity feed, but it works out in the end. I do wish they gave out an activity feed that doesn't require an API key, but hey you can't get everything you want!