Instagram recently released some new features in their latest iPhone App build.

While there are a few unofficial Instagram API’s floating around out there, I thought I’d spend a little time playing with the feed until an official API is released. Below is a fairly simple explanation of converting the Atom feed into a HTML display with some jQuery effects added.

What the Atom Feed Offers

The feed offers links to the following:

• The large 612px by 612px image
• The thumbnail 150px by 150px image
• The image title
• The date posted
• The photo hashtags
• The username of the photographer

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:georss="http://www.georss.org/georss" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Photos tagged as "lomogre" on Instagram</title>
    <link>http://instagr.am</link>
    <description>Photos tagged as "lomogre" on Instagram</description>
    <atom:link href="http://instagr.am/tags/lomogre/feed/recent.rss" rel="self"></atom:link>
    <language>en</language><lastBuildDate>Sun, 30 Jan 2011 12:07:15 -0800</lastBuildDate>
    <item>
      <title>Vinyl Sunday: Hank Mobley - The Flip</title>
      <link>http://distillery.s3.amazonaws.com/media/2011/01/30/4d160443c57641a2bcd5701e93679b2b_7.jpg</link>
      <description><img src="http://distillery.s3.amazonaws.com/media/2011/01/30/4d160443c57641a2bcd5701e93679b2b_7.jpg"/></description>
      <pubDate>Sun, 30 Jan 2011 12:07:15 -0800</pubDate>
      <guid>http://distillery.s3.amazonaws.com/media/2011/01/30/4d160443c57641a2bcd5701e93679b2b_7.jpg</guid>
      <media:title>Vinyl Sunday: Hank Mobley - The Flip</media:title>
      <media:description><img src="http://distillery.s3.amazonaws.com/media/2011/01/30/4d160443c57641a2bcd5701e93679b2b_7.jpg"/></media:description>
      <media:content url="http://distillery.s3.amazonaws.com/media/2011/01/30/4d160443c57641a2bcd5701e93679b2b_7.jpg" width="612" type="image/jpeg" height="612"></media:content>
      <media:thumbnail url="http://distillery.s3.amazonaws.com/media/2011/01/30/4d160443c57641a2bcd5701e93679b2b_5.jpg" width="150" height="150"></media:thumbnail>
      <media:keywords>lomogre,albumart,vinylsunday,vinyl</media:keywords>
      <media:credit role="photographer">lomogre</media:credit>
    </item>
  </channel>
</rss>

What’s Included?

I basically just took a look at what the Atom feed offers by viewing a hashtag at http://instagr.am/tags/[hashtag name]/feed/recent.rss. I chose to use SimplePie to parse the XML and then output the thumbnails and full sized images to be viewed using the jQuery lightBox plugin by Leandro Vieira Pinho.

With the heavy lifting taken care of, here’s what was left:

Parsing the XML Using SimplePie

To start things off, I needed a tag to set the default feed. My username on Instagram is lomogre, so I chose this. I also offered the date format as a variable since it is without a doubt a globally used app.

/* Set the default feed */
$default="lomogre";
/* Set the date format - http://php.net/manual/en/function.date.php */
$dateformat="j M Y";

I’m using the GET method to determine the hashtag I’m parsing the feed of, so I’ll check to see if my GET variable is empty, and if not use my default hashtag. I also need to instantiate my SimplePie object and input some settings before initializing it.

One other important thing to note is the use of the set_cache_location() function, it’s important that this directory is writeable

include('simplepie.inc');
$hashtag=(empty($_GET['hashtag']))?$default:strtolower(trim($_GET['hashtag']));
$feedurl=(get_magic_quotes_gpc())?stripslashes("http://instagr.am/tags/".$hashtag."/feed/recent.rss"):"http://instagr.am/tags/".$hashtag."/feed/recent.rss";
$feed=new SimplePie();
$feed->set_feed_url($feedurl);
$feed->set_item_class();
$feed->enable_cache(true);
$feed->set_cache_duration(3600);
$feed->set_cache_location('cache');
$feed->init();
$feed->handle_content_type();

Preparing for Output

I prefer heredoc for creating my final output, so I have to create a few different variables to hold different chunks of my output.

For each image in the feed, I want to output the following HTML:

<div class="ig_photo">
  <div class="ig_thumb_col">
    <a href="LARGE IMAGE LINK" title="IMAGE TITLE"><img src="THUMBNAIL URL" width="150" height="150" alt="IMAGE TITLE" /></a>
  </div>
  <div class="ig_photo_data_col">
    <h5>IMAGE TITLE</h5>
    <ul>
      <li><strong>Posted:</strong> DATE POSTED</li>
      <li><strong>Photo Hashtags:</strong> <a href="?hashtag=HASHTAG" title="View recent photos on Instagram tagged with HASHTAG">#HASHTAG</a></li>
      <li><strong>Instagram User:</strong> USERNAME</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

Using available SimplePie functions, I’m able to pull all the necessary data to create this output.

$output="<div id=\"ig_results\">"."\n";
if($feed->data){
  $items=$feed->get_items();
  $output.="  <h2>".$feed->get_description()."</h2>";
  $output.="  <p class=\"ig_feed_quantity\">Displaying ".$feed->get_item_quantity()." most recent entries. <span class=\"ig_instruct\">(Click a thumbnail to view a larger image.)</span></p>"."\n";
  foreach($items as $item){
    $permalink=$item->get_permalink();
    $title=$item->get_title();
    $nodoubletitle=str_replace("\"","'",$title);
    $date=$item->get_date($dateformat);
    $id=$item->get_id();
    $hashtags="";
    $thumbnail="";
    $photographer="";
    if($enclosure = $item->get_enclosure(0)){
      foreach ((array) $enclosure->get_keywords() as $keyword){
        $hashtags.="<a href=\"?hashtag=".$keyword."\" title=\"View recent photos on Instagram tagged with ".$keyword."\">#".$keyword."</a>, ";
      }
      $hashtags=substr($hashtags,0,-2);
      $thumbnail.=$enclosure->get_thumbnail();
      foreach ((array) $enclosure->get_credits() as $credit){
        $photographer=$credit->get_name();
      }
    }
    $output.=<<<HTML
  <div class="ig_photo">
    <div class="ig_thumb_col">
      <a href="$id" title="$nodoubletitle"><img src="$thumbnail" width="150" height="150" alt="$title" /></a>
    </div>
    <div class="ig_photo_data_col">
      <h5>$title</h5>
      <ul>
        <li><strong>Posted:</strong> $date</li>
        <li><strong>Photo Hashtags:</strong> $hashtags</li>
        <li><strong>Instagram User:</strong> $photographer</li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>\n
HTML;
  }
}

I put in an else statement in case there are no photos for the feed and added a form that searches for a hashtag feed input by the user.

else {
  $output.="  <h2>".$hashtag." returned zero results.</h2>"."\n";
}
$output.=<<<HTML
  <form action="" method="get" id="ig_form">
    # <input type="text" name="hashtag" id="hashtag" class="text" value="Type a Hashtag to Search" />
    <input type="submit" value="Search »" class="submit" />
  </form>
</div>\n
HTML;

After all this, I just echo the output in the HTML body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Instagram Feed for Hashtag "<?php echo $hashtag; ?>"</title>
  <link href="css/ig_styles.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
  <script type="text/javascript" src="js/ig_init.js"></script>
</head>
<body>
<?php echo $output; ?>
</body>
</html>

Tags: Instagram, PHP Tutorial, Web Application