【アクセストークンジェネレータ付】「Instagram Graph API v6.0」 使い方。WEBサイトに写真を表示する方法完全攻略。

2020年10月10日

皆さんインスタグラム使ってますか？
僕は使ってません。でした。全く投稿するものが無いですが仕事で使う機会が来たのでWEBサイトにインスタグラムの写真を埋め込んだりする方法を研究しようと思います。

Instagram Graph API v6.0って何？

Instagram APIが色々仕様変更→一部機能終了→廃止になってしまったので新しいAPIを使わざるを得ません。
Instagramはいつの間にかFacebookに取り込まれていたんですね。知らなかった。

2020年3月2日をもって、旧Instagram APIは完全に使用出来なくなりました。最近ですね。
今後は以下の2つのAPIのどちらかを使うことになりそうです。

  • Instagram Graph API
  • Instagram Basic Display API

当記事では比較的情報の多い「Instagram Graph API」に焦点を当てていきます。

目標としてはWebサイトにインスタの写真を埋め込む事をゴールとします。

これが出来る様になっておいたほうが色々と便利かと。
皆様の請けている案件でもこのような要望はあるかと思います。
Instagram Graph APIを使ってWebサイトにインスタの写真を埋め込む方法まとめ

  • Instagramアカウントをプロアカウントにする
  • FaceBookページを作成し、Instaramのプロアカウントと連携させる
  • FaceBook開発者ページのGraph APIエクスプローラーから
    • アクセストークン
    • InstagramビジネスアカウントID
    を取得する。

この3点です。順番に見ていきましょう。

下準備・APIの利用に必要なもの

Instagramアカウントをプロアカウントにする

まずは自分のインスラグラムのアカウントをプロアカウントにする必要があります。

(スマホで)右上のメニュー→アカウント→「プロアカウントに切り替える」で簡単に切り替えられます。
画面に表示される質問に答えていって完成です。当記事では「クリエイター」にしました。

FaceBookページを作成し、Instaramのプロアカウントと連携させる

FackbookページからInstagramアカウントをリンクする

まずは連携したいfacebookページにアクセスし、「設定」から「Instagram」を選択します。
「Instagramにリンク」という項目に「アカウントをリンク」ボタンがあるのでリンクします。

リンクされました。

FaceBook開発者ページのGraph APIエクスプローラーからアクセストークン・InstagramビジネスアカウントIDを取得する。

まずFaceBookアプリを作成する。

当記事を読んでいる人は急いでいると思うのでFaceBookアプリの説明は割愛します。
ここからはPCでの作業です。

リンク : https://developers.facebook.com/

上記のFaceBook開発者ページにアクセスします。
開発者アカウントが必要になります。まだ取得していない方はここで取得をお願いします。

ログイン後、「マイアプリ」→「アプリの作成」をクリックします。
以下の画面になります。

「表示名」にはわかり易い名前をつけてください。
当記事では「delalunaofficedays」と名付けました。
メールアドレスはもう入力されていると思います。されていない場合は入力します。

セキュリティチェックを通過したら以下のような画面になります。

「アクセストークン」の取得

まずはアクセストークンを取得します。
3段階に分けて取得する必要があります。
当記事では「アクセストークンA」「アクセストークンB」「アクセストークンC」と呼ぶことにします。
急いでいると思いますのでリンクを張っておきます。
「facebook for developers」のページは別タブなどで開いたままにしておいてください。

リンク : https://developers.facebook.com/tools/explorer/

上記、「Graph APIエクスプローラー」にアクセスします。

上記画像の
「Facebookアプリ」項目から先程作成した「delalunaofficedays」を選択します。
「ユーザーまたはページ」から「ユーザーアクセストークンを取得」を選択します。
するとすぐに以下のような小窓が出ます。

ログインを促されるのでログインします。画面左下にログインした旨の通知が出ます。

下記画像のようにアクセストークンが生成されていることが確認できます。
現時点ではここは気にしないでおきます。

また、アクセスする範囲を決めることが出来ます。
「User Data Permissions」を選択すると以下のように何を取得するか選択することが出来ます。

今回は写真を表示したいだけなので
・business_management
・pages_show_list
・manage_pages
・instagram_basic
の4つにチェックしました。入力しても選択できます。
チェックしたら、「Generate Access Token」をクリックします。

複数のページ・アカウントを管理している場合、上記のような画面になるので「許可するアクセスを選択」→このアプリ「delalunaofficedays」からアクセスできるfacebookページを選択しましょう。
先程連携させたページです。

この様になりました。「Get Access Token」を押します。

上の方に「ログインレビューの申請」と出ますが気にせずログインします。

新しいアクセストークンが生成されています。
こちらはコピーしてメモ帳などに取っておきます。
これを「アクセストークンA」とします。

「アプリID」「app secret」の取得

先程開いたままにしておいた「facebook for developers」のページに戻ります。

左上のボックスから(画像赤枠・上)先程の「delalunaofficedays」アプリを選択し、
「設定」→「ベーシック」に進みます。

すると上記画像のように
「アプリID」「app secret」が表示されているはずです。
この2つは控えておいてください。

アクセストークンBを取得

https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【ここにアプリIDを入力】&client_secret=【ここにapp secretを入力】&fb_exchange_token=【ここにアクセストークンAを入力】
のURLにアクセスしてください。

上の文が意味がわからない人は
下記に入力してください。

アプリIDを貼り付け　
app secretを貼り付け　
アクセストークンAを貼り付け　

ボタンを押してアクセストークンBを生成

あなたのアクセストークンB：

上記のURLにアクセスすると下記のようなものが表示されると思います。

これが「アクセストークンB」です。
必ずメモをしておいてください。

アクセストークンCの取得

ここでアクセストークンBを使います。

https://graph.facebook.com/v5.0/me?access_token=【アクセストークンB】

にアクセスします。わからない方や面倒な方は以下をお使いください。

アクセストークンBを貼り付け　

ボタンを押してidを生成

あなたのid：

上のフォームから生成したURLにアクセスしたら以下の画像のようなものが表示されます。

まずはこのidをメモします。

https://graph.facebook.com/v5.0/【id】/accounts?access_token=【アクセストークンB】

にアクセスします。わからない方や面倒な方は以下をお使いください。
idを貼り付け　
アクセストークンBを貼り付け　

ボタンを押してアクセストークンCを生成

あなたのURL：

以下のように表示されたはずです。アクセストークンCが表示されています。

アクセストークンデバッガーの利用

かなり長い作業になってしまいました。
ここまでちゃんと出来ているのか不安ですね。
「アクセストークンデバッガー」でチェックしてみましょう。

https://developers.facebook.com/tools/debug/accesstoken/

以下の画面が表示されます。
ここでアクセストークンCを使います。

入力したらこのような画面になりました。

ここで意図しないものになっていた場合何かが間違っていますので一度確認してみてください。
確認が出来たら次はInstagramビジネスアカウントの作成です。

Instagramビジネスアカウントの作成

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

上記のGraph APIエクスプローラーにアクセスします。

青枠のところへアクセストークンCを貼り付けます。その後、
赤枠のところへ「me?fields=accounts{instagram_business_account,name}」と入力してエンターキーを押します。そうすると、以下の画面になるはずです。

PHPプログラムなどでInstagram Graph APIを使ってインスタグラムの写真の情報を取得するのに、
・アクセストークンC
・InstagramビジネスアカウントID
が必要になりますのでメモをお願いします。

PHPでインスタグラムの写真を取得

<br>
&lt;?php<br>
    $instagram_media_limit = '5';//5件表示<br>
    $instagram_business_id = 'InstagramビジネスアカウントID';<br>
    $instagram_access_token = 'アクセストークンC';</p>
<p>    $json = file_get_contents("https://graph.facebook.com/v6.0/{$instagram_business_id}?fields=name%2Cmedia.limit({$instagram_media_limit})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&amp;access_token={$instagram_access_token}");</p>
<p>    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');<br>
    $obj = json_decode($json, true);</p>
<p>    $instagram = [];</p>
<p>    foreach ($obj['media']['data'] as $k =&gt; $v) {<br>
        if (@$v['thumbnail_url']) {<br>
            $data = [<br>
                'img' =&gt; $v['thumbnail_url'],<br>
                'caption' =&gt; $v['caption'],<br>
                'link' =&gt; $v['permalink'],<br>
            ];<br>
        } else {<br>
            $data = [<br>
                'img' =&gt; $v['media_url'],<br>
                'caption' =&gt; $v['caption'],<br>
                'link' =&gt; $v['permalink'],<br>
            ];<br>
        }<br>
        $instagram[] = $data;<br>
    }<br>
    foreach ($instagram as $k =&gt; $v){<br>
        echo '&lt;li class="insta__item"&gt;&lt;img src="'.$v['img'].'"&gt;&lt;/li&gt;';<br>
    }<br>
?&gt;</p>
<p>

上記のコードで写真が取得できました。

非常に簡単でしたね！


簡単でしたね！



何これ凄く使いにくい

Related Posts

PHP, SNSInstagram Graph API v6.0, PHP

Posted by bistro