title: Instagram API pagination
body: <p>I am using the below code which works well at loading all the images that match the #spproject tag. What i'd like to do is load 9 photos at a time and then either load more with ajax or just link to previous/next pages. Problem is i dont quite understand how to do it using the API, can you help?</p>
  
  <p>CODE:</p>
  
  <pre><code>&lt;?PHP
  function get_instagram($next=null,$width=160,$height=160){
  
      if($next == null ) {
          $url = 'https://api.instagram.com/v1/tags/spproject/media/recent?access_token=[TOKEN]&amp;count=10';
      }
      else {
          $url .= '&amp;max_tag_id=' . $next;
      }
  
      //Also Perhaps you should cache the results as the instagram API is slow
      $cache = './'.sha1($url).'.json';
      //unlink($cache); // Clear the cache file if needed
  
      if(file_exists($cache) &amp;&amp; filemtime($cache) &gt; time() - 60*60){
          // If a cache file exists, and it is newer than 1 hour, use it
          $jsonData = json_decode(file_get_contents($cache));
      }else{
          $jsonData = json_decode((file_get_contents($url)));
          file_put_contents($cache,json_encode($jsonData));
      }
  
      $result = '&lt;ul id="instagramPhotos"&gt;'.PHP_EOL;
      if (is_array($jsonData-&gt;data))
      {
          foreach ($jsonData-&gt;data as $key=&gt;$value)
          {
              $result .= '&lt;li&gt;&lt;div class="album"&gt;
          &lt;figure class="frame"&gt;
              &lt;a href="'.$value-&gt;link.'" target="_blank"&gt;&lt;i&gt;&lt;img src="'.$value-&gt;images-&gt;standard_resolution-&gt;url.'" alt="" width="'.$width.'" height="'.$height.'" name="'.$value-&gt;user-&gt;username.'"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/figure&gt;
          &lt;span class="count"&gt;#SPproject&lt;/span&gt;
          &lt;a href="http://www.instagram.com/'.$value-&gt;user-&gt;username.'" target="_blank"&gt;&lt;figcaption class="name"&gt;'.$value-&gt;user-&gt;username.'&lt;/figcaption&gt;&lt;/a&gt;
      &lt;/div&gt;&lt;/li&gt;'.PHP_EOL;
          }
      }
      $result .= '&lt;/ul&gt;'.PHP_EOL;
  
      if(isset($jsonData-&gt;pagination-&gt;next_max_tag_id)) {
          $result .= '&lt;div&gt;&lt;a href="?next=' . $jsonData-&gt;pagination-&gt;next_max_tag_id . '"&gt;Next&lt;/a&gt;&lt;/div&gt;';
      }
  
      return $result;
  }
  ?&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;#SPproject - A worldwide instagram idea&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;link rel="stylesheet" href="normalize.css"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              var totalPhotos = $('#instagramPhotos &gt; li').size();
              $('#result').text('Total tagged images: '+totalPhotos);
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;?=get_instagram(@$_GET['next']);?&gt;
  
          &lt;div id="result"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>website: <a href="http://www.spproject.info/" rel="nofollow">http://www.spproject.info/</a></p>