How To: Instagram API + Fancybox Simplified

api / development / instagram / photos   Posted on Jun 12, 2012 by Nick Rivers

So the last tutorial I posted demonstrated how to render Foursquare checkins on a google map. In this tutorial, I will demonstrate how to display your Instagram photos on your blog or website. Coincidentally, at its core Instagram uses Foursquare's API for associating "venues" with a photo. For example, users can filter photos that were taken at the Eiffel Tower. Click here to download the source files including the javascript and php used to create the product.

Authentication

The first thing we need is an access token. Instagram uses OAuth 2.0 protocol for simple, but effective authentication. I could tell you how to retrieve access tokens but then I'd have to kill you (And everything I've done is documented on Instagram's Developer page). Instead, to make your lives easier, I've provided an easy way for you to attain your access token and user id. Click here to retrieve your access token and user ID.

Instagram has a 5000 request per hour rate limit. This is high in comparison to twitter and similar services so bundling requests to avoid the hitting the limit may not be necessary unless you have high volumes of traffic.

Retrieve Images

Now we are ready to get our images. See the code below to make this happen. In our example, we are using PHP's CURL library to make our requests.

<?php
  function fetchData($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 20);
    $result = curl_exec($ch);
    curl_close($ch); 
    return $result;
  }
  $result = fetchData("https://api.instagram.com/v1/users/ID-GOES-HERE/media/recent/?access_token=TOKEN-GOES-HERE");
  $result = json_decode($result);
  foreach ($result->data as $post) {
    // Do something with this data.
  }
?>	

The Final Product

This uses my Instagram account. As you can see, I pretty much never use it. Click on one of the images below to see the Fancybox integration. Click here to download the source files including the javascript and php used to create the product.

Search the Blog

Blueprint Tweets

RT @jason_springer: Great piece by @agonzalz at @BluePrintTweets: Moving Voters, One Click at a Time http://t.co/NypDukUeEL #Digital #Socia

Friday August 29, 2014

Do #digitalads really move voters to the polls? Here’s what we found. http://t.co/QNWs6T61sW

Wednesday August 27, 2014

Great story on Double Up Food Bucks & @FairFoodNetwork in MI. We're thrilled to be a part of this great program! http://t.co/l6nj71PwNa

Tuesday August 26, 2014

Visit BlueprintTweets ›

Contact Us

202.681.0215

info@blueprintinteractive.com

1155 Connecticut Avenue, NW
Suite 601
Washington, DC 20036

Or submit your info and let us know what we can do for you!