InstagramグラフAPIで取得したJSONデータを整形して自分のインスタグラムの投稿をサイトで表示。

サイト上に自分のInstagramの投稿を表示させるためのJSONデータの取得方法とPHPでのJSONデータの整形方法のメモ。

※ InstagramグラフAPIの有効期限の無いアクセストークンが事前に必要。(取得方法は前の記事を参照。)

1. FacebookページのIDとアクセストークンを使ってInstagramのビジネスアカウントのIDを取得。
2. 取得したビジネスアカウントのIDとアクセストークンを使ってInstagramの投稿のJSONデータを取得。
3. 取得したJSONデータをPHPで整形してHTMLに出力。

インスタグラムのアカウント情報を取得

投稿のJSONデータ取得に必要な「ビジネスアカウントのID」を取得する作業。

情報を取得したいInstagramのアカウントが紐付いた「FacebookページのID」と「無期限アクセストークン」が事前に必要。

(「FacebookページのID」の探し方はFacebookの公式ドキュメント参照。)

Userデータで取得できる「fields」のパラメーターの公式リファレンス。

v9.0で取得できるパラメーター : id,ig_id,username,profile_picture_url,media_count,followers_count,follows_count,name,biography,website

(「id」はインスタグラムビジネスアカウントのID。「ig_id」はインスタグラムアカウントのID。)

$graphapi_url = 'https://graph.facebook.com/';
$facebook_id = 'FacebookページのID';
$fields = '取得したいパラメーター';
$access_token = '無期限アクセストークン';
$data_url = $graphapi_url.$facebook_id.'?fields=instagram_business_account{'.$fields.'}&access_token='.$access_token;

得られたURLをブラウザで直接閲覧するかfile_get_contents()関数などを使ってJSONデータ内の「id」(ビジネスアカウントのID)を確認。

インスタグラムの投稿のJSONを取得

上記の「ビジネスアカウントのID」と「無期限アクセストークン」が事前に必要。

Mediaデータで取得できる「fields」のパラメーターの公式リファレンス。

v9.0で取得できるパラメーター : caption,comments_count,id,ig_id,is_comment_enabled,like_count,media_type,media_url,owner,permalink,shortcode,thumbnail_url,timestamp,username,children,comments,insights

$graphapi_url = 'https://graph.facebook.com/';
$id = 'ビジネスアカウントのID';
$post_num = 10;//取得したい投稿数
$fields_01 = '取得したいアカウントのパラメーター';
$fields_02 = '取得したいメディアのパラメーター';
$access_token = '無期限アクセストークン';

$data_url = $graphapi_url.$id.'?fields='.$fields_01.',media.limit('.$post_num.'){'.$fields_02.'}&access_token='.$access_token;

取得したJSONをPHPで整形

上記の「$data_url」から返されるJSONデータの取得とHTML出力用に整形する作業。

1. cURL()関数を使ってJSONデータを取得する。(cURLが使えないサーバーの場合は、file_get_contents()関数を使う。)
2. 取得したJSONデータを連想配列形式のオブジェクトにデコードして変数に格納する。
3. キーを指定してJSONオブジェクトから値を取得する。
4. メディアタイプを判定して分岐処理。
5. <ul>タグに整形して投稿画像を出力。

※ APIでの読み込み制限があるのか、投稿が動画の場合のデータの読み込みが遅すぎるせいで、video要素に「autoplay」があるとDOMのloadイベントの発火が極めて遅くなる環境があったので、自動再生させる場合はHTMLのマークアップで「autoplay」は付加せずに、JavaScriptのplay()メソッドをloadやcanplayイベントで発火して再生させる方が無難。

//エラー判定を含めたJSON取得用の関数を作成
function ag2insta_curl($url){
  $option = [
    CURLOPT_RETURNTRANSFER => true,//データを文字列に変換して返す
    CURLOPT_TIMEOUT => 30,//タイムアウト秒数
  ];
  $ch = curl_init($url);//cURLセッションを初期化
  curl_setopt_array($ch, $option);//転送用の複数のオプションを設定
  $json = curl_exec($ch);//cURLセッションを実行
  if(curl_errno($ch)){ //エラー番号を返す(エラーが発生しない場合、0)
    $insta_curl_error = '<p>cURL error '.curl_errno($ch).' : '.curl_error($ch).'</p>';
    $json = false;//エラーがあった場合はデータ取得を偽にする
  }
  curl_close($ch);//cURLセッションを閉じて処理を終了
  return $json;//取得したデータを返す
}

//関数実行
$json = ag2insta_curl($data_url);
//cURLがエラーでなければ取得したJSONデータの整形処理をする
if($json){
  $obj = json_decode($json, true);//JSON文字列をデコードして連想配列形式のオブジェクトを格納

  if(@$obj['error']){//グラフAPIがエラーデータを返している場合
    echo '<p>Graph API Error: '.$obj['error']['message'].'</p>';
  }else{
    // $obj = $obj['business_discovery'];//Business Discoveryで投稿のデータを取得している場合はこのプロパティーを追加

    $name = $obj['name'];
    $obj_data = $obj['media']['data'];

    echo '<ul>';
    for($i = 0; $i < count($obj_data); $i++){
      echo '<li>';
      //media_typeで分岐
      $media_type = $obj_data[$i]['media_type'];
      switch($media_type){
        case 'CAROUSEL_ALBUM'://画像が複数の場合
          echo '<ul>';
          $children_data = $obj_data[$i]['children']['data'];
          foreach ($children_data as $k => $v) {
            echo '<li>';
            if(@$v['media_type'] == 'VIDEO'){
              echo '<video playsinline autoplay muted loop controls poster="'.$v['thumbnail_url'].'"><source src="'.$v['media_url'].'"
type="video/mp4"></video>';
            }else{
              echo '<img src="'.$v['media_url'].'" alt="'.$name.' Instagram">';
            }
            echo '</li>';
          }
          echo '</ul>';
          break;
        case 'VIDEO'://動画の場合
          $media_url = $obj_data[$i]['media_url'];
          $thumbnail_url = $obj_data[$i]['thumbnail_url'];
          echo '<video playsinline autoplay muted loop controls poster="'.$thumbnail_url.'"><source src="'.$media_url.'"
type="video/mp4"></video>';
          break;
        default:
          $media_url = $obj_data[$i]['media_url'];
          echo '<img src="'.$media_url.'" alt="'.$name.' Instagram">';
      }
      echo '</li>';
    }
    echo '</ul>';
  }
}else{
  echo $insta_curl_error;
}

json_decode(‘JSON文字列’, ‘返り値の形式’) : JSON文字列を適切なPHPの型として返す。「返り値の形式」がtrueの場合、返されるオブジェクトは連想配列形式になる。

• file_get_contentsとcurlとHttpRequestの違いについて
• PHPのfile_get_contentsをcURLへ置き換える
• file_get_contentsよりcurlを使ったほうがいいメモ
• PHPのcURLでAPIやWebサイトへのアクセス方法。file_get_contentsとの比較
• videoタグのつまずき／スマホで再生されない/playsinlineの存在