Instagram Graph APIの使い方とサイトに埋め込む方法 v5.0対応【2020年3月最新版】 | 西尾市・岡崎市・名古屋のホームページ制作はネイビーモバイル

これまでのInstagram APIが廃止されてInstagram Graph APIに置き換わることで、対応に追われている方も多いのではないでしょうか。2020年初頭にはこれまでのInstagram APIが廃止されます。ホームページに旧インスタグラムAPIで投稿を埋め込んでいた方、特にビジネスでスマホ集客やインスタ集客をしていた方は新しいInstagram Graph APIへの切り替えは急務です。

そこで、新しいInstagram Graph APIを使ってウェブサイト上にインスタグラムの投稿を表示するまでの手順を、なるべくわかりやすい方法で紹介します。
可能な限り複雑な手順を省いていますので、ほぼ設定を追っていくだけでアクセストークンとインスタグラムビジネスアカウントIDまで取得できると思います。
後半ではサンプルコードやスタイルシートを用いてホームページに埋め込む方法や、デザインサンプルも紹介しています。

※このInstagram Graph APIの情報は2020年3月11日の時点で加筆を行った最新版のものです。

閉じる

そもそもInstagram Graph APIとは？
インスタグラムをサイトに埋め込むメリット
はじめに…Instagram Graph APIの利用には根気と気力が必要です
Facebookページを作成する
Instagramのアカウントをプロアカウントに切り替える
FacebookページとInstagramアカウントを接続
Facebook管理者ツールでFacebookアプリを作成する
グラフAPIエクスプローラを開く
有効期限1時間のアクセストークンを取得
アクセストークンデバッガーで有効期限2ヶ月のアクセストークンを取得
有効期限無制限のアクセストークンを取得
InstagramビジネスアカウントIDを取得
インスタグラムの投稿をJSONデータで取得
最後にまとめ

そもそもInstagram Graph APIとは？

以前、イスタグラムより提供されていたAPIに変わり、新しく提供される事になったAPIです。インスタグラムに投稿した画像やコメント、いいねの数などをルールに従い取得することができる仕組みを持ちます。
インスタグラムの画像やデータを取得するのですが、Instagram Graph APIの利用にはフェイスブックのアカウントやフェイスブックページの作成などが必要となることを覚えておきましょう。

インスタグラムをサイトに埋め込むメリット

スマートフォンのアクセスが急増し、スマホ集客という言葉や、SNSを活用した集客も一般化してきました。その中で、特にインスタグラムの集客力に注目が集まっています。

ホームページにインスタグラムの投稿を埋め込むことで、インスタグラムの外部から自信のインスタグラムのアカウントへの導線を作ります。インスタグラムの外部からユーザーを誘導できれば、認知度の向上やフォロワー数の増大にも繋がります。
さらに、インスタグラムの投稿をリアルタイムでホームページにも表示できれば、よりタイムリーな情報の発信にも役立つでしょう。
インスタグラムはタイムラインの流れが早く、フォロワーの目に止まりにくいので、こうして投稿を広く告知していくのも施策の１つと言えます。

はじめに…Instagram Graph APIの利用には根気と気力が必要です

先に結論から言うと、Instagram Graph APIを使うのに必要な情報を取得するのですが、必要な情報は2つ。

１．InstagramビジネスアカウントID
2．アクセストークン

主に3つのフェーズに別れた作業が必要です。
１．インスタグラム、Facebookのアカウント準備フェーズ
２．アクセストークン、インスタグラムビジネスアカウントID取得フェーズ
３．インスタグラムの投稿をJSON形式で取得、埋め込み表示フェーズ（自サイト側での処理）

HTML、CSSを始め、PHPやJavaScriptに触れたことがあっても、APIやJSONに触れたことが無いとチンプンカンプンですが、アクセストークンの取得自体はただ設定をポチポチしていくだけなので、さほど難しい工程はありません。

ただ…めんどくさいです。若干の根気強さは必要かもしれません。

Facebookページを作成する

Instagram Graph APIはFacebookが提供するAPIで、利用にはFacebookアカウントとFacebookページが必要です。
Facebookアカウントを持っていない方は作成しておきます。すでにFacebookページを作成済みの方はこの項目はスキップしてください。

FacebookアカウントやFacebookページの作り方はGoogleで検索すると山ほど出てくるので、そちらを参考にしてください。

Facebookページが未作成なら作成する

Facebookページを作成していない方は作成しておきましょう。
Facebook

Instagramのアカウントをプロアカウントに切り替える

Instagram Graph APIを利用するには通常のインスタグラムアカウントではなく、Instagram プロアカウントが必要です。通常の個人アカウントでは利用できません。事前にインスタグラムアプリからプロアカウントへの切り替えが必要です。

[インスタグラムアプリ]→[設定]→[アカウント]→[プロアカウントに切り替える]でプロアカウントに変更します。

※これまでビジネスプロフィールという名称で提供されていたサービスは「プロアカウント」に名称が変わりました。

インスタグラムプロアカウントに切り替える

プロアカウントは「クリエイター」と「ビジネス」から選択できますが、クリエイターでなければ「ビジネス」を選択しておきましょう。
切り替え時にFacebookページへリンクするか尋ねられます。まだFacebookページを作成していなければ「今はFacebookにリンクしない」を選択してスキップして、後でFacebookアカウントをリンクしましょう。

参照：Instagramでビジネスアカウントを設定する

Instagramのアカウントをプロアカウントに切り替えると得られるメリット

インスタグラムのプロアカウントには通常のアカウントにはないビジネスに欠かせない便利なツール・機能が容易されています。
インスタグラムインサイト機能では投稿がどれだけ閲覧されたかわかるので、ビジネスユーザーにとってはそれだけでプロアカウントに切り替えるメリットが得られます。
また、プロフィールに連絡先や電話番号、メールアドレスも表示できたり、インスタグラムに広告を出稿できると言った特徴もあります。

Facebookにリンクをスキップした場合

[インスタグラムアプリ]→[設定]→[アカウント]→[リンク済みのアカウント]からFacebookと連携します。Facebookで投稿をシェアをオンにするかどうか任意で決定してください。

FacebookページとInstagramアカウントを接続

次はまたFacebookに戻って、作成したFacebookページとInstagramを連携させます。
[Facebook]→[Facebookページ]→[設定]→[Instagram]で[アカウントをリンク]を押してインスタグラムのアカウントを接続します。

接続が成功するとインスタグラムのアカウント情報が表示されます。

参照：FacebookページとInstagramアカウントを接続

Facebook管理者ツールでFacebookアプリを作成する

Facebook開発者ツールでFacebookアプリを作成します。
先に述べたInstagramビジネスアカウントIDとアクセストークンの取得をここで行います。

まずはFacebook開発者ツールにフェイスブックアカウントでログインしましょう。

Facebook管理者ツールで取得する情報

InstagramビジネスアカウントID
アクセストークン

自信のインスタグラムの投稿を表示させるにはこの２つの情報が必要になります。

Facebookアプリを作成

このあたりからややこしくなってきそうな雰囲気ですが、ポチポチ設定のみです。

Facebook Developers（開発者ツール）

[マイアプリ]→[アプリの作成]を選択。
マイアプリのドロップダウンからアプリの作成を選択したら、必要事項を入力して完了させます。

[表示名]にはサイト名などのわかりやすい任意の文字列を入力しましょう。

セキュリティチェックのCAPTCHA認証が表示された場合は、認証をクリアすると作成したアプリの管理画面（ダッシュボード）にアクセスできます。

アプリの作成が完了するとこのような画面が表示されます。

グラフAPIエクスプローラを開く

[ツール]→[グラフAPIエクスプローラ]を選択してグラフAPIエクスプローラを表示します。

グラフAPIエクスプローラはAPIクエリを実行して、応答結果を表示できるツールです。
詳しくはグラフAPIエクスプローラガイドを参照。
参照：グラフAPIエクスプローラガイド

有効期限1時間のアクセストークンを取得

アクセストークンは有効期限１時間、2週間、無期限と3種類あります。必要なアクセストークンは有効期限が無期限のもですが、数回のステップを得て取得します。
まずは有効期限１時間のアクセストークンを取得するまでの手順から説明します。

アクセス許可を設定

こんな画面が表示されます。
「Facebookアプリ」は作成したアプリが選択されています。すでに複数のアプリが作成されている方はプルダウンの作成済みの他のアプリに切り替えができます。

[ユーザーアクセストークンを取得]を選択。

Facebookにログイン認証する画面が出たらログインして進めます。

「アクセスの許可」に「public_profile」が表示されていることを確認します。

次に[許可を追加]のプルダウンを押します。

[Events Groups Pages]から以下の3個を選択します。

business_management
manage_pages
pages_show_list

自分のアカウントだけ表示できれば良いので[Other]から以下の1個を選択します。

instagram_basic

※他のアカウントの情報も取得したい場合は以下の２個も選択するようなのですが、今回は必要ないので省きます。

instagram_manage_comments
instagram_manage_insights

アクセス許可の詳しい説明はリファレンスをご覧ください。
参照：アクセス許可のリファレンス

有効期限１時間のアクセストークンを取得

[Get Access Token]を押してアクセストークンを取得します。

Facebookにログインする画面が表示されたら、ログイン（OK）を押して次へ進めます。

アクセストークンに表示されているのが有効期限1時間のアクセストークンです。
表示されたアクセストークン横の[ i ]を押して[アクセストークンツールで開く]を押します。

アクセストークンデバッガーで有効期限2ヶ月のアクセストークンを取得

[アクセストークンツールで開く]を押すとアクセストークンデバッガーが表示され、アクセストークンの詳しい情報が表示されます。

「有効期限」が1時間以内となっていることを確認します。

有効期限2ヶ月のアクセストークンを取得するには画面下にある[アクセストークンを延長]を押します。

有効期限2ヶ月の長期アクセストークン情報が表示されます。
[デバッグ]を押してアクセストークンデバッガーで確認します。

有効期限が2ヶ月以内になっていることを確認します。
次のステップで有効期限2ヶ月後のアクセストークン（赤枠の部分）が必要なのでコピーしておきます。

有効期限無制限のアクセストークンを取得

もう一度[グラフAPIエクスプローラ]を開きます。

ここでは下記の3つの手順を実行すると有効期限無期限のアクセストークンが取得できます。

1．アクセストークンに先程コピーした[有効期限2ヶ月のアクセストークン]を入力。
2．上部のバーに[me/accounts]と入力。
3．[送信]を押す。

赤枠で囲んだところが「有効期限無期限のアクセストークン」になります。
有効期限無期限のアクセストークンはインスタグラムの投稿を取得するのに必要になるので、コピーして控えておきます。

デバッグで有効期限が受け取らないになっていることを確認

アクセストークンデバッガーを開き、先程コピーした有効期限無期限のアクセストークンを入力してアクセストークン情報を見てみます。
有効期限が「受け取らない」になっていることを確認できれば成功。

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

もう一度[グラフAPIエクスプローラ]を開きます。

1．上部のバーに[me?fields=accounts{instagram_business_account}]と入力。
２．[送信を押す]

するとJSON形式でインスタグラムのビジネスアカウント情報が取得できます。
青枠で囲った範囲が「インスタグラムのビジネスアカウントID」です。

インスタグラムの投稿をJSONデータで取得

PHPでインスタグラムの投稿を取得します。FacebookグラフAPIのバージョンはv5.0です。
コメント、いいね数、投稿画像のURL、投稿ページへのURL、日付情報、投稿者名、コメント数を取得しています。
$instagramに取得したJSONデータの配列を格納します。取得後は配列をループさせて出力という流れになるのではないでしょうか。
WordPressで作成されているサイトなら表示させたい場所に置くだけ。

// PHP
$instagram = null; // JSONデータ配列をここに格納

$instagram_business_id = '【InstagramビジネスアカウントのID】'; // InstagramビジネスアカウントのID
$access_token = '【有効期限無期限のアクセストークン】'; // 有効期限無期限のアクセストークン
$post_count = 8; // 表示件数
$query = 'name,media.limit(' . $post_count. '){caption,like_count,media_url,permalink,timestamp,username,comments_count}';
$get_url = 'https://graph.facebook.com/v5.0/' . $instagram_business_id . '?fields=' . $query . '&access_token=' . $access_token;

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $get_url);
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);  // curl_execの結果を文字列で返す
$response = curl_exec($curl);
curl_close($curl);

if($response){
  $instagram = json_decode($response);
  if(isset($instagram->error)){
      $instagram = null;
  }
}

HTML出力部分

取得したインスタグラムの投稿を羅列表示する例です。レスポンシブでスマートフォンでは２列になります。

インスタグラムの投稿を取得してホームページに表示した例

いいねとコメントのアイコンはSVGをインラインで表示し、classにinstagram-iconが振ってあります。アイコンが白だと白っぽい写真に重なったときに見にくいですね。colorやfillでお好みのアイコンカラーに変更してください。

<?php if(is_array($instagram->media->data)): ?>
<div class="instagram-container">
<?php
foreach($instagram->media->data as $post):
  $caption = $post->caption;
//   $caption = mb_convert_encoding($caption, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
  $caption = preg_replace('/\n/', '<br>', $caption);
?>
  <div class="instagram-item">
    <a class="instagram-card" href="<?php echo $post->permalink; ?>" target="_blank" rel="noopener noreferrer">
      <img class="instagram-card__img" src="<?php if($post->media_type=='VIDEO'){ echo $post->thumbnail_url; }else{ echo $post->media_url; } ?>" alt="<?php echo $caption; ?>">
      <div class="instagram-card__badge">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="instagram-icon"><path d="M352 56h-1c-39.7 0-74.8 21-95 52-20.2-31-55.3-52-95-52h-1c-61.9.6-112 50.9-112 113 0 37 16.2 89.5 47.8 132.7C156 384 256 456 256 456s100-72 160.2-154.3C447.8 258.5 464 206 464 169c0-62.1-50.1-112.4-112-113z"/></svg>
        <div style="margin-right: 8px;"><?php echo $post->like_count; ?></div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="instagram-icon"><path d="M256 64C141.1 64 48 139.2 48 232c0 64.9 45.6 121.2 112.3 149.2-5.2 25.8-21 47-33.5 60.5-2.3 2.5.2 6.5 3.6 6.3 11.5-.8 32.9-4.4 51-12.7 21.5-9.9 40.3-30.1 46.3-36.9 9.3 1 18.8 1.6 28.5 1.6 114.9 0 208-75.2 208-168C464 139.2 370.9 64 256 64z"/></svg>
        <div><?php echo $post->comments_count; ?></div>
      </div>
      <?php if($post->caption): ?>
      <div class="instagram-card__comment"><?php echo $post->caption; ?></div>
      <?php endif; ?>
    </a>
  </div>
<?php endforeach; ?>
</div>
<?php endif; ?>

スタイルシート

// コンテナ
.instagram-container{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1px;
}

.instagram-item{
  width: 50%;
  padding: 1px;
}

@media screen and (min-width: 768px){
  .instagram-item {
      width: 25%;
  }
}

a.instagram-card{
  display: block;
  position: relative;
  margin-bottom: 16px;
}

.instagram-card__img{
  max-width: 100%;
  height: auto;
  display: block;
}

// いいね数、コメント数
.instagram-card__badge{
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: 14px;
  color: #ffffff;
}

// いいねアイコン、コメントアイコン
.instagram-icon{
  display: block;
  width: 20px;
  height: 20px;
}

// コメント
.instagram-card__comment{
  padding-left: 8px;
  padding-right: 8px;
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

最後にまとめ

ほとんどポチポチと設定していくだけでアクセストークンを取得できますが…とても作業量が多くて根気が必要ですね。ホームページにインスタグラムの投稿を埋め込んでいる方は旧Instagram APIが廃止される前に早めの対応をしたほうが良さそうです。