Load more image from instagram API giving me same images

Question

I'm using Instagram PHP API with Ajax to get user media stream, it gave me same images per each request.

Here is the page code :

/**
   * Instagram PHP API
   *
   * @link https://github.com/cosenary/Instagram-PHP-API
   * @author Christian Metz
   * @since 20.06.2012
   */

  require_once 'api/instagram.class.php';

  // Initialize class for public requests
  $instagram = new Instagram('CLIENT_ID');


  // Get recently tagged media
  $media = $instagram->getUserMedia(USER_ID, LIMIT_NUMBER);

  // Display first results in a <ul>
  echo "<ul id=\"photos\">";
  foreach ($media->data as $data) {
    echo "<a target=\"_blank\" href=\"{$data->images->standard_resolution->url}\"><li><img src=\"{$data->images->low_resolution->url}\"></li></a>";
  }
  echo "</ul>";

  // Show 'load more' button
  echo "<br><div id='content'><div id='spinner'><img src='/wp-content/themes/tmg/ui/img/spinner.png' id=\"more\" data-maxid=\"{$media->pagination->next_max_id}\"></div></div>";

And it is AJAX.PHP

  /**
   * Instagram PHP API
   *
   * @link https://github.com/cosenary/Instagram-PHP-API
   * @author Christian Metz
   * @since 20.06.2012
   */

  require_once 'api/instagram.class.php';

  // Initialize class for public requests
  $instagram = new Instagram('CLIENT_ID');

  // Receive AJAX request and create call object
  $tag = $_GET['tag'];
  $maxID = $_GET['max_id'];
  $clientID = $instagram->getApiKey();

  $call = new stdClass;
  $call->pagination->next_max_id = $maxID;
  $call->pagination->next_url = "https://api.instagram.com/v1/users/4563432423/media/recent?max_id=436456456456456456&client_id=9089798ayut675675757a";

  // Receive new data
$media = $instagram->getUserMedia('76766456534', 32); 

  // Collect everything for json output
  $images = array();
  foreach ($media->data as $data) {
    $images[] = $data->images->low_resolution->url;
  }

  echo json_encode(array(
    'next_id' => $media->pagination->next_max_id,
    'images'  => $images
  ));

AJAX request

$(document).ready(function() {
  $('#more').click(function() {
    var tag   = $(this).data('tag'),
        maxid = $(this).data('maxid');

    $.ajax({
      type: 'GET',
      url: '<?php bloginfo( 'template_directory' ); ?>/ajax.php',
      data: {
        tag: tag,
        max_id: maxid
      },
      dataType: 'json',
      cache: false,
      success: function(data) {
        // Output data
        $.each(data.images, function(i, src) {
          $('ul#photos').append('<li><img src="' + src + '"></li>');
        });
    });
  });
});

My API request is successful, so what is obvious something in the code is wrong, i'm not very PHP knowledgeable, Anyone has done it before so can help me out with?

Answer 1

When the PHP page is initial rendered to HTML

data-maxid=\"{$media->pagination->next_max_id}

will cause data-maxid to always be the same number (I'm assuming, since this is an ajax request the page doesn't get reloaded).

One solutions would be to have your ajax request's "on complete" callback update the data-maxid attribute.

It look's as though you are passing back the next Id already ( 'next_id' => $media->pagination->next_max_id ), you just need to have the js update the data attribute.

Might look something like this if you are using jQuery:

//ajax onComplete callback
function(result){
   $('#more').data('maxid', result.next_id);
}

Update

I'm not 100% sure but this change may work:

  //this probably shouldn't be static...
  $call->pagination->next_url = "https://api.instagram.com/v1/users/4563432423/media/recent?max_id=" . $maxId . "&client_id=9089798ayut675675757a";
  // Receive new data
  $media = $instagram->pagination($call);

Looking at the PHP library doc , it appears that to page you just pass the original object back into the "pagination" function.

What your doing with $call might contain the necessary fields to complete the request, otherwise it will likely throw an error.