Question

更新：

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

我喜欢创建的是＆＃34;加载下12张图片＆＃34;按钮。当我使用＆＃34; max_id =＆＃34;直接在我的网址中它工作正常。

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

这就是我现在所拥有的：

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

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

希望这有帮助！

instagram加载更多按钮

1 个答案: