Instagram Graph APIとの連携

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 でアプリを登録

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


その後、連絡先メールアドレスとアプリ名を入力要求されます。入力後「アプリIDを作成」をクリックして次の画面へ移動します。


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


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


次にアプリ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ページに遷移します。そこで、アクセスを許可したいInstagramのビジネスアカウントを選択します。複数選択しておくことも可能です。


Facebookページ側での設定が完了すれば自動的にa-blog cmsのページに遷移します。これで連携は完了です。

4. モジュールIDの使用

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


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


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