StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The JSON object which Instagram is returning contains a pagination variable and in turn, a "next_url" variable. next_url is the API URL you need to call to get the next page of results.</p> <p><a href="http://eduvoyage.com/search-instagram-pagination.html" rel="nofollow">Here is a good tutorial</a> on pagination with Instagram. Also, a tip for the future - don't post your API access codes on the internet...</p> <p>The (revised) code below should be a good starting point for you.</p> <pre><code><?PHP function get_instagram($next=null,$width=160,$height=160){ $url = 'https://api.instagram.com/v1/tags/spproject/media/recent?access_token=[token]&count=9'; if($url !== null) { $url .= '&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) && filemtime($cache) > 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 = '<ul id="instagramPhotos">'.PHP_EOL; foreach ($jsonData->data as $key=>$value) { $result .= '<li><div class="album"> <figure class="frame"> <a href="'.$value->link.'" target="_blank"><i><img src="'.$value->images->standard_resolution->url.'" alt="" width="'.$width.'" height="'.$height.'" name="'.$value->user->username.'"></i></a> </figure> <span class="count">#SPproject</span> <a href="http://www.instagram.com/'.$value->user->username.'" target="_blank"><figcaption class="name">'.$value->user->username.'</figcaption></a> </div></li>'.PHP_EOL;; //$result .= '<li><a href="'.$value->link.'"><img src="'.$value->images->standard_resolution->url.'" alt="" width="'.$width.'" height="'.$height.'" name="'.$value->user->username.'" /></a></li>'.PHP_EOL; } $result .= '</ul>'.PHP_EOL; if(isset($jsonData->pagination->next_max_tag_id)) { $result .= '<div><a href="?next=' . $jsonData->pagination->next_max_tag_id . '">Next</a></div>'; } return $result; } ?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>#SPproject - A worldwide instagram idea</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ var totalPhotos = $('#instagramPhotos > li').size(); $('#result').text('Total tagged images: '+totalPhotos); }); </script> </head> <body> <div id="container"> <?=get_instagram(@$_GET['next']);?> <div id="result"></div> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload