運営するサイトでハッシュタグ(キーワード)に関連するInstagram投稿データを取得して表示させるため、InstagramグラフAPIの設定~開発をやってみたので、備忘録としてまとめておきました。

Instagramの投稿データを取得できるAPIには大きく分けて2種類あり、自分の投稿データだけにアクセスできる基本表示APIと、他人のデータにまでアクセスできるグラフAPIがあるようです。

種類名称API概要
ビジネス向けのAPIInstagramグラフAPI自身のInstagramアカウントにアクセスしてデータ取得、公開をしたり、他人のInstagramの投稿データにアクセスができる。
消費者向けのAPIInstagram基本表示API自身のInstagram投稿データにアクセスしてデータ取得ができる。

ハッシュタグを検索してタグ付けされた投稿データを取得したかったので、このビジネス向けとされるInstagramグラフAPIを今回は使っています。

このInstagramグラフAPI利用に必要となるAPIアクセストークン取得、InstagramビジネスID取得までまとめておきましたので、InstagramグラフAPIを使って投稿画像・動画の表示をゼロからやってみたいとお考えの方は、ぜひ参考にしてみて下さい。

Instagram Graph API利用に必要なもの

Instagram Graph APIを使うためには、下記の2つが必要となります。

  1. ページアクセストークン(できれば、長期(無期限)版)
  2. InstagramビジネスID

この記事をお読みになれば分かると思いますが、InstagramはFacebookに買収されて色々と連携がされているため、API利用にあたってFacebookページの用意が必要だったりと、少々複雑な準備作業が必要となっています。長文記事となってしまいましたがご理解下さい。

それと、今回Facebook、Instagramアカウントを新規取得していますが、既にお持ちのFacebookアカウント、Instagramアカウントがあればそれを使うでも問題ありません。適宜読み飛ばして下さい。

InstagramビジネスID、APIアクセストークン取得手順

facebookアカウント、Instagramアカウントの新規取得からスタートする場合には、下記を全てやることとなります。

  1. Facebookアカウント取得
  2. Facebookページ作成
  3. Instagramアカウント取得
  4. Instagramプロアカウント変更
  5. InstagramプロアカウントとFacebookページ連携
  6. Meta(Facebook) for Developersアカウント取得
  7. アプリの作成
  8. アプリにInstagramグラフAPI追加
  9. アプリID, app secretの確認
  10. アプリにFacebookページをリンク
  11. アクセストークン①(ユーザーアクセストークン)取得
  12. アクセストークン②(長期ユーザーアクセストークン)取得
  13. アクセストークン③(長期ページアクセストークン)取得
  14. InstagramビジネスアカウントID取得

順番に説明していきます。

Facebookアカウントの新規取得

既に個人のFacebookアカウントをお持ちの場合はそれでも大丈夫です。私の場合は、サイト用としてアカウントを新規取得したかったので、新規取得からやってみました。登録にはメールアドレスがあればOKです。

facebookの新規登録ページ
facebookの新規登録ページ

新規アカウントの作成ができました。プロフィールも投稿も何もない、ロゴと背景しかいれていない状態のため、中身はスカスカですが、API利用には問題ありません。

Dtn.jp管理人のfacebook
Dtn.jp管理人のfacebook

Facebookページの作成

Facebookページとは、企業や会社がブランドや商品紹介用に作っているアレですが、Instagram Graph APIにあたり後々で必要となるため、ここで用意してしまいます。お持ちであれば次にお進みください。

Facebookページの新規作成は、メニュー内の「ページ」から作ることができます。

Facebookページの作成はページから
Facebookページの作成はページから

「+新しいページを作成」ボタンを押すとFacebookページができます。

Facebookページの作成画面
Facebookページの作成画面

Facebookページも無事完成しましたが、こちらも情報が何もないので中身はスカスカです。

dtn.jpのFacebookページ

https://www.facebook.com/Dtnjp-149531044310082

Instagramアカウントの新規取得

続いてInstagramのアカウントを取得します。こちらも既に個人のInstagramアカウントをお持ちであれば、それを使っても大丈夫ですが、後々プロアカウントに変更する必要があるので、鍵アカ運用をしている場合は強制的に公開アカウントとなるためご注意ください。

nstagramの新規登録ページ
Instagramの新規登録ページ

InstagramはFacebookアカウントを使ったソーシャルログインができるので、「Facebookでログイン」から進みます。情報処理試験でよくでるOAuthのソーシャル認証ですね。

InstagramとFacebookのアカウント連携が初めてだった場合には、Instagram→Facebookアカウントへのアクセス許可を求められますので、Facebook側でInstagramに許可をします。

InstagramとFacebookのアカウント連携
InstagramとFacebookのアカウント連携

無事Instagram側にログインができました。おすすめにでているのは外人ばかりですが、誰でしょうね。特にフォローもせず先に進みます。

nstagramのアカウント開設
Instagramのアカウント開設

Instagramのプロアカウントに変更

Instagram Graph APIを利用するためには、Instagramをプロアカウントへと変更する必要があります。プロアカウントにすると、鍵アカ(非公開アカウント)運用ができなくなるようですが、登録したばかりの新規作成アカウントなので全く問題ありません。

「プロフィールを編集」→「プロアカウントに切り替える」で設定に進めます。

プロフィール編集からプロアカウントへの切替が可能
プロフィール編集からプロアカウントへの切替が可能

プロアカウントの種類として、以下の二つが用意されていました。

アカウントタイプ説明
クリエイター公人・著名人、コンテンツプロデューサー、アーティスト、インフルエンサーに最適です。
ビジネス小売店、ローカルビジネス、ブランド、組織、サービスプロバイダーに最適です。

コンテンツプロデューサー?の方だろうとは思ったので、クリエイターとしておきました。

agramプロアカウントのタイプ設定
Instagramプロアカウントのタイプ設定

すると、今度は活動内容に一番合ったカテゴリを選択を求められます。合うカテゴリがなかったので、サイト内容に合いそうなワードで検索をしてみましたが、何故かうまく検索結果がでてきません。

Instagramプロアカウントのカテゴリ設定
Instagramプロアカウントのカテゴリ設定

仕方がないので、デフォルトで用意されている「個人ブログ」を選択して登録をしてしまいました。これで無事Instagramアカウントをプロ(クリエイター)アカウントに変更することができました。

nstagramクリエイターアカウントに変更完了
Instagramクリエイターアカウントに変更完了

InstagramプロアカウントとFacebookページを連携

続いて、Instagramのプロ(クリエイター)アカウントに先ほど作成したFacebookページを紐付けます。管理者アカウントでFacebookページの編集画面に進んでいくと、メニューに設定(歯車ボタン)があるので、ここに進みます。

FacebookページとInstagramの設定作業1
FacebookページとInstagramの設定作業1

設定画面のメニューには「Instagram」というメニューが用意されているので、そこから連携設定に進みます。

FacebookページとInstagramの設定作業2
FacebookページとInstagramの設定作業2

Instagramへ「アカウントをリンク」ボタンが表示されるので、ボタンクリックで連携します。

FacebookページとInstagramの設定作業3
FacebookページとInstagramの設定作業3

確認のダイアログボックスが表示されるので、そのまま次へと進みます。

FacebookページとInstagramの設定作業4
FacebookページとInstagramの設定作業4

すると、今度はInstagram側のOAuth認証画面が表示されます。先ほどのプロ(クリエイター)アカウントが表示されていたら、それでログイン認証をします。

acebookページとInstagramの設定作業5
FacebookページとInstagramの設定作業5

無事にFacebookページとInstagramプロ(クリエイター)アカウントの紐付けが完了しました。

FacebookページとInstagramの設定作業6
FacebookページとInstagramの設定作業6

Meta(Facebook) for Developersのアカウント取得

だいぶ下準備が整いましたので、FacebookのAPI開発者ツールであるMeta(Facebook) for Developersの登録に進みます。

Meta(Facebook) for Developersの新規登録はスタートから
Meta(Facebook) for Developersの新規登録は「スタート」から

Meta(Facebook) for Developersとは、Facebookのデータを使ったアプリを作ったりする際に使うプラットフォームのことです。

今回使おうとしているのはInstagram Graph APIですが、FacebookにもGraph APIというものがあり、Facebookの投稿データを取得できます。他にも、Facebook広告でおなじみのFacebookピクセルや、オープンソースの人工知能とかまで使えるようですが、今はInstagramのAPIを使いたいだけですので、その辺りは飛ばして先に進みましょう。

トップページ右上の「スタート」ボタンから登録に進むと、ChromeのFacebookアカウントキャッシュを拾っているのか、登録したアカウント画像付きでFacebook for Developersへようこそと言われました。

トップページは「Meta for Developers」となっていましたが、このあたりはまだ「FACEBOOK for Developers」のままとなっています。

Meta(Facebook) for Developersの新規登録1
Meta(Facebook) for Developersの新規登録1

次へと進むと、携帯TEL番号による本人認証画面が登場します。ここまで携帯認証せずに進むことができましたが、どうやらここで認証をやらないと先に進めないようです。

Meta(Facebook) for Developersの新規登録2
Meta(Facebook) for Developersの新規登録2

仕方ないので、携帯番号で認証を通すと、最後にあなたの情報を選んでくれとの選択ボックスが現れます。これが何かに影響するのかも分かりませんが、開発者を選択しておきました。

Meta(Facebook) for Developersの新規登録3
Meta(Facebook) for Developersの新規登録3

特に問題なく登録することができたようで、アプリの作成を促す画面が表示されました。

Meta(Facebook) for Developersの新規登録4
Meta(Facebook) for Developersの新規登録4

Facebookマイアプリの作成

早速、Facebookアプリを作成していきます。「アプリを作成」ボタンを押すと、アプリの種類を確認する選択画面が表示されます。

Facebookアプリの作成画面1
Facebookアプリの作成画面1

アプリタイプの分類がよくわかりませんが、InstagramグラフAPIを使いたいので、とりあえずビジネスに設定をします。

アプリタイプ説明
ビジネス利用可能なビジネスのアクセス許可や機能、製品を使って、ページやイベント、グループ、広告、Messenger、InstagramグラフAPIのアセットを作成したり、管理します。
生活者FacebookログインやInstagram Basic Displayなどの生活者向け製品とアクセス許可をアプリにリンクします。
インスタントゲームHTML5ゲームを作成してFacebookでホスティングします。
ゲームプラットフォーム外のゲームをFacebookログインにリンクします。
WorkplaceCreate enterprise for Workplace from Meta.
なし生活者とビジネス向けのアクセス許可と製品を組み合わせたアプリを作成します。

すると、アプリの詳細情報を登録するフォームがでてきます。アプリ名を適当に入れて、メアドを設定して「アプリを作成」ボタンを押します。

Facebookアプリの作成画面2
Facebookアプリの作成画面2

再度アカウントパスワードでの認証をすればアプリが登録できます。

Facebookアプリの作成画面3
Facebookアプリの作成画面3

マイアプリにnstagramグラフAPI機能を追加

作成したFacebookアプリがダッシュボードに追加されているので、アプリに製品を追加することができるようになります。早速「InstagramグラフAPI」を追加します。

マイアプリにInstagramグラフAPIを追加1
マイアプリにInstagramグラフAPIを追加1

アプリID, app secretの確認

アクセストークンの生成に必要となる、アプリID、app secretを確認します。「設定」(歯車アイコン)→「ベーシック」に進みます。

マイアプリにInstagramグラフAPIを追加2
マイアプリにInstagramグラフAPIを追加2

ここで重要な「アプリID」「app secret」が確認できます。後でもこの画面で確認ができますが、メモっておきましょう。

マイアプリにInstagramグラフAPIを追加3
マイアプリにInstagramグラフAPIを追加3

プライバシーポリシーのURLがないと警告がでるため、サイトのプライバシーポリシーURLもここに入れておきます。無くてもとりあえず大丈夫のようです。

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

OAuth認証でもおなじみのアクセストークンが、FacebookのほとんどのAPIの利用には必須となります。用意されているアクセストークンの種類は下記があります。

アクセストークン種類概要
ユーザーアクセストークンアプリでAPIを呼び出して、特定利用者のFacebookデータをその利用者の代わりに読み取り、変更、書き込みを行う際に必要なもの。
アプリアクセストークンアプリ設定を変更したり読み取ったりする際に必要なもの。
ページアクセストークンユーザーアクセストークンに似ているが、Facebookページに属するデータの読み取り、書き込み、変更を行うAPIに対してアクセス許可を提供する点が異なるもの。
クライアントトークンアプリを識別するために、ネイティブモバイルバイナリやデスクトップアプリに埋め込むことができる識別情報。アプリに埋め込まれるため、シークレット識別子になることはできない。

最終的に必要なものはページアクセストークンですが、アクセストークンといえば有効期限が短期というのがお決まりですので、これを長期間有効に変更しておくことも必要です。早速、長期アクセストークンの発行をしたいと思います。

アプリにFacebookページをリンク

Facebookのアプリ機能はFacebookビジネスページにリンクをすることで利用ができる、といった建て付けにされているようですので、アプリにFacebookページを紐づけしていきます。

Meta(Facebook) for Developersに作られた「マイアプリ」のダッシュボードに進み、上部メニューの「ツール」から「グラフAPIエクスプローラー」を開きます。

Meta(Facebook) for DevelopersのグラフAPIエクスプローラー
Meta(Facebook) for DevelopersのグラフAPIエクスプローラー

グラフAPIエクスプローラーの右側部分では、作成したアプリの「ユーザーアクセストークン」「アプリアクセストークン」「ページアクセストークン」を生成することができるようになっています。

アプリからfacebookページに連携する「ページアクセストークン」をつくるため、「ページアクセストークン」を選択して「Generate Access Token」から生成します。すると、ユーザ認証がかかりますので、表示されているアカウントで認証をします。

アクセストークン生成時のユーザ認証
アクセストークン生成時のユーザ認証

続いて、Facebookページの紐づけに進みます。最初に作成したFacebookページ、もしくは、お持ちのFacebookページがここに表示されているはずなので、そちらを選択してください。

プリとFacebookページの紐づけ1
アプリとFacebookページの紐づけ1

Facebookページへのアプリアクセスの許可設定をします。許可設定に関する警告が出ていますが、そのまま設定します。

アプリとFacebookページの紐づけ2
アプリとFacebookページの紐づけ2

アプリとFacebookページとの紐づけが完了しました。

アプリとFacebookページの紐づけ3
アプリとFacebookページの紐づけ3

アクセストークン①取得

デフォルトの状態では、ページアクセストークンには下記の3つしかデータへのアクセス許可設定が付けられていません。

pages_show_list
business_management
public_profile

ページアクセストークンのデフォルト許可設定

Instagramのデータにアクセス許可を付ける必要があるので、アクセス許可のオプションを増やしていきます。

「許可を追加」とあるドロップダウンリストから欲しいものを追加していきます。よくわからないので、「Instagram_xxxx_xxxx」とあるものを一通り追加してみました。追加をしていくと緑色になってアクセス許可が増えていきます。

アクセストークンにアクセス許可のオプションを追加
ページアクセストークンにアクセス許可のオプションを追加1

緑色の許可設定が増えた状態で、「Generate Access Token」からアクセストークンの生成をします。Instagramプロアカウントへの接続確認がでるので、そのまま次へ進みます。

ページアクセストークンにアクセス許可のオプションを追加2
ページアクセストークンにアクセス許可のオプションを追加2

一通り作業を終了した後、画面右上の「アクセストークン」とある部分に長々しいランダム文字列が表示されれば完了です。なくさないようにメモしてください。

アクセストークン②取得

せっかく取得したアクセストークンでしたが、このアクセストークンは短期で有効期限が切れて使えなくなってしまいます。このため、この短期アクセストークンを長期アクセストークンに変更していきます。

必要なものは下記の3つです。

  1. ユーザーアクセストークン
  2. アプリID
  3. App Secret

ユーザーアクセストークンは先ほどメモしていると思いますが、忘れた場合は「グラフAPIエクスプローラー」を開いた時に右上に表示される文字列を再度メモしてください。アプリIDとApp Secretを忘れてしまった場合は、「マイアプリ」→「設定」→「ベーシック」で確認できるので、メモってきてください。

この3つが用意できたら、これを下記URLにはめ込みしてブラウザでアクセスします。

https://graph.facebook.com/12.0/oauth/access_token?
    grant_type=fb_exchange_token&          
    client_id=「アプリID」&
    client_secret=「App Secret」&
    fb_exchange_token=「アクセストークン」

すると、下記のような表示がでて、長期ユーザーアクセストークンが確認できます。こちらも忘れないようメモしてください。

↓取得サンプル

{ "access_token":"「長期ユーザーアクセストークン」", "token_type": "bearer", "expires_in":5183944 //トークンが有効期限切れになるまでの秒数 } 

アクセストークン③取得

先ほど取得した長期ユーザーアクセストークンを使って、長期ページアクセストークンを生成することができます。長期ページアクセストークンには有効期限がないため、これさえ作ってあれば先々APIの利用も問題ありません。

長期ページアクセストークン取得に必要となるものは下記の2つです。

  1. ユーザーID
  2. 長期ユーザーアクセストークン
https://graph.facebook.com/12.0/「ユーザID」/accounts?
  access_token=「長期ユーザーアクセストークン」

ユーザーIDの確認方法

ユーザーIDが分からないと思いますが、グラフAPIエクスプローラーですぐに調べることが可能です。グラフAPIエクスプローラーのコマンドに下記表示がされている(デフォルト状態)ことを確認してください。

GET → /v12.0/  me?fields=id,name

その状態で、右上のアクセストークン部分に先ほど取得した長期アクセストークンをセットし、送信ボタンを押せばIDが確認できます。

ーID、ユーザー名をグラフAPIエクスプローラーで確認する方法
ユーザーID、ユーザー名をグラフAPIエクスプローラーで確認する方法

もしくは、下記のURLに長期アクセストークンをセットして、先ほど同様にブラウザでアクセスすることでも取得ができます。

https://graph.facebook.com/v12.0/me?access_token=「長期ユーザーアクセストークン」

長期ユーザーアクセストークンとユーザーIDが手に入ったと思いますので、先ほどのURLにアクセスすれば、長期ページアクセストークンが手に入ります。

https://graph.facebook.com/12.0/「ユーザID」/accounts?
  access_token=「長期ユーザーアクセストークン」

↓取得サンプル

{ "data":[ { "access_token":"「長期ページアクセストークン」", .....以下省略

以上で、無事に長期(無制限)ページアクセストークンが取得できましたので、しっかりメモして下さい。

InstagramビジネスアカウントID取得

最後に、Instagram graph API利用にもう一つ必要となる、InstagramビジネスアカウントIDの取得をしてみます。長期(無期限)ページアクセストークンが取得できていればグラフAPIエクスプローラーですぐに確認できます。

グラフAPIエクスプローラーのコマンドに下記を入力してみて下さい。入力が正確にできていると、ドロップダウンで「instagram_business_account」の入力補助が出ると思います。

GET → /v12.0/  me?fields=instagram_business_account

その状態で、右上のアクセストークン部分に先ほど取得した長期(無制限)ページアクセストークンをセットし、送信ボタンを押せばIDが確認できます。これも忘れずにメモして下さい。

nstagramビジネスIDをグラフAPIエクスプローラーで確認する方法
InstagramビジネスIDをグラフAPIエクスプローラーで確認する方法

以上で、「長期(無期限)ページアクセストークン」と「InstagramビジネスID」を確保できたと思います。Instagram Graph APIにリクエストを投げるときに必要となりますので、大切にどこかに記録してください。

おわりに

ここまでお読みになった方は十分感じたと思いますが、Yahoo APIやTwitter APIなどに比べて、事前準備がかなり手がかかりました。Bing Search APIを使うために、Microsoft Azure APIに登録した時も大変とは思いましたが、それを上回る感じです。(Azure APIの登録はこちらの記事でご紹介しています)

Facebookは広告設定も結構ややこしいですし、そのFacebookの影響とは思いますが、色々と微妙な気がしてしまいました。無料で使っている乞食なので文句もいえませんが。。

さて、Instagram Graph APIを使い、実際にサイトにInstagram投稿画像を表示させる方法などについては、次の記事でご紹介をしたいと思います。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。