前回記事「Instagram APIでインスタグラムのタイムラインをサイト内に実装する」ではInstagram APIを使ってタイムラインを表示しましたが、その際にタイムラインの情報を取得する方法としてJSON形式で投稿データを取得しています。

今回はJSONのデータに含まれるいろんな情報を取得してタイムラインに表示させるカスタマイズを行なっていきます。

Instagram APIで取得できるJSONデータの中身

前回記事でも紹介していましたソースコードの中にJSONファイルの参照先があります。

https://api.instagram.com/v1/users/self/media/recent/?access_token=***********************

このURLの末尾に実際のアクセストークンを入力するとJSONデータとして返ってきて中身が確認できます。返ってきたJSONの中身を一部確認してみますと、

{
   "data": [
     {
       "attribution": null, 
       "caption": {
       "created_time": "1234567890", 
       "from": {
         "full_name": "", 
         "id": "1234567890", 
         "profile_picture": "https://scontent.cdninstagram.com/*********.jpg", 
         "username": "USER_NAME"
       }, 
       "id": "1234567890", 
       "text": "#huntgramjapan #bird #colorful #photo #yellow #green #cute #pretty #animals"
     }, 
     "comments": {
       "count": 0
     }, 
     "created_time": "1234567890", 
     "filter": "Valencia", 
     "id": "1234567890_1234567890", 
     "images": {
       "low_resolution": {
       "height": 320, 
       "url": "https://scontent.cdninstagram.com/*********.jpg", 
       "width": 320
     }, 
     "standard_resolution": {
       "height": 640, 
       "url": "https://scontent.cdninstagram.com/*********.jpg", 
       "width": 640
     }, 
     "thumbnail": {
       "height": 150, 
       "url": "https://scontent.cdninstagram.com/*********.jpg", 
       "width": 150
     }
     }, 
     "likes": {
       "count": 4
     }, 
     "link": "https://www.instagram.com/************/", 
     "location": null, 
     "tags": [
       "bird", 
       "green", 
       "colorful", 
       "huntgramjapan", 
       "cute", 
       "yellow", 
       "photo", 
       "pretty", 
       "animals"
     ], 
     "type": "image", 
     "user": {
       "full_name": "", 
       "id": "1234567890", 
       "profile_picture": "https://scontent.cdninstagram.com/*********.jpg", 
       "username": "USER_NAME"
     }, 
     "user_has_liked": false, 
     "users_in_photo": []
   }, 
 
〜 以下 略 〜

という形で投稿写真やタグなどいろんな情報が含まれているのが確認できます。これを出力して表示していきます。前回タイムラインを出力させたコードをカスタマイズしていきます。今回いいねのアイコンにはfontawesomeのアイコンを使用しました。

<?php
   $myAccessToken = '******************************';
   $json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$myAccessToken);
   $obj = json_decode($json);
   echo '<ul>';
   foreach($obj->data as $data){
     echo '<li>';
     echo '<img class="thumb" src="'.$data->user->profile_picture.'" alt="USER NAME">';
     echo '<span class="username">'.$data->user->username.'</span>';
     echo '<img class="photo" src="'.$data->images->low_resolution->url.'" alt="photo">';
     echo '<div class="fav"><i class="fa fa-heart" aria-hidden="true"></i>'.$data->likes->count.'</div>';
       foreach($data->tags as $tags){
         echo '<span class="tag">'.$tags.'</span>';
       }
     echo '</li>';
   }
   echo '</ul>';
?>

今回のコードで出力したサンプルはこちらに用意しました。カスタマイズすることでよりアプリっぽく見せることができますね。