2021年版 InstagramグラフAPIを利用してインスタグラムの投稿を取得するための手順とPHPのサンプル

## 概要

WEBサイトにInstagramの投稿を表示するための手順。所要時間30分。

* Facebook
  * Facebookページを作成する
  * Facebookページの設定からInstagramをリンクする
  * Instagramアカウントに「Instagramビジネスツールの追加」と「リンクの確認」をする
* FACEBOOK for Developers
  * アプリを作成する
  * アプリにInstagramグラフAPIを追加する
  * アプリIDとシークレットの確認する
  * ユーザーアクセストークンの取得をする
* PHPのサンプルプログラム

> ** NOTE **
> FacebookアカウントとInstagramアカウントは作成済みの前提
>

## Facebook

### Facebookページを作成する

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/b778d8d7-d63b-6e22-8b6b-8624fce761a6.png)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/4bb02299-75cd-9921-f58a-a47d0452f73b.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/ece00ccf-22fc-a828-a42d-93ae37e10a3d.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/cf130354-8aac-19bb-309b-9a74c93ee489.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/25fcfdeb-81c4-efa3-1c3e-506e012c7cc6.png)

### Facebookページの設定からInstagramをリンクする

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/b7dae0a9-5f7a-93d8-19ae-aa55498da04a.png)

### Instagramアカウントに「Instagramビジネスツールの追加」と「リンクの確認」をする

* Instagramアカウントをビジネスアカウントにします。
* 画像は既にビジネスアカウントだったため表示されていませんが、「Instagramビジネスツールの追加」がある場合は追加してください。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/30821fd9-a4be-85ca-3253-1f9680eff790.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/25de425e-1455-44f1-eb05-647ebd73a4b1.png)

## FACEBOOK for Developers

https://developers.facebook.com/

### アプリを作成する

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/69bc7e6f-e0da-69cb-4d03-934037d094df.png)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/2915d650-ce24-3f4b-edfa-38bb8a9a5399.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/8c61ebc1-83ce-560b-a438-164d436b7673.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/e59bba0f-dca3-7157-77c8-91a59af188c1.png)

### アプリにInstagramグラフAPIを追加する

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/7c21fdaa-8235-c115-7057-05f7ceb1c96a.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/c675418e-e43a-62fe-6ad8-c8d215a43023.png)
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/98a2bd9f-561b-612f-eed7-0aac40d6d711.png)


### アプリIDとシークレットの確認をする

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/880941fb-9d80-071a-7733-d9905a69cc7f.png)

## ユーザーアクセストークンの取得をする

https://developers.facebook.com/tools/explorer/

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/a62420f0-65b7-953f-a619-4ca58e2efe8a.png)
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/78790285-53d5-fdd4-2f39-ed8a2926c1df.png)
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/5a13407c-5c6b-e76d-343f-5372968c7637.png)
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/825d33c7-d612-489d-43b0-c84473d15b82.png)

## PHPのサンプルプログラム


### 処理概要

アプリIDとシークレットとユーザートークンの３つを使用します。

* １．APPIDとAPPシークレットと既存のユーザートークンを使用して新しいユーザートークンを取得
* ２．ユーザートークンを使用してフェイスブックIDを取得
* ３．ユーザートークンとフェスブックIDを使用してページ一覧とページアクセストークンの取得
* ４．フェイスブックの各ページ毎に処理を行う
* ４－１．ユーザートークンとページアクセスIDを使用してページにリンクしたインスタグラムビジネスアカウントIDとインスタグラムアクセストークンを取得
* ４－２．インスタグラムビジネスアカウントIDとインスタグラムアクセストークンを使用してインスタグラムの投稿データを取得
* ４－３．インスタグラムの投稿データを表示

### 実行結果

![実行結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/b4a2081f-02c9-d435-75e7-6b84bb34f927.png)

### サンプルプログラム

トークンやインスタグラムの投稿内容はキャッシュするようにしてください。APIの上限に簡単に達してしまいます。
このサンプルは簡単に書いたスクリプトなのでエラー処理などは全くありません。
１～４－２までは全てトークンの取得のための処理なので、キャッシュさせてローカルに保存し、１周間に１度更新すれば十分だと思います。
４－３も投稿内容なので、キャッシュさせてローカルに保存し、１時間に１度更新すればいいと思います。



```php
<?php

class config {

    /**
     * アプリID
     */
    const GRAPH_API_APP_ID = '***************';

    /**
     * シークレット
     */
    const GRAPH_API_APP_SERET = '********************************';
}

/**
 * ユーザートークン
 */
$user_token = '*****************************************************************************************************************************************************************************************';

// 前回取得したユーザートークンを取得
if (is_file(dirname(__FILE__).'/user_token')) {
    $user_token = file_get_contents(dirname(__FILE__).'/user_token');
}

$curl_options = [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT => 3,
];

echo '<h2>１．APPIDとAPPシークレットとユーザートークンを使用して新しいユーザートークンを取得</h2>';
$url = [];
$url[] = 'https://graph.facebook.com/v11.0/oauth/access_token';
$params = [];
$params[] = 'grant_type=fb_exchange_token';
$params[] = 'client_id='.config::GRAPH_API_APP_ID;
$params[] = 'client_secret='.config::GRAPH_API_APP_SERET;
$params[] = 'fb_exchange_token='.$user_token;
$url[] = '?'.implode('&', $params);
$url = implode('', $url);
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", "&nbsp;", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');

// ユーザートークンを更新する
file_put_contents(dirname(__FILE__).'/user_token', $res->access_token);
$user_token = $res->access_token;

echo '<h2>２．ユーザートークンを使用してフェイスブックIDを取得</h2>';
$url = 'https://graph.facebook.com/v11.0/me?access_token='.$user_token;
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", "&nbsp;", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');

$facebook_id = $res->id;

echo '<h2>３．ユーザートークンとフェスブックIDを使用してページ一覧とページアクセストークンの取得</h2>';
$url = 'https://graph.facebook.com/v11.0/'.$facebook_id.'/accounts?fields=id,name,access_token&access_token='.$user_token;
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", "&nbsp;", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');

echo '<h2>４．フェイスブックの各ページ毎に処理を行う</h2>';

foreach ($res->data as $page) {

    echo '<h3>４－１．ユーザートークンとページアクセスIDを使用してページにリンクしたインスタグラムビジネスアカウントIDとインスタグラムアクセストークンを取得</h3>';
    $url = 'https://graph.facebook.com/v11.0/'.$page->id.'/?fields=access_token,instagram_business_account&access_token='.$user_token;
    $ch = curl_init($url);
    curl_setopt_array($ch, $curl_options);
    $res = curl_exec($ch);
    $res = json_decode($res);
    // ここでビジネスinstagram_business_accountが無い場合は

    // １．インスタグラムがビジネスアカウントになっていない可能性があるので
    // フェイスブックのページ管理から該当ページの管理画面のInstagramより
    // 「Instagramビジネスツールの追加」をする

    // ２．ページがInstagramアカウントとリンクしていない可能性があるので
    // フェイスブックのページ管理から該当ページの管理画面のInstagramより
    // 「リンクを確認」をする

    // echo('<div>'.nl2br(str_replace(" ", "&nbsp;", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');
    $instagram_business_account_id = $res->instagram_business_account->id;
    $instagram_access_token = $res->access_token;

    echo '<h3>４－２．インスタグラムビジネスアカウントIDとインスタグラムアクセストークンを使用してインスタグラムの投稿データを取得</h3>';
    $params = [];
    $params[] = 'access_token='.$instagram_access_token;
    $params[] = 'fields=name,media.limit(10){caption,media_url,thumbnail_url,permalink}';
    $url = 'https://graph.facebook.com/v11.0/'.$instagram_business_account_id.'/?'.implode('&', $params);
    $ch = curl_init($url);
    curl_setopt_array($ch, $curl_options);
    $res = curl_exec($ch);
    $res = json_decode($res);
    // echo('<div>'.nl2br(str_replace(" ", "&nbsp;", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');

    echo '<h3>４－３．インスタグラムの投稿データを表示</h3>';
    foreach ($res->media->data as $post) {

        echo "<h4>CAPTION: {$post->caption}</h4>";
        echo "<a href=\"{$post->permalink}\">";
        echo "<img src=\"{$post->media_url}\" alt=\"{$post->caption}\" style=\"max-height:100px;max-width:100px;\"/>";
        echo "</a>";
    }
}

```