Instagram API 分页答案

【问题标题】：Instagram API paginationInstagram API 分页
【发布时间】：2013-08-24 17:32:13
【问题描述】：

我正在使用下面的代码，它可以很好地加载与#spproject 标签匹配的所有图像。我想做的是一次加载 9 张照片，然后使用 ajax 加载更多照片，或者只是链接到上一页/下一页。问题是我不太明白如何使用 API 来做，你能帮忙吗？

代码：

<?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]&count=10';
    }
    else {
        $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;
    if (is_array($jsonData->data))
    {
        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 .= '</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>

网站：http://www.spproject.info/

【问题讨论】：

标签： php jquery api instagram

【解决方案1】：

Instagram 返回的 JSON 对象包含一个分页变量和一个“next_url”变量。 next_url 是您需要调用以获取下一页结果的 API URL。

Here is a good tutorial 在 Instagram 上进行分页。另外，对未来的提示 - 不要在互联网上发布您的 API 访问代码...

下面的（修改后的）代码对您来说应该是一个很好的起点。

<?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>

【讨论】：

对访问代码大喊大叫，完全让我忘记了。现在删除它:) 谢谢。当我运行代码时，它显示 9 很好，但是当我单击下一步时，它不会更新照片 :( 这是地址栏中显示的内容：localhost:8888/spproject/?url=https://api.instagram.com/v1/tags/…
啊 - 将 $jsonData->pagination->next_url 替换为 urlencode($jsonData->pagination->next_url) 和 get_instagram(160,160,$_GET['url']) 替换为 get_instagram(160,160,urlencode($_GET['url'])) 是个好主意
2秒，试试吧
好的，我更新了代码，现在它实际上什么也没加载，哈哈
好的，所以错误是由 3 个 = 引起的，删除一个，我们就到了！现在，当我单击下一步时，我得到了这个：localhost:8888/spproject/… 但它会将其输出为 %26 等 html 实体