Programmingプログラミングナレッジ

2018.01.11

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>';
?>

 

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

  • このエントリーをはてなブックマークに追加

コメントはこちらから

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】