Instagram 加载更多按钮答案

【问题标题】：instagram load more buttonInstagram 加载更多按钮
【发布时间】：2017-07-15 03:26:40
【问题描述】：

更新：

此时，我的网站上有一个基本的工作 instagram 图像显示。

我喜欢创建一个“加载下 12 张图片”按钮。当我直接在我的网址中使用“max_id=”时，它工作正常。

有人可以指出正确的方向来完成这项工作吗？

这就是我现在拥有的：

  <style>
    section.instagram img {
    float:left;
    height: 200px;
    margin: 10px;
    }
    </style>

    <?php
    $otherPage = 'nasa';
    $response = file_get_contents("https://www.instagram.com/$otherPage/?__a=1");
    if ($response !== false) {
     $data = json_decode($response, true);
     $userdata = $data['user'];
     $mediadata = $data['user']['media']['nodes'];
     if ($data !== null) { ?>
    <section class="instagram">
    <?php
    $cnt = count($mediadata) > 12 ? 12 : count($mediadata);
    echo $cnt;
    for($i = 0; $i < $cnt; $i++){
    ?>
    <img src="<?php echo $mediadata[$i]['thumbnail_src']; ?>" alt="">
    <?php
    } 
    ?>
    </section>
   <?php  
    } // end of response check
    } // end of data null
    ?>

【问题讨论】：

请修正你的报价。
我更新了我的问题

标签： php button instagram

【解决方案1】：

我刚刚完成了一个代码，但我使用的是 javascript，就在这里！

<!DOCTYPE html>
<html>
<body> 

<p id="add-data"></p> 
<a id="LoadMore" >Load More</a>
<!--Add jquery-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

    <script>
    //Add your token 
    var token = '[your access token]'; 
    //Declare the var to save the nexturl from the API
    nexturl = '';  

    //First call will load at the beginning of the site
    $.ajax({
    //Modify the count value to set how many photos you want to load
            url: 'https://api.instagram.com/v1/users/self/media/recent/?access_token='+ token + '&count=12',
            dataType: 'jsonp',
            type: 'GET',
            data: {access_token: token},
            success: function(data){  
                //Gather The images of the User 
                for(i =0;i < data.data.length ;i++){ 
                    //this variables are just to save the data and simplify you
                    // can also use the data.data[] info instead
                    img = data.data[i].images.low_resolution.url;
                    img_link = data.data[i].link;
                    likes = data.data[i].likes.count; 
                    comments = data.data[i].comments.count; 
                    interactions = data.data[i].comments.count + data.data[i].likes.count;
                    //Appends the variables inside the div 
                    $("#add-data").append("<img src='" + img +"' width='150px' height='150px'> <p>Likes: "+likes+"</p><p>Comments: "+comments+"</p><p>Total Interactions: "+interactions+"</p></div><div class='card-action'><a href='" + img_link + "'>Check Photo</a> "); 
                } 
                    nexturl = data.pagination.next_url; 
            },
            error: function(data){
                console.log(data) 
            }
        });    



    //Load More Photos From Instagram
    //If you click on the Load More text / button / etc it will run again the code 
    //adding the next 12 photos
    $('#LoadMore').click(divFunction); 
    function divFunction(e){ 
                e.preventDefault();  
                //Each request from instagram can handle only 33 Images (that's how the API works')
                $.ajax({
                    url: nexturl, // we don't need to specify parameters for this request - everything is in URL already
                    dataType: 'jsonp',
                    type: 'GET',
                    success: function(data){ 
                        for(x in data.data){
                            img = data.data[x].images.low_resolution.url;
                            img_link = data.data[x].link;
                            likes = data.data[x].likes.count; 
                            comments = data.data[x].comments.count; 
                            interactions = data.data[x].comments.count + data.data[x].likes.count; 
                            //console.log('Image ID: ' + img_id + ' Image Link: ' + img_link + ' Likes: ' + likes); 
                            i ++; 
                            $("#add-data").append("<div class='col s4'><div class='card horizontal'><div class='card-image'><img src='" + img +"' width='150px' height='150px'></div><div class='card-stacked'><div class='card-content'><p >Likes: "+likes+"</p><p>Comments: "+comments+"</p><p>Total Interactions: "+interactions+"</p></div><div class='card-action'><a href='" + img_link + "'>Check Photo</a></div></div></div></div>"); 
                            }
                        nexturl = data.pagination.next_url;
                        console.log(tot_nexturl)
                    },
                error: function(result2){
                console.log(result2);
                }
            });
    } 
    </script>

    </body>
    </html>

希望这会有所帮助！

【讨论】：

感谢您的代码。我需要一个没有令牌的提要，但你的代码将是一个完美的起点！
没问题，很高兴为您提供帮助，只需检查令牌问题，因为我还没有获得提要，而令牌 u_u 已经为此苦苦挣扎了一段时间>。
感谢您的帖子，对我帮助很大。
@SushantVishwas 没问题，很高兴为您提供帮助！