Question

我正在开发一个项目，通过主题标签在相册中显示选择的Instagram照片，因为Instagram API限制每个API调用35个图像我发现我要么必须使用AJAX（我非常穷人）或PHP和AJAX的混合物。我决定使用后者，因为我不希望我的访问令牌和用户ID在我的图库中的代码中可用。

    <?PHP
function jsongram($next=null){
    $userid = "xxx";
    $accessToken = "xxx";
    $url = ("https://api.instagram.com/v1/users/{$userid}/media/recent/?access_token={$accessToken}");

    if($url !== null) {
        $url .= '&max_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));
    }


   ?>

<html>
<head>
</head>
<body>

<?php
    $data_array = array(); 
    foreach ($jsonData->data as $data){
      if (stripos($data->caption->text,'egypt') === false) {
      }
      else{
        $data_array[] = $data;
        $data = (str_split($data->caption->text)); 
        $data = (array_filter($data));  

      }
    }
    foreach ($data_array as $data):{
    $igimglow = $data->images->low_resolution->url;
    $igimgstd = $data->images->standard_resolution->url;
    $igimgthumb = $data->images->thumbnail->url;
    $igcaption = str_replace('#', '', (preg_replace('/(?:#[\w-]+\s*)+$/', '', $data->caption->text)));
    $igtime = date("F j, Y", $data->caption->created_time);
    $iglikes = $data->likes->count;
    $igcomments = $data->comments->count;
    $iglong = $data->location->longitude;
    $iglat = $data->location->latitude ;
    $igusername = $data->user->username;
    $igfullname = $data->user->full_name;
    $iglink = $data->link;
    $igfilter = $data->filter;
    $igtags = implode(',',$data->tags);
    ?>
            <img src="<?php echo ($igimglow);}?>">
            <?php endforeach ?>

<?php

    if(isset($jsonData->pagination->next_max_id)) {
        $result .= '<div><a href="?next=' . $jsonData->pagination->next_max_id . '">Next</a></div>';
    }

    return $result;
}
?>
    <div id="container">
        <?=jsongram(@$_GET['next']);?>
        <div id="result"></div>
    </div>
</body>
</html>

以下是上述代码的实例：

http://johnricedesign.com/examples/pn.php

如上图所示，第2页显示标有“egypt”的照片。我想用“加载更多”按钮替换“下一步”链接以自动加载到同一页面 - 据我所知，使用AJAX是唯一的方法。但是我不知道该怎么做，甚至不知道从哪里开始。我遇到的第二个明显问题是，即使我删除了不包含“埃及”标题的照片，我仍然会获得大量空白，我认为一旦使用AJAX，修复起来会相当简单

在过去的5天里，我一直在试着这样做。你提供帮助，建议和智慧，我们非常感激。

Answer 1

我更改了api以使用client_id而不是access_token。你可以改回来它没有效果。

演示：https://tjay.co/l/instagrampagination

<强> ajax.php

<?php
function jsongram($next = null)
{
  $userid = "xxx";
  $accessToken = "xxx";
  $url = ("https://api.instagram.com/v1/users/{$userid}/media/recent/?client_id={$accessToken}");

  if ( !empty($next) ) {
    $url.= '&max_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 a cache file exists, and it is newer than 1 hour, use it
  if (file_exists($cache) && filemtime($cache) > time() - 60 * 60) {
      $jsonData = json_decode(file_get_contents($cache));
  } else {
    $jsonData = json_decode(file_get_contents($url));
    file_put_contents($cache, json_encode($jsonData));
  }

  return $jsonData;
}

function instaFormat($jsonData)
{
  $data_array = array();
  $response = array();

  foreach($jsonData->data as $data) {
    if ( !empty($data->caption->text) && stripos($data->caption->text, 'egypt') !== false ) { 
        $data_array[] = $data;
        $data = (str_split($data->caption->text));
        $data = (array_filter($data));
      }
  }

  $response['next'] = $jsonData->pagination->next_max_id;

  foreach($data_array as $data) {
      $igimglow = $data->images->low_resolution->url;
      // $igimgstd = $data->images->standard_resolution->url;
      // $igimgthumb = $data->images->thumbnail->url;
      // $igcaption = str_replace('#', '', (preg_replace('/(?:#[\w-]+\s*)+$/', '', $data->caption->text)));
      // $igtime = date("F j, Y", $data->caption->created_time);
      // $iglikes = $data->likes->count;
      // $igcomments = $data->comments->count;
      // $iglong = $data->location->longitude;
      // $iglat = $data->location->latitude;
      // $igusername = $data->user->username;
      // $igfullname = $data->user->full_name;
      // $iglink = $data->link;
      // $igfilter = $data->filter;
      // $igtags = implode(',', $data->tags);

      $response['data'][] = '<img src="'.$igimglow.'">';
  }

  return $response;
}

if ( isset($_POST['next']) ) {
  echo json_encode(instaFormat(jsongram($_POST['next'])));
  die();
}

<强>的index.php

<!doctype html>
<html>
  <body>
    <div data-pictures></div>

    <div><button type="button" data-get-next>Next</button></div>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      jQuery(function($) {
        $(document).on('get-feed', function(e, next_id) {

          var data = {
            next: next_id
          };

          $.post('ajax.php', data, function(response) {
            var container = $('[data-pictures]');
            response = $.parseJSON(response);

            container.html('');
            $('[data-get-next]').attr('data-get-next', response.next);

            $.each(response.data, function(i, val) {
              $(val).appendTo(container);
            });
          });
        });

        $('[data-get-next]').click(function() {
          var next_id = $(this).attr('data-get-next');
          $.event.trigger('get-feed', next_id);
        });

        $.event.trigger('get-feed', 0);
      });
    </script>
  </body>
</html>

加载更多而不是使用分页/ API转到下一页

1 个答案: