InstagramのフィードをAPIでサイトに組み込む方法5〜APIにアクセスして一覧を表示する

2023.06.13 13:28
2023.05.25 09:20
InstagramのフィードをAPIでサイトに組み込む方法5〜APIにアクセスして一覧を表示する

前回はプロアカウントIDと無制限アクセストークンを取るところまでいきました。今回はそれを使ってAPIからデータを取得してみたいと思います。

1. 大まかな流れ

  1. Instagramをプロアカウントにする
  2. facebookページを作成する
  3. facebookページとInstagramを連携する
  4. facebookアプリを作る
  5. グラフAPIエクスプローラーでユーザーアクセストークンを取る
  6. プロアカウントIDを取得する
  7. 無期限トークンを取得する
  8. APIにアクセスして一覧を表示する【←今回はここ】

2. APIにアクセスしてデータを取得

PHPを使ってAPIにアクセスして見たいと思います。
コードはこんな感じ。

<?php
$instagram_business_id = 'プロアカウントID';
$access_token = '無制限トークン';

$query = 'media.limit(5){id,media_url,caption,permalink,timestamp,username}';
$url = 'https://graph.facebook.com/v16.0/'
     . $instagram_business_id
     . "?fields="
     . $query
     . "&access_token="
     . $access_token;
$json = file_get_contents($url);
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$obj = json_decode($json, true);
?><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <ul>
  <?php foreach($obj['media']['data'] as $media):?>
    <li>
      <a href="<?php echo $media['permalink'];?>">
      <img src="<?php echo $media['media_url'];?>"><br>
      <?php echo $media['caption'];?></a>
    </li>
  <?php endforeach;?>
  </ul>
</body>
</html>

PHPを使ってAPIから画像、キャプション、リンクのデータを取得して、一覧で表示してみました。
limit(5)の部分を変えると表示数をいじれるようですね。

これでやっとAPIからデータを表示することができました。

3. トラブルシューティング

途中、こんなエラーがでてしばらく悩まされました。

(#100) Tried accessing nonexisting field (media) on node type (User)

原因はfacebookのビジネス設定に対象のinstagramアカウントを追加していなかったことのようで。
追加してグラフAPIエクスプローラーに以下を入れて送信すると、インスタグラムビジネスIDが取れるので、それを使ってアクセスしたら取れました。


あまりに長い道のりでした。これでInstagramのフィードをAPIでサイトに組み込む方法全5回終了です。

今回は以上です！