愛知県名古屋市のブランディングで育てる
ECコンサルティング・ECサイト構築会社｜アイヴィクス株式会社

アイヴィクス株式会社
  • twitter
  • twitter
  • facebook
  • お問い合わせ
  • 0529903467

愛知県名古屋市のブランディングで育てる
ECコンサルティング・ECサイト構築会社｜アイヴィクス株式会社

Instagram Graph APIを利用してサイトにInstagramの写真を表示する方法

blog

ブログ

  • TOPページ
  • ブログ
  • Instagram Graph APIを利用してサイトにInstagramの写真を表示する方法

投稿日：20190817 更新日：20230406 カテゴリー： ブログ

Instagram Graph APIを利用してサイトにInstagramの写真を表示する方法

Instagram APIの一部機能が2018年に終了したことにより、従来の方法では、Instagramの写真をサイトに表示できなくなってしまいました。
弊社でも従来の方法でInstagramを設置していたクライアント様より、度重なるご指摘をいただきましたので、備忘録として記録させていただくことにいたしました。

そもそも、Instagram APIが仕様変更→廃止になってしまうので、Instagram API（https://www.instagram.com/developer/）を使ったアクセストークン取得の方法ではなく、Instagram Graph API（https://developers.facebook.com/）を使った方法をご説明させていただきます。

サイトにInstagramの写真を表示するために必要なものは、

  • 無期限のアクセストークン
  • InstagramビジネスアカウントID

が必要となります。
今回は、上記の取得を目指したいと思います。

1.Facebookページ作成（自身が管理者になっている必要があります）

最初にFacebook開発アプリ（https://developers.facebook.com/）を使ってInstagramの写真を取得するので、Facebook開発アプリを利用するためとInstagramビジネスアカウントIDを取得するためにFacebookページを作成します。
アクセストークンには、ユーザーアクセストークンとページアクセストークンの２種類があります。
ユーザーアクセストークンは、個人アカウントのアクセストークンですので、Facebookの個人アカウントをお持ちでない人はアカウント登録が必要です。
ページアクセストークンは、個人アカウントが管理者のFacebookページが必要となります。

以下URLにアクセスします。
https://www.facebook.com/pages/creation/

Facebookページ作成
画面の左のビジネスまたはブランドを選択してください。「次へ」で進みます。

Facebookページ作成
PageNameとCategoryを入力します。
Categoryは、どんなビジネスに該当するのかを入力してください。
カテゴリー名の一部を入力すると、カテゴリーリストが表示されますので、選択してください。
選択肢によっては、住所等が必要なカテゴリーがあるので画面の指示に従ってください。

プロフィール写真の追加、カバー写真の追加はスキップできます。
以上でFacebookページの作成は完了です。

2. Instagram ビジネスアカウントへ変更／Facebookページとの連携

まずは、サイトに写真を表示したいInstagramアカウントをビジネスアカウントに変更している必要性があります。
流れとしては、Instagramの個人アカウントを取得後、ビジネスアカウントに変更という手順になります。
手順に追って進めていくと、最後にFacebookページと連携することができます。

Instagram をビジネスプロフィールに変更する
アカウントのアイコン（人型のアイコン）がInstagramの画面右下にありますので、タップします。
次に上の画像のように、三本線のアイコンをタップし、画面下の設定アイコンをタップしてください。

Instagram をビジネスプロフィールに変更する
アカウントをタップします。

Instagram をビジネスプロフィールに変更する
今回はビジネスプロフィールに変更したいので、ビジネスを選んで「次へ」をタップします。

Instagram をビジネスプロフィールに変更する
画面の指示の通りに進んでください。

Instagram をビジネスプロフィールに変更する
Facebookページを選んで次へをタップして終了します。

これでInstagramが個人プロフィールからビジネスプロフィールに変更され、Facebookページと連携できました。
複数のFacebookページと連携することはできません。複数ある場合は一つを選ぶ必要があります。

3.Facebookアプリを作成

以下のURLよりFacebook開発者ページに移行します。
https://developers.facebook.com/
facebook開発者ページ

Facebookにログインしている状態であれば、ログインの必要はありません。

facebook開発者ページログイン画面

右上のマイアプリから＋アプリを作成をクリックします。
表示名を入力してください。
公開されるものではないので、管理しやすい表示名で大丈夫です。
ログインしている状態であれば連絡先メールアドレスの入力は必要ありません。
ログインしていなければ連絡先メールアドレスを入力してください。Facebookで連携しているメールアドレス以外でもOKです。
次の画面でセキュリティチェックを済ませて、さらに次のシナリオの洗濯画面で
４つの選択肢から１つを選択肢して「次へ」か「スキップ」ボタンを押して次へ進みます。

facebook開発者ページアプリ登録完了
この画面が表示されれば、完了です。

4.無期限アクセストークンを発行

アクセストークンには有効期限があります。
1時間→2ヶ月→無期限と3段階でアクセストークンを取得していきます。
無期限のアクセストークンを取得するためには、GraphAPIエクスプローラーへアクセスします。
https://developers.facebook.com/tools/explorer/
取得までにGraphAPIエクスプローラーを使い倒しますので、作業しているうちに小慣れてくると思います。

4-1、有効期限1時間のアクセストークンを取得する

1時間のアクセストークンを発行
画面のようにアプリが先ほど作成したアプリ名になっていることを確認してください。
すでにアクセストークンが入っている時はデリートしてください。
「トークンを取得」→「ユーザーアクセストークンを取得」でアクセス許可を選択画面が開きます。
通常であれば自分のInstagramアカウントとの連携なので、

  • pages_show_list
  • business_management
  • instagram_basic
  • pages_manage_posts

にチェックを入れて「アクセストークンを取得」をクリックします。

Facebookグイン認証

Instagram連携認証
管理者としてのログイン認証と連携の認証がありますので、「ログイン」と「OK」で進めてください。

4-2、取得したアクセストークンの確認方法

アクセストークンデバッガでは取得したアクセストークンを確認することができます。
以下のURLより確認画面へアクセスしてください。
https://developers.facebook.com/tools/debug/accesstoken

アクセストークンデバッガ
アクセストークンをペーストすると画面のようにアクセストークンの概要を調べることができます。
この先もあと2回アクセストークンを取得していきますので、それぞれ確認することをおすすめします。

4-3、有効期限2ヶ月のアクセストークンを取得する

先ほど取得したアクセストークンの有効期限を2ヶ月に延長する作業をするには、下の画面のようにアクセストークンの左側にある青色のアイコンをクリックし、アクセストークン情報を開きます。
情報を確認したら「アクセストークンツールで開く」をクリックします。
GraphAPIエクスプローラー

すると、先ほど確認したアクセストークンデバッガの画面にアクセスしますので、画面下の「アクセストークンを延長」をクリックし、セキュリティ認証を確認するためパスワードを入力して「送信する」ボタンをクリックしてください。

アクセストークンを延長

1時間以内に上記の作業を完了すると、有効期限2ヶ月のアクセストークンの取得に成功します。
2ヶ月のアクセストークン取得完了
この画面では、有効期限2ヶ月のアクセストークンの全容が確認できませんので、画面右側の「デバッグ」をクリックするとアクセストークンデバッガに遷移します。
有効期限2ヶ月のアクセストークンの取得完了確認
画面上部のアクセストークンがが有効期限2ヶ月のアクセストークンになります。
有効期限が2ヶ月になっていることも確認できます。

4-4、無期限のアクセストークンを取得する

無期限のアクセストークンの取得で最後です。
最後のアクセストークンの取得は、Graph APIエクスプローラーで行います。
https://developers.facebook.com/tools/explorer/

無期限のアクセストークン
画像のように
アプリは作成したアプリ名が表示されていることを確認し、
アクセストークンには有効期限2ヶ月のアクセストークンをペーストし、
下のGET→から始まるテキストボックスには、以下のコードをペーストしてください。
me/accounts
隣の「送信」をクリックすると、
全てのFacebookページのアクセストークンが表示され、
その中でInstagramビジネスアカウントと連携したFacebookページが今回必要な無期限のアクセストークンになります。

4-5、無期限のアクセストークンの確認

お疲れ様でした。以上で無期限のアクセストークンの取得は完了しました。
次に取得したアクセストークンが無期限かどうかの確認に移ります。
アクセストークンデバッガにアクセスします。
https://developers.facebook.com/tools/debug/accesstoken/
取得した無期限のアクセストークンをペーストしてデバッグボタンをクリックします。

無期限のアクセストークンの確認

画面のように有効期限が「受け取らない」となっていたら、成功です！

5. Instagram ビジネスアカウントIDの確認

Graph APIエクスプローラーへアクセスします。
https://developers.facebook.com/tools/explorer/

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

  • 1.アプリが作成したアプリ名になっているか確認します。
  • 2.アクセストークンに無期限のアクセストークンをペーストします。
  • 3.アクセストークン下のGET→のテキストボックスに以下のコードを入力します。
    me?fields=instagram_business_account
  • 4.送信ボタンをクリックします。
  • 5.インスタグラムビジネスIDが表示されるのを確認します。
    “instagram_business_account”
    “id”: “xxxxxxxxxxxxxxxxx”　←17桁

こちらで、Instagram Graph APIを利用するための下準備が完了します。
次に、インスタグラムの写真等の情報を取得するために「無期限のアクセストークン」と「InstagramビジネスアカウントID」が必要となります。

6.Webサイトに Instagram の写真を表示するためのプログラムを作成する

【InstagramビジネスアカウントID】と【無期限のアクセストークン】、【id名】、【表示したい件数：例12】を以下のソースコードに代入します。
【】は外してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- Instagramの投稿出力 -->
<script>
window.addEventListener('DOMContentLoaded', function(){
  var igID = '【InstagramビジネスアカウントID】';
  var token = '【無期限のアクセストークン】';
  var ulID = '【id名】';
  postOutputInsta(igID, token, ulID);
}, false);
 
function postOutputInsta(igID, token, ulID) {
  const num   = 【表示したい件数:例12】;
  const XHR   = new XMLHttpRequest();
  const fAPI  = 'https://graph.facebook.com/';
  const query = 'media.limit(' + num + '){caption,like_count,media_url,permalink,timestamp}';
  const gURL   = fAPI + igID + '?fields=' + query + '&access_token=' + token;
  if(XHR){
    XHR.open('GET', gURL, true);
    XHR.send(null);   // nullは省略してもOK
    XHR.onreadystatechange = function(){
      var html = '';
      if(XHR.readyState === 4 && XHR.status === 200){
        var insta = JSON.parse(XHR.responseText);
        if (insta['media']) {
          if (insta['media']['data']) {
            $.each(insta['media']['data'],function(index, elem) {
              //html生成
              html += '<li>';
              html += '<a href="' + elem.permalink + '"><img src="' + elem.media_url + '" alt="" /></a>';
              html += '</li>';
            });
          }
        }
      } else {
        //エラー時の表示
        html += '<li>通信エラー</li>';
      }
      $('ul#' + ulID).html(html);
    };
  }
}
</script>

表示したい箇所（html）に以下ソースをいれてください。

1
<ul id="【id名】"></ul>

取得できていれば、Instagramの写真が一覧で取得されます。
取得に失敗してれば、通信エラーと表示されるようになっていますので、最初から見直してみてください。

まとめ

従来の方法（Instagram APIのSandbox）を使用するよりも手間がかかりますが、2020年までには移行を完了したいですね。
ご紹介した方法は、2020年以降でも安心してInstagramの情報を取得できる方法です。
一度お試しください。

【関連記事】
自社ECサイトの集客方法7選【費用対効果が高いのはどれ？】
【アクセス数倍】ネットショップのアクセス数を増やす方法7選

ブランディングで育てるECコンサルティング会社｜アイヴィクス株式会社

Instagram Graph APIを利用してサイトにInstagramの写真を表示する方法

この記事が気に入ったらいいね！しよう

ECコンサルティングの最新記事をお届けします

                                                               
×