[Instagram Graph API7.0対応] Instagramの写真を埋め込む方法

Instagram Grap APIの最新バージョン7.0でInstagramの写真とURLを取得し、自動表示させる方法を下記します。基本的なやり方は今までのバージョンとそう差異はありません。

1.Facebookページ」と「Instagramビジネスアカウント」を連携する

  1. インスタグラムアカウントをビジネスアカウントに切り替える
    Instagram公式ヘルプ参照
  2. Facebookページとインスタグラムアカウントを連携する
    Facebook公式ヘルプ参照

2.Facebook for Developersでアプリを作成

※個人アカウントを開発者アカウントにする必要があります(要携帯番号登録)
Facebook for Developersにアクセスし、「マイアプリ」のアプリ作成からアプリ作成。
最初のアプリ名とメールアドレスを入力して作成するだけでOKです。
作成したら、アプリ画面を開いて「設定」→「ベーシック」の以下画面開いて、「アプリID」と「app secret」をメモする。

アプロの左メニュー「プロダクト」から、「InstagramグラフAPI」と「Instagram Basic Display」の「設定」をクリック。
※クリック後の画面は無視してよい。
※「Instagram Basic Display」は関係なさそうですが、一応・・・。

3.グラフAPIエクスプローラーで、作ったアプリを選択して【第1トークン】を発行。

グラフAPIエクスプローラーはこちら

  1. Facebookアプリを選択
  2. 「ユーザーまたはページ」は「ユーザーアクセストークンを取得」を選択
  3. 「アクセス許可」で「public_profile」「instagram_basic」「pages_show_list」「pages_manage_metadata」を追加
  4. 「Generate Access Token」をクリック
  5. 利用したいインスタビジネスアカウント・アクセスできるFacebookページの設定を選択して次へ
    許可するアクセスの設定は全てチェックし、レビュー申請は無視して完了をクリック
  6. アクセストークン欄にでた【第1トークン】をメモする。

4.第2トークンを発行する

上記URLの【】をそれぞれ埋めてアクセスし、出てきた【access_token】をメモする。
これが第2トークンとなります。

5.【id】を取得する

【】に第2トークンを入力してアクセス、出てきた【id】をメモする

6.第3トークンを発行する

【】をそれぞれ入力してアクセス。
jsonが表示されれば成功です。【access_token】をメモする。これが第3トークンとなります。

7.トークンの有効期限を確認する

【第3トークン】の有効期限をここで一応確認。「有効期限」が受け取らないになっていれば問題ありません。
※「デバッグ」ボタン上の「APIバージョン」を「v7.0」にする

8.【InstagramビジネスID】を取得する

上記URLの【】に第3トークンを入力してアクセス。
【instagram_business_account】の【id】をメモします。
これが【instagramビジネスID】となります。

9.自動表示させる

以下をPHPで記述してサーバーにアップしましょう。
動画があるとその投稿部分だけ表示されないので、何か対策を。
改造とか、他に出力したいのがあるとかは任意で。

※↑では写真の場合しかサムネイルが表示されません。動画でもサムネイルを表示させる場合は以下記事を参照下さい。

Instagram埋め込みで写真・動画のサムネイルを表示させる方法

2020.03.09

面倒くさい、クライアントのFacebookページの管理者にしてもらえない

[SnapWidget]InstagramGraphAPIを使わずに簡単に埋め込む方法

2019.12.25

これを使いましょう。