STAFF BLOG STAFF BLOG

STAFF BLOG

2020.11.25 PHPプログラム

Instagram Graph APIを使ってインスタグラムの投稿画像をWebサイトに埋め込む方法1

Instagram Graph APIを使ってインスタグラムの投稿画像をWebサイトに埋め込む方法1

2020年7月以降、instagramの旧APIが廃止され、新しく、Instagram Graph APIに置き換わりました。
今回は、Instagram Graph APIを使ってWEBサイトに、インスタグラムの投稿画像を表示するために必要な、アクセストークンの取得方法と、InstagramビジネスアカウントIDの取得方法をご説明します。

1.事前準備

-ご用意いただくもの-

  1. Facebookアカウント
  2. Instagramアカウント
  3. Instagramのスマートフォンアプリ

2.Instagramのアカウントをビジネスアカウントに切り替え

スマートフォンアプリから、Instagramのアカウントを、プロアカウントに切り替えます。(おそらくPCではできなかったです)

  1. メニューより「設定」→「アカウント」→「プロアカウントに切り替える」を選択
  2. 「クリエイター」または「ビジネス」どちらかを選択

3.InstagramアカウントとFacebookページを紐付けする

Facebookページを開く(ない場合は新規作成)。
その作成したFacebookページより「設定」→「Instagram」→「アカウントをリンク」

4.Facebookアプリを作成する

https://developers.facebook.com/
「マイアプリ」→「アプリの作成」→「ビジネス統合の管理」にてInstagramを追加。

5.アクセストークンを取得する(1回目)

下記を確認し、「Generate Access Token」をクリック

  1. Facebookアプリ→4で作成したFacebookアプリ名
  2. ユーザまたはページ→ユーザトークン
  3. アクセス許可→
  • pages_show_list
  • business_management
  • instagram_basic
  • pages_read_engagement pages_manage_posts

以下のアクセス許可に、Facebookでは使用が許可されていないものがあります。」が別窓で表示されたらOKを押す。アクセストークンをメモする。(アクセストークン1とする)

6.アクセストークンを取得する(2回目)

4で作成したFacebookアプリを開き、設定→ベーシックをクリック
記載の、「アプリID」「app secret」をメモする。

先ほどの「アプリID」「app secret」、5で作成した「アクセストークン」を使い、 下記にアクセスする。

access_tokenが表示されるのでメモする。(アクセストークン2とする)

 
https://graph.facebook.com/v6.0/oauth/access_token?grant_type=fb_exchange_token&client_id=[アプリidをコピペ]&client_secret=[app secretをコピペ]&fb_exchange_token=[アクセストークン1をコピペ]

メモしたアクセストークンを使い、 下記にアクセスする。

https://graph.facebook.com/v6.0/me?access_token=[アクセストークン2をコピペ]

するとJSON形式でIDが表示されるので、そのIDをメモする。

7.アクセストークンを取得する(3回目)

https://graph.facebook.com/v6.0/[6で取得したidをコピペ]/accounts?access_token=[6で取得したアクセストークン2をコピペ]

下記のJSONが表示されるので、記載の access_tokenをメモする。(アクセストークン3とする)

8.InstagramビジネスアカウントIDを確認する

https://developers.facebook.com/tools/explorer/ に再度アクセス。 上の入力窓にme?fields=accounts{instagram_business_account,name}をコピペして送信ボタンをクリック。 instagram_business_accountのIDをメモする。
      {
        "instagram_business_account": {
          "id": "ここの文字列をコピーする"
        },
        "name": "",
        "id": ""
      },
上記で取得した、InstagramビジネスアカウントIDと、アクセストークン3を使うことによって、自身のアカウントのInstagramの画像をWEBサイトに読み込むことができるようになります。

関連記事