Instagram Graph APIを使用してWEBページに埋め込む手順

Instagram Graph APIは、Facebook管理者ページの中で使えるAPIツールです。

Instagram情報へのアクセス許可設定やアクセストークン、ビジネスアカウントIDなどを発行できます。

設定するためには、InstagramのプロアカウントとFacebookページへの連携が必要です。

Instagram Graph APIを使用してWEBページに埋め込む

本記事では「Instagram Graph API」を使ってWEBサイトにInstagramを埋め込む方法をご紹介します。

これは自分のInstagramアカウントはもちろん、他人のアカウントを埋め込む事もできます。

クライアントが運営するInstagramアカウントをWEBページに埋め込める訳です。

自動で更新される

APIを使った埋め込みの一番の利点は自動で投稿が更新される事です。

Instagramに新しい投稿がされれば、自動で埋め込んだ部分にも反映がされます。

単に埋め込むだけだとその投稿で固定されてしまいます。この違いがAPIを利用する最大のメリットです。

準備するもの

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

Instagramアカウントはそのままでは「Instagram Graph API」を利用する事ができません。

「プロアカウント」という上位権限のものに変更する必要があります（無料です）。

Facebookページと連動できるようになる

Instagramのプロアカウントに変更すれば、Facebookページと紐づけできるようになります。

この紐づけにより「Instagram Graph API」のサポート機能を利用できるようになるのです。

プロアカウント変更時の注意

プロアカウントはいつでも通常アカウントに戻す事ができます。

ただ通常アカウントに戻すと、今回のInstagram埋め込みに関する紐づけやビジネスアカウントIDなどが無効になる場合があります。

一度APIを使って埋め込みをしたら、通常アカウントには戻さないようにしましょう。

なぜFacebookページの紐づけが必要か

紐づけする「Facebookページ」が必要としていますが、これは何故でしょうか？

今回使う「Instagram Graph API」というツールは「Facebook開発者ページ」の中に組み込まれています。

ご存じの通りFacebookがInstagramを買収したため、開発配下に入っている訳ですね。

Facebookアカウントを紐づけることでセキュリティを向上

つまりFacebook開発者ツールの中で「Instagram Graph API」を利用するためには、facebookアカウントが必要になる訳です。

先ほど説明したInstagramのプロアカウントをfacebookページに紐づけすれば、APIの利用者を明確にできます。

セキュリティの向上の観点からも、単にAPIだけ使われないようにしているのです。

データ出力構成ファイル

今回データの出力にはjqueryを使っています（ページ下でコードは紹介しています）。

phpファイル内に、APIで取得したビジネスアカウントIDやアクセストークンが入っています。

jsファイルで読み込んだInstagramデータを適宜加工・出力しています。

データを出力する構成ファイルは自由にカスタマイズしてもらって構いません。

Instagram Graph APIとは？

「Instagram Graph API」はFacebook管理者ページの中に入っているAPIツールです。

このツールを利用する事でInstagramの投稿情報をWEBページ内に表示させる事ができる様になります。

Instagramの投稿へアクセスできる許可範囲を決定して、専用アカウントであるビジネスアカウントIDを発行します。

さらに許可証となるアクセストークンもこのAPIツールで取得する事になります。

InstagramビジネスアカウントIDとは

今回はInstagramのスマホアプリやPC版のインスタグラムではなく、一般のWEBサイト上にInstagram情報を表示させようとしている訳です。

そのため、専用のInstagramビジネスアカウントをそれぞれに発行して、利用者の管理・確認をしている訳です。

知らない人に無断で勝手に使われないようにしているのですね。

ですので発行されたビジネスアカウントを利用しないとInstagramを表示させる事はできません。

アクセストークンとは

アクセストークンとは、APIを使用するための「許可証」みたいなものです。

本記事で紹介する一連の手続きを通じて発行されるものです。

ビジネスアカウントIDとともに実際の出力コード（phpファイル内）に貼って提示します。

発行された許可証を提示する事で、あなたが正式な利用者である事を証明している訳です。

事前準備：InstagramとFacebookを連携させる

それではFacebook管理者ページ内の「Instagram Graph API」を使えるようにしていきます。

まずは事前準備です。InstagramアカウントとFacebookページを連携していきましょう。

Facebookページ側からの操作

PCで自身のFacebookページを開いて、画面左の「設定」を押します。

左のメニュー欄から「Instagram」を選びます。

開いたページでInstagramアカウントをリンクの欄にある「アカウントをリンク」をクリックします。

Instagramのログインページが表示されますので、IDとパスワードを使ってログインしましょう。

これでFacebookページとInstagramが紐づけされた事になります。

では次章よりビジネスアカウントIDやアクセストークンを取得するまでの手順をご紹介します。

Facebookアプリの作成

まずはFacebookアプリを作成します。

Facebookアプリとは「Instagram Graph API」を利用する土台となるアプリと思って下さいね。

まずはPCでFacebook管理者ページを開きましょう。

Facebook管理者ページはこちら

上部メニュー右端の「マイアプリ」をクリックしましょう。

「アプリを作成」のボタンを押しましょう（画面上では既に一つアプリが作られていますが気にしないで下さい）。

次の画面で「ビジネス統合の管理」を選択して「次へ」を押します。

次に「アプリ表示名」を決定します。今回のInstagramを埋め込みする専用の名前を付けましょう。

「連絡先」はfacebookに登録しているメールアドレスが入っているはずですので、そのままで大丈夫です。

「アプリの目的」は以下のいずれかを選択しましょう。

その下の「ビジネスマネージャーアカウント」については、持っている場合は設定しましょう。

ここは任意ですので無理に選択する必要はありません。

最後に「アプリを作成」を押しましょう。

セキュリティチェックの認証画面はチェックをつけて「送信」を押しましょう。

上記のような画面が表示されたらアプリ作成は完了です。

アクセストークン1個目の取得

次に埋め込み許可証となるアクセストークンの1個目を取得します。

今回を含めてアクセストークンは合計3個取得します。

それぞれをコピーペーストで使いますので、別途メモ帳など（Wordでも可）を準備して保存して下さい。

トークンのアクセス許可を得る

Facebook管理者ページの上部メニューから「ツール」→「グラフAPIエクスプローラー」を選択します。

開いた画面の右側に「アクセストークン」と書いてある箇所があります。

その下にあるFacobookアプリの欄は、先ほど作成したアプリ名が表示されている事を確認しましょう。

その下の「トークンを取得」の選択より「ユーザーアクセストークン」を選択します。

Facebookでログインのウィンドウが表示されるので、表示されているFacebookアカウントでログインしましょう。

ユーザートークンの下に「アクセス許可」と表示され、現在は「public_profile」のみが入った状態になっていると思います。

その下に「許可を追加」の選択欄があるので、まず「Events Groups Pages」の中から以下の6個の項目を選びましょう。

「Events Groups Pages」から選択する6個（順番は関係ありません）

項目を選択すれば左端にチェックが付き、項目が追加されていきます。

次にその下にある「Other」から選択するのは3つです。

「Other」から選択する項目（順番は関係ありません）

9個のオプションを選択した状態

合計9個のオプションを選択した状態で、一番上にある英語のボタン「generate access token」を押します。

Facebookログインの画面が出たら、そのまま右下の「OK」を押しましょう。

これで1個目のアクセストークン（上部の英数字の羅列）が生成されましたので、コピーしておきましょう。

アクセストークン1個目

EAAGmaEhiSIsBAOyI5ZCrl6YZBQUAaZAcfu1I2DTQR2YHgmo0eC4EPmqJJ5LMZCTU33wggHKi7StitAQocQkCyf0ojQZA8bsJOeKsYcQZBKMgZCaLDI7M82bwg96CFLoKP9eZCCT3kO5VUD69ATHMmpnumGDmrkvfXEjZAzAYvtGQH4nOGBr3EgZCyQwxXRLZBdYqGAOsQKz014G28czfX1LYxVP1netuY4ZC4abk3R6QE9FP6AZDZD

上記の英数字をメモ帳やWordファイルなどに貼ってメモしておきましょう。

アクセストークン2個目の取得

では2個目のアクセストークンの取得をおこないます。

先ほどコピーしたアクセストークンの画面上にあるメニュー「マイアプリ」を押します。

アプリが複数登録してある場合は、先ほど登録したアプリ名を選択しましょう。

アプリ情報のメモ

開いた画面左上に選択したアプリ名が表示されていると思います。

その下にあるメニューから「設定」→「ベーシック」を選択して下さい。

画面右欄に「アプリID」と「app secret」が上部に表示されていると思います。

左のアプリIDは先ほどのアクセストークン同様に、メモ帳にコピーして追記おきましょう。

隣のapp secretは●で隠してありますので、右端の「表示」ボタンを押します。

小窓でFacebookのログインパスワードを聞かれますので、入力して下さい。

app secretの●部分が解除されますので、表示されたコードをメモ帳にコピーしましょう。

これでアプリIDとsecretの情報をそれぞれ保存したはずです。

ブラウザURLを作る

以下のURLひな型の所定の位置に、これまでコピーしてきた3つの情報を入れてURLを作ります。

下のURLをメモ帳に貼り付けて、保存済みのデータを貼り付けて加工しましょう。

元のURLひな型：

https://graph.facebook.com/v7.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリIDが入る場所】&client_secret=【app secretが入る場所】&fb_exchange_token=【1個目のアクセストークンが入る場所】

貼り付けたURLの例：

https://graph.facebook.com/v7.0/oauth/access_token?grant_type=fb_exchange_token&client_id=464441797920907&client_secret=ffd1a67a9eb05a2be33d38dfe4722ac9&fb_exchange_token=EAAGmaEhiSIsBAOyI5ZCrl6YZBQUAaZAcfu1I2DTQR2YHgmo0eC4EPmqJJ5LMZCTU33wggHKi7StitAQocQkCyf0ojQZA8bsJOeKsYcQZBKMgZCaLDI7M82bwg96CFLoKP9eZCCT3kO5VUD69ATHMmpnumGDmrkvfXEjZAzAYvtGQH4nOGBr3EgZCyQwxXRLZBdYqGAOsQKz014G28czfX1LYxVP1netuY4ZC4abk3R6QE9FP6AZDZD

情報の前後にダブルコーテーションなどは付けずそのまま入れましょう。上記の様に長いURLができます。

全体をコピーしてブラウザのURL欄に直接貼りましょう。

するとブラウザ画面に上記の様な文字列が表示されます。

ここに記載されているのが2個目のアクセストークンですので、丸ごとコピーしてメモ帳に保存してください。

{"access_token":"EAAGmaEhiSIsBAAmCDBZAQjC38CSYoOwlxo5VeQvJuMsu3OZBYFb2mZCYCVZBoTdSO5K5g2LX9tfXRipf5pnjbId4VBVKoDO7AQuDdqSUalfopXSEC41FVyfrpeikKrMqH38LTd12sADEUQyKW3Lg47rPutQ9bauboq7VmHy0pAZDZD","token_type":"bearer","expires_in":5184000}

2個目のアクセストークン部分

上記からコード部分だけを抜粋しています。

EAAGmaEhiSIsBAAmCDBZAQjC38CSYoOwlxo5VeQvJuMsu3OZBYFb2mZCYCVZBoTdSO5K5g2LX9tfXRipf5pnjbId4VBVKoDO7AQuDdqSUalfopXSEC41FVyfrpeikKrMqH38LTd12sADEUQyKW3Lg47rPutQ9bauboq7VmHy0pAZDZD

アクセストークン3個目の取得

ではいよいよ3つ目のトークン取得です。

ブラウザURLを作る

以下のURLのひな型に先ほどの要領で、2個目のアクセストークン情報を貼ります。

https://graph.facebook.com/v7.0/me?access_token=【2個目のアクセストークンが入る場所】

アクセストークン2個目を貼り付けた状態

https://graph.facebook.com/v7.0/me?access_token=EAAGmaEhiSIsBAAmCDBZAQjC38CSYoOwlxo5VeQvJuMsu3OZBYFb2mZCYCVZBoTdSO5K5g2LX9tfXRipf5pnjbId4VBVKoDO7AQuDdqSUalfopXSEC41FVyfrpeikKrMqH38LTd12sADEUQyKW3Lg47rPutQ9bauboq7VmHy0pAZDZD

このURLをアドレスバーにもう一度貼りつけると、次は以下のような画面になります。

画面上の情報

{ "name": "\u5f8c\u85e4 \u6681\u5178", "id": "3636818926433937" }

このid部分を使いますので、まずは丸ごとコピーしておきましょう。

さらにブラウザURLを作る

ここでまたまたやってきました3回目のURL貼り付けです。ひな型は以下です。

URLひな型

https://graph.facebook.com/v7.0/【いま取得したidが入る場所】/accounts?access_token=【2個目のアクセストークンが入る場所】

貼り付けたURLの例

https://graph.facebook.com/v7.0/3636818926433937/accounts?access_token=EAAGmaEhiSIsBAAmCDBZAQjC38CSYoOwlxo5VeQvJuMsu3OZBYFb2mZCYCVZBoTdSO5K5g2LX9tfXRipf5pnjbId4VBVKoDO7AQuDdqSUalfopXSEC41FVyfrpeikKrMqH38LTd12sADEUQyKW3Lg47rPutQ9bauboq7VmHy0pAZDZD

すると上記のような画面になり、その中に3番目のアクセストークンが表示されます。

まずはこれまで通りコードを丸ごとコピーしましょう。

アクセストークン3個目部分

コードの中でアクセストークンが記載されている箇所は以下の部分です。

"access_token": "EAAGmaEhiSIsBAHVSZBAZBnESOCT8HQuEkvzpDB3ZBU8Kb2jOdZCwonhZBjahtHyPIl1MuZBb0kIxLfiTpLV8ZCz9ZC4NTZBgCKtltPY5ZBgiZBmjBbqaX1VLoV9X1qqThxCyr2wD73HmLrzMpMXFSkhwpFtrCHxB2myZAVV4VZB1EfGEZCxAZDZD"

access_tokenが二つ以上ある場合

画面を見てわかる通り、人によってaccess_tokenが2つ以上記載されている場合があります。

見分け方として「name:」のところにInstagramと連携させた自分のFacebookページの名称が入っている段があるはずです。

名称が入っている方を、3つ目のアクセストークンとしてコピーしましょう。

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

ではいよいよInstagramを埋め込むアカウントを生成します。

その前にこれまでに取得したアクセストークンに間違いがないかどうか確認をします。

アクセストークンのデバッグ

Facebook開発者ページ上部メニューから「ツール」→「アクセストークンデバッガー」を選択します。

すると上記のような画面が表示されます。

ボックス欄に先ほどの3個目のアクセストークンを入力して「デバッグ」ボタンを押します。

すると上記のような画面が出てきますので、以下2つを確認しましょう。

9個のアクセス許可オプション

違いがあったりすると、場合によってはやり直しとなる場合がありますので注意しましょう。

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

ではデバッグ画面の上部にあるメニューから「マイアプリ」を押して、以前の画面に戻ります。

「ツール」→「グラフAPIエクスプローラ」を選択します。先ほどの9つのアクセス許可オプションを選択した画面ですね。

この画面で2か所に必要な情報をペーストします。

そうすると中央のグレー枠内にIDが表示されます。

これがInstagramのビジネスアカウントIDです。やっとここまで来ましたね。

InstagramのビジネスアカウントID

{ "id": "275278989191649" }

繰り返しとなりますが、「Instagram Graph API」を使ってインスタの写真の情報を取得するためには

この2つが最終的に必要になります。それ以外は全てこの2つの情報を取得するための布石になります。

WEBサイトに埋め込む構成ファイル・コード

ここまでで「Instagram Graph API」を使ってInstagramの情報を引き出す「権限」を得ました。

ではいよいよWEBページにInstagramの投稿を表示させるプログラムを構成します。

この構成ファイル（instagram.php）に先ほどの3つ目のアクセストークンとビジネスアカウントIDを入れます。

管理者のIDとその許可証を持ち合わせている事を証明する訳です。

これによりFacebook管理者ツールの「Instagram Graph API」の機能が発動し、WEBページ上にInstagramの投稿が流れてきます。

構成ファイル

構成パスは適宜変更して構いません。

index.html内コード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="gallery" class="gallery"></ul> <div class="instagram-gallery"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script> <script src="js/script.js"></script> </body> </html>

script.js内コード

$.getJSON("php/instagram.php", function(instagram_data){ const gallery_data = instagram_data["business_discovery"]["media"]["data"]; let photos = ""; const photo_length = 9; for(let i = 0; i < photo_length ;i++){ photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"><br>' + gallery_data[i].caption + ' </li>'; } $("#gallery").append(photos); });

1行目のJSONファイルのパスはjsコードの位置からではなく、読込をしたindex.htmlからの位置となります。

ですのでphp/instagram.phpとなっている事に注意しましょう。

CSSファイルは従来通り自由に適用してください。

instagram.php内コード

<?php $instagram_business_id = 'InstagramビジネスアカウントIDが入る場所'; $access_token = 'アクセストークン3個目が入る場所'; $target_user = 'Instagramアカウント名を入れる場所'; //上記の他人のInstagramアカウント名の情報を取得する場合 $query = 'business_discovery.username('.$target_user.'){id,followers_count,media_count,ig_id,media{caption,media_url,media_type,like_count,comments_count,timestamp,id}}'; //上記の項目を呼び出せるので、js内で加工して表示する //自分のアカウント情報のみ（コメントアウト中） //$query = 'name,media{caption,like_count,media_url,permalink,timestamp,username}&access_token='.$access_token; $instagram_api_url = 'https://graph.facebook.com/v7.0/'; $target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $target_url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $instagram_data = curl_exec($ch); curl_close($ch); echo $instagram_data; exit;

6行目でリクエストしているquery内の項目が、script.js内で加工できる内容になります。

クライアントのInstagram投稿を埋め込む場合

自分のアカウントはもちろん、クライアントのInstagramを埋め込む場合も本記事と同様の手順を踏みます。

phpファイル内の以下の部分が変わります。

上記instagram.php：4行目

$target_user = '他人のInstagramアカウント名';

ここにクライアントのInstagramアカウント名を入れれば、クライアントの投稿がWEBページに表示されます。

クライアントのInstagramもプロアカウントに変更

クライアントInstagramのプロアカウントへの変更が必要です。

クライアントの方でプロアカウント（クリエイターアカウントやビジネスアカウント）にしてもらう必要があります

自分に権限があれば自身で行いましょう。

それによりクライアントのInstagramの投稿も埋め込む事ができる様になります。

自分のアカウントもプロアカウントにしておく

クライアントのInstagramを対象にする場合も、自分のInstagramアカウント（プロアカウント）は必要です。

自分のプロアカウントでFacebook管理者ページを操作し、今回の様にアクセストークンやInstagramビジネスアカウントIDを取得する必要があるからです。

Facebookページとの連携について

Facebookページとも連携が必要ですが、Facebookページは運営履歴がなくても大丈夫です。

Instagramビジネスアカウントの制作時に新規のFaceBookページが作れるので、そちらでも構いません。

クライアントの投稿埋め込みであっても、自分のアカウントをプロアカウントにしてFacebookページと連携しておく事は変わりません。

誰の投稿でも埋め込みができるのか

クライアントでなくても他人のInstagramアカウント名がわかれば、埋め込みができるのでしょうか。

結論として、相手がプロアカウントにしているのであれば埋め込みができます。

相手のInstagramアカウント名を先ほどのinstagram.php4行目に入れるだけですからね。

埋め込みする権限（ビジネスアカウントIDやアクセストークン）は、自分のInstagramを使って取得している訳です。

ですので埋め込むアカウント情報自体は他人のものでも問題はありません。

勝手に埋め込まない事

ただ相手のアカウントですから勝手にするのはダメです。

埋め込む場合は事前に一報して許可を取るのが筋ですよね。

一押し人気コーナー紹介