Grabbing Instagram pics without using the API

For this here site you're reading this on, I wanted to very simply grab the latest few Instagram pics I'd taken and display them as a background image on the homepage jumbotron. I dug into the Instagram API which seems like it would've worked, but it also would've been overly complex for the situation.

After much Googling, I discovered that by appending ?__a=1 to any Instagram URL, you could get a basic JSON feed of some of that user's pictures. Once I figured that out, this was easy! A tiny jQuery AJAX request got me up and running quickly:

$.ajax({
    url: "https://www.instagram.com/wasson/?__a=1",
  })
  .done(function( data ) {
    $(".homepage.jumbotron .jumbobg")
      .css("background-image","url(" + data.graphql.user.edge_owner_to_timeline_media.edges[Math.floor(Math.random()*10)].node.display_url + ")");
  });

The code should be pretty self-explanatory, but it basically goes through the latest pics, selects on out of the last 10 randomly, and sets a background image based on those pics.

Now I have an easy way to update the background image on the homepage automatically.

← Home