instagram加載更多按鈕

在這一刻我有一個基本的工作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 
    ?>

來源

2017-07-14 Damenace

請修復您的報價。 –

我更新了我的問題 – Damenace

我剛剛完成，做一個代碼，而是使用JavaScript IM，在這裏它是！

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

希望這會有所幫助！

來源

2017-07-14 19:26:40

謝謝你的代碼。我需要一個沒有令牌的提要，但是你的代碼將是一個完美的起點！ – Damenace

沒問題，很高興幫助，只是檢查一下令牌的事情，因爲我沒有讓它得到沒有令牌u_u飼料一段時間奮鬥的飼料>。< –

感謝您的帖子，它幫助了我很多。 –

instagram加載更多按鈕

回答

相關問題