インスタ画像を投稿日が新しい順に表示する方法

MARKLEAPS

2019.04.24

インスタ画像を投稿日が新しい順にサイトに表示する方法

以下の記事でサイトにインスタグラムの画像を表示する方法をご紹介しました。
Instagram APIを使ってサイトにインスタ画像を表示する方法

その際、インスタ画像を投稿日が新しい順に並べることが出来ないという問題点がありました。
以下のように、insta.jsの中身を書き換えることで、
投稿日が新しい順に並べることが出来るようになりました。

■insta.js

$(function(){
    var $container = $(".bs_instagram").text("loading...");
    var html = "";

    $.ajax({
        url: "instagram.php",//PHPファイルURL
        type:"POST",
        dataType: "json"
    })
    
    
    .done(function(data){
        //通信成功時の処理
        $.each(data.data,function(i,item){
            var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
            var link = item.link; //リンクを取得
            // var like = item.likes.count;//いいねの数
            html += '<li class="bs_insta_thumb"><a href="' + link + '"target="_blank"><img src="' + imgurl + '"></a><div class="bs_insta_box"><ul class="bs_insta_link_ul"><li><a href="' + link + '" target="_blank"><img src="pic/00_sns_icon_insta.png" alt="Instagram" /></a></li></ul></div></li>';
        });
    }).fail(function(){
        //通信失敗時の処理
        html = "loading...";
    }).always(function(){
        //通信完了時の処理
        $container.html(html);
    });
});

$(function(){

var $container = $(".bs_instagram").text("loading...");

var html = "";

$.ajax({

url: "instagram.php",//PHPファイルURL

type:"POST",

dataType: "json"

})

.done(function(data){

//通信成功時の処理

$.each(data.data,function(i,item){

var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得

var link = item.link; //リンクを取得

// var like = item.likes.count;//いいねの数

html += '<li class="bs_insta_thumb"><a href="' + link + '"target="_blank"><img src="' + imgurl + '"></a><div class="bs_insta_box"><ul class="bs_insta_link_ul"><li><a href="' + link + '" target="_blank"><img src="pic/00_sns_icon_insta.png" alt="Instagram" /></a></li></ul></div></li>';

});

}).fail(function(){

//通信失敗時の処理

html = "loading...";

}).always(function(){

//通信完了時の処理

$container.html(html);

});

以下の記事を参考にさせていただきました。
Instagram APIのjsonデータを使い、画像を表示させる