To add pagination, you will need to call the pagination method and then the subsequent requests use the next_id, also fixed the issue with the Strict Standards: Creating default object from empty value... error
A Cleaned up Example
<?php
require_once 'instagram.class.php';
// Initialize class for public requests
$instagram = new Instagram('19a4efd22cc1442d97057bd1083e3385');
// Receive AJAX request and create call object
$tag = !empty($_GET['tag']) ? $_GET['tag'] : 'subarulove';
$maxID = !empty($_GET['next_id']) ? $_GET['next_id'] : 0;
$clientID = $instagram->getApiKey();
$call = new stdClass;
$call->pagination = new stdClass();
$call->pagination->next_max_id = $maxID;
$call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";
// Receive new data
$media = $instagram->pagination($call, 8); //max to load
// Collect everything for json output
$images = array();
foreach ($media->data as $data) {
$images[] = array(
'url' => $data->images->standard_resolution->url,
'thumb' => $data->images->low_resolution->url,
'url' => $data->link,
'likes' => $data->likes->count
);
}
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
header('Content-Type: application/json');
exit(json_encode(array(
'next_id' => $media->pagination->next_max_id,
'images' => $images
)));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Instagram pagination example using jQuery AJAX</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#imore').bind('click', function(){
var request = $.ajax({
url: "./index.php",
type: "GET",
data: { tag: $(this).data('tag'), next_id: $(this).data('next_id') },
dataType: "json"
});
request.done(function( data ) {
$.each(data.images, function(i, src) {
$('<img src="'+data.images[i].thumb+'">').appendTo("div#instphotos");
});
$('#imore').data('next_id', data.next_id);
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<div id="instphotos">
<?php
foreach ($images as $image){
echo '<img src="'.$image['thumb'].'">';
}
?>
</div>
<div id="imore" data-next_id="<?php echo $media->pagination->next_max_id; ?>" data-tag="subarulove">
<a href="Javascript:void(0);">Load more ...</a>
</div>
</body>
</html>