Instagram Graph APIとの連携

この記事は2020年7月時点で作成された記事です。提供サービス側の仕様やUIの変更によって情報が最新ではない場合がございます。

a-blog cmsではInstagram API を通して投稿された情報を表示するために Api_Instagram_Users_Media_RecentApi_Instagram_Users_Media_Likedを以前から提供していました。しかし2020年中に今までのInstagram APIは廃止され、代わりにFacebookが提供する、Instagram Graph API の使用が推奨されるとのことです。 そこでInstagram Graph APIに対応した新しいモジュール Api_Instagram_Users_Media_Recent2 を用意しました。このモジュールはInstagram Graph APIを用いてInstagramの投稿を表示するための機能を提供します。

ただしこのモジュールではInstagram Business Accountでないと情報を表示できません。

設定手順

ではここからInstagram Graph APIとの連携手順をご案内していきます。 Instagram Graph APIとの連携は以下の手順で行います。

  1. Facebook for Developers への登録
  2. Facebook for Developers でアプリを登録
  3. a-blog cmsの認証処理
  4. モジュールIDの使用

1. Facebook for Developers への登録

Facebookアカウントを使ったSNSログインのための準備として、a-blog cmsの 管理ページ>コンフィグ>プロパティ設定 にあるFacebookアプリケーション欄の「アプリ ID」と「app secret」の2つの情報が必要になります。この2つの情報は、 独自のFacebookアプリを作成することで入手できます。

注意:Facebookアプリの作成には、Facebook開発者登録が必要です。開発者登録がされていない場合には https://developers.facebook.com より事前にご登録ください。

2. Facebook for Developers でアプリを登録

新規アプリを作成画面へ移動します。上部ナビゲーションのマイアプリから「新しいアプリを追加」を選択します。


マイアプリを選択


新しいアプリを追加


「新しいアプリを追加」を選択すると、アプリの使用目的選択画面が表示されます。該当の項目を選択してください。使用目的がどれか未定またはインスグラムの画像をWebサイトに表示させたいだけの場合は「その他」を選択しておいてください。


アプリの利用目的を選択


アプリの利用目的を選択すると、アプリ名入力画面が表示されます。アプリ名と連絡先メールアドレスを入力して「アプリIDを作成」をクリックします。


アプリ名と連絡先メールアドレスを入力してアプリIDを作成


その後、セキュリティチェック画面が表示されます。「私はロボットではありません」にチェックを入れ、「送信」ボタンをクリックします。


「私はロボットではありません」にチェックを入れ、「送信」ボタンをクリック


これでアプリID の作成は完了です。次にアプリの登録が求められるので InstagramではなくFacebook ログインを選択します。



Facebookログインを選択後、サイドバーから、Facebookログイン > 設定 をクリックしてください。


Facebookログイン -> 設定


認証に必要なOAuthリダイレクトURIを登録します。ここには https://ドメイン名/callback/instagram2.html と入力してください。


リダイレクトURIを登録

次にアプリIDのベーシック設定をします。サイドバーから 設定 > ベーシック に移動します。


設定 > ベーシック


以下のようなフォームが表示されますので、アプリドメイン、連絡先メールアドレス、プライバシーポリシーのURL、利用規約のURL、アプリアイコンを登録してください。開発中であれば、プライバシーポリシーのURLと利用規約のURLは適当なもので問題ありません。


ベーシック情報を入力


登録後、アプリIDおよび app secretを a-blog cms に登録するために控えておきます。

3. 取得したアプリ ID, app secretなどを a-blog cmsに登録

次に控えた情報をa-blog cms側に登録します。 管理ページ>コンフィグ>プロパティ設定 から設定できます。プロパティ設定画面の「ウェブサービス」からInstagram Graph APIの各情報を登録します。



管理ページ > コンフィグ > 外部認証設定からInstagram Graph APIを認証します。



認証ボタンをクリックするとFacebookページに遷移します。ログイン情報の確認画面が表示されましたらインスタグラムと連携するFacebookアカウントであることを確認し、「〇〇としてログイン」をクリックします。もし別アカウントでログインしようとしていた場合は「別のアカウントにログインします」よりアカウントの切替を行ってください。


Facebookアカウントの確認


次に、アクセスを許可したいInstagramのビジネスアカウントを選択します。複数選択しておくことも可能です。


Instagramのビジネスアカウントを選択


アプリからアクセスできるページを選択してください。複数選択しておくことも可能です。


アプリからアクセスできるページを選択


アクセス許可設定画面では、全て「はい」の状態であることを確認し、「完了」をクリックします。


アクセス許可設定


「〇〇がFacebookにリンクされました」と表示されたことを確認し、「OK」をクリックします。


リンク完了画面


OAuth認証に成功すると、自動的にa-blog cmsのページに遷移します。「OAuth認証に成功しました。」と表示されたら、「トップページに戻る」をクリックします。これで連携は完了です。


OAuth認証成功


4. モジュールIDの使用

次にGraph APIを使用したモジュールを使用してみましょう。モジュール名は Api_Instagram_Users_Media_Recent2 です。管理画面 > モジュールID より新規モジュールIDを作成します。 この時、ビジネスアカウントを設定しないとモジュールIDを設定しても何も表示されないので注意してください。


またモジュールのスニペット情報は クイックサーチ機能(⌘ + K)より;recent2と入力していただくと見つかりますのでこれを利用してください。


正しく認証されていればスニペットを貼り付ける、モジュールIDを追加すると以下のようにインスタグラムの投稿一覧が表示されます。


スニペットのサムネイル画像サイズを調整する場合は FACEBOOK for Developers | Embedding Instagram Posts "Query String Parameters" を参考に画像のパラメーターを調整してください。