Php instagram加载更多按钮_Php_Button_Instagram

Php instagram加载更多按钮

php button instagram

Php instagram加载更多按钮,php,button,instagram,Php,Button,Instagram,更新：目前，我的网站上有一个基本的instagram图像显示我喜欢创建一个“加载下12个图像”按钮。当我直接在我的url中使用“max_id=”时，效果很好有人能给我指一下正确的方向吗这就是我现在拥有的： <style> section.instagram img { float:left; height: 200px; margin: 10px; } </style> <?php $ot

更新：

目前，我的网站上有一个基本的instagram图像显示

我喜欢创建一个“加载下12个图像”按钮。当我直接在我的url中使用“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
    ?>


第1节instagram img{
浮动：左；
高度：200px；
利润率：10px；
}
“alt=”“>

我刚刚完成了一段代码，但我正在使用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>



"); 
} 
nexturl=data.pagination.next_url；
},
错误：函数（数据）{
console.log（数据）
}
});    
//从Instagram加载更多照片
//如果单击“加载更多文本”按钮，它将再次运行代码
//添加接下来的12张照片
$（“#加载更多”）。单击（divFunction）；
函数divFunction（e）{
e、 预防默认值（）；
//instagram的每个请求只能处理33个图像（API就是这样工作的）
$.ajax({
url:nexturl，//我们不需要为此请求指定参数-所有内容都已在url中
数据类型：“jsonp”，
键入：“GET”，
成功：函数（数据）{
对于（数据中的x.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；
交互=data.data[x]。comments.count+data.data[x]。likes.count；
//log（'Image ID:'+img_ID+'Image Link:'+img_Link+'Likes:'+Likes'）；
i++；
$（“#添加数据”）。追加（“喜欢：“+Likes+”
评论：“+Comments+”
总互动：“+Interactions+””）；
}
nexturl=data.pagination.next_url；
控制台日志（tot_nexturl）
},
错误：函数（result2）{
console.log（result2）；
}
});
}

希望这有帮助

请修改你的报价。我更新了我的问题谢谢你的代码。我需要一个没有令牌的提要，但你的代码将是一个完美的起点！没问题，很乐意帮忙，只是检查一下代币的事情，因为我已经有一段时间没有代币了。谢谢你的帖子，它帮了我很多。@SushantVishwas没问题，很乐意帮忙！