インスタグラムのタイムラインをサイトに表示する方法

インスタグラムのタイムラインをサイトに表示する方法をご紹介します。
下記方法を使用すると、アカウント毎のタイムラインを同一ページに張り付けることもできます。

■insta.js内

$(function(){
var $container = $(".instagram");//タイムラインを表示させるボックスを指定
var html = "";

$.ajax({
url: "insta.php",//後述のアクセストークンを設定したphpファイルを指定
type:"POST",
dataType: "json"
})

.done(function(data){
$.each(data.data,function(i,item){
var imgurl = item.images.low_resolution.url;
var link = item.link;
var like = item.likes.count;
html += '<li><a href="' + link + '"target="_blank"><img src="' + imgurl + '"></a><p class="ins_like"><i class="fa fa-heart" aria-hidden="true"></i>' + like + '</p></li>';
});
}).fail(function(){
html = "<li>画像を取得できません。</li>";
}).always(function(){
$container.html(html);
});
});

■insta.php内

<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
//アクセストークン
$access_token = " ここに取得したアクセストークンを入力 ";
$count = 9; //表示件数

echo @file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$access_token."&count=".$count);
exit;
}
?>

 

■タイムラインを表示させるファイル内(index.php等)

<script src="js/insta.js"></script>//insta.jsを読み込み

<ul class="instagram"></ul>//insta.js内で設定したクラス名

関連記事

  1. グーグルマップAPIによるカスタマイズ注意点について(請求項目必須)

  2. ホームページ制作は"お客様も一緒に"作らないと集客のできるサイトはでき…

  3. ネームサーバー、DNSについて (Aレコード編)

  4. 別ページから特定のタブにダイレクトリンクする方法について[jQuery…

  5. sidebar.php ウィジェットを使用しないでオリジナルで制作 カ…

  6. phpバージョンアップに伴うSHIFT-JISサイトの文字化け改善方法…