OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Instagram APIで取得できるJSONからいろんな情報を表示する

前回記事「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>';
?>
  今回のコードで出力したサンプルはこちらに用意しました。カスタマイズすることでよりアプリっぽく見せることができますね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram