Instagramモジュールの初期設定

Instagramと連携することで、Instagramの写真やキャプションを見せることができます。Instagramアカウントをお持ちでない方は、まずは公式サイトからアカウントを取得してください。

⇒ Instagramアカウントを作成する(外部サイト)

Instagramモジュールの初期設定

登録が必要となるもの
  • Instagramアカウント
  • Facebookアカウント
  • Facebook for Developersアカウント(Facebookアプリの作成に必要)

1
コントロールパネルから[設定][便利な機能][Instagram]を選択します。

2
“Instagram設定ダイアログ”が表示されますので、表示されているデベロッパーサイトのマイアプリのURL(https://developers.facebook.com/apps/)にアクセスし、Facebookアカウントでログインします。

 Hint

Facebook for Developersアカウントについて

Facebook for Developersアカウント(開発者アカウント)は、Facebookの開発者としてアプリを作成することができるアカウントです。Facebook for Developersアカウントを取得していない場合は、デベロッパーサイトにログインすると、「Facebook for Developersへようこそ」画面にFacebook for Developersアカウントを作成するメッセージが表示されます。このときは、Facebook for Developersアカウントを作成してください。

3
デベロッパーサイトのマイアプリの[新しいアプリを追加]をクリックします。表示されたアプリIDを作成画面を下記を参照して各項目を選択・入力後にアプリIDを作成します。

アプリの利用目的は[その他]を選択します。

アプリ表示名など各項目を入力し、[アプリIDを作成]ボタンをクリック後、「私はロボットではありません」にチェックを入れて[送信]ボタンをクリックします。

アプリ表示名(必須) 任意のアプリ名を入力します。
アプリの連絡先メールアドレス (必須)

アプリの連絡先メールアドレスを入力します。
※このメールアドレスは、ポリシー違反の疑いやアプリの制限、またはアプリが削除または不正使用された場合のアプリの復元手順についての連絡に使用されます。

ビジネスマネージャアカウントをお持ちですか? 

ビジネスマネージャアカウントがある場合は選択します。
※登録は必要ありません。

4
アプリIDの追加が完了すると、アプリの設定画面が表示されます。製品の追加(または左側のメニューの「プロダクトの[+]ボタン)の一覧の中からInstagram Basic Display[設定]ボタンをクリックします。
※Instagram Basic Displayの設定は後の手順で行います。

5
サイドメニューの[設定] → [ベーシック]を選択し、アプリの設定を行います。各項目を下記を参照して入力・選択後、変更を保存します。

アプリID  アプリIDが表示されます。
※このアプリIDはInstagramアプリIDではありません。
app secret app secretが表示されます。
※このapp secretはInstagram app secretではありません。
表示名 アプリIDを追加した際のアプリ名が表示されます。
ネームベース (設定不要)
アプリドメイン (設定不要)
連絡先メールアドレス アプリIDを追加した際の連絡先メールアドレスが表示されます。
プライバシーポリシーのURL アプリを使用するサイトのURL(https://~)を入力します。
利用規約のURL

アプリを使用するサイトのURL(https://~)を入力します。

ビジネス目的で使用 “自分のビジネスをサポート”を選択します。

[プラットフォームを追加]ボタンをクリックし、プラットフォームを選択画面から「ウェブサイト」を選択して、「サイトURL」にアプリを使用するサイトのURL(https://~)を入力して[変更を保存]ボタンをクリックします。

6
サイドメニューの[プロダクト] → [Instagram Basic Display] →[Basic Display]を選択し、Basic Display画面の[Create New App]ボタンをクリックします。Instagram Basic Display用のアプリの表示名を入力し、[アプリを作成]ボタンをクリックすると、Instagram Basic Display用のアプリが作成されます。

7
再度サイドメニューの[プロダクト] → [Instagram Basic Display] →[Basic Display]を選択し、表示されたBasic Display画面の各項目を下記を参照して入力後、「InstagramアプリID」と「Instagram App Secret」を控えて[変更を保存]ボタンをクリックします。

InstagramアプリID

InstagramアプリIDが表示されます。

  • Instagram連携の設定に使用します。
Instagram App Secret

Instagram App Secretが表示されます。

  • Instagram連携の設定に使用します。
  • 表示されていない場合は[表示]ボタンをクリックし、Facebookパスワードを入力して送信後に確認してください。
Instagram表示名 Instagram Basic Display用アプリの名前が表示されます。
有効なOAuthリダイレクトURI “Instagramダイアログ”に表示されている《リダイレクトURI》を入力します。
コールバックURLの許可の取り消し “Instagramダイアログ”に表示されている《リダイレクトURI》を入力します。
データの削除リクエスト “Instagramダイアログ”に表示されている《リダイレクトURI》を入力します。

8
次に、サイドメニューの[役割] → [役割]を選択し、「Instagramテスター」の[Instagramテスターを追加]ボタンをクリックします。連携するInstagramアカウントのユーザーネームを入力して、[送信]ボタンをクリックします。

  • 送信後はInstagramテスターに「●●さん(承認待ち)」と表示されます。

9
Instagramサイトにログインして[設定] → [アプリとウェブサイト]の「テスターへのご招待」のInstagram表示名を確認して[承認する]ボタンをクリックして承認してください。

10
“Instagram設定ダイアログ”に手順7で取得した「InstagramアプリID」と「Instagram App Secret」を各項目に入力して[認証]ボタンをクリックします。

  • Instagramサイトの「アプリとウェブサイト」でアクティブではないアプリの場合は[却下する][認証]ボタンが表示されますが、アクティブのアプリの場合は[Edit Settings][Continue]が表示されますので[Continue]ボタンを押してください。

認証できない場合

アプリIDまたはApp Secretの形式に誤りがあります。 《InstagramアプリID》または《Instagram App Secret》の形式に誤りがあります。
Facebookデベロッパーサイト(https://developers.facebook.com/apps/)の[プロダクト] → [Instagram Basic Display] → [Basic Display]の「InstagramアプリID」と「Instagram App Secret」を確認し、再度入力してください。
正常にリダイレクトできませんでした。再度認証を行ってください。 Instagram認証後の“Instagramダイアログ”へリダイレクトができない状態です。再度ダイアログの[認証]ボタンから認証ができない場合は、ブラウザを全て閉じて、再度サイトへログインの上、認証を行ってください。

InstagramのAPIによるエラー
error_type "OAuthException"
code
 400
error_message "Insufficient developer role"
現在ログインしているInstagramアカウントの役割が不十分です。
Instagramサイト(https://www.instagram.com/)からアカウントをログアウトし、Facebookデベロッパーサイト(https://developers.facebook.com/apps/)の[役割] → [役割]の「Instagramテスター」に設定されているInstagramアカウントで再度ダイアログから認証を行ってください。
※Instagramテスターに追加されていない場合はInstagramテスターの追加を行ってください。
※アプリが「開発モード」の場合のエラーです。
error_type "OAuthException"
code 400
error_message "Invalid scope: []"
現在ログインしているInstagramアカウントの役割が不十分です。
Instagramサイト(https://www.instagram.com/)からアカウントをログアウトし、Facebookデベロッパーサイト(https://developers.facebook.com/apps/)の[役割] → [役割]の「Instagramテスター」に設定されているInstagramアカウントで再度ダイアログから認証を行ってください。
※Instagramテスターに追加されていない場合はInstagramテスターの追加を行ってください。
※アプリが「ライブモード」の場合のエラーです。

11
“Instagram設定ダイアログ”の《認証済みアカウント》に認証したアカウントのユーザーネームが表示されたら認証は完了です。

12
再度デベロッパーサイトのマイアプリにアクセスし、設定したアプリをクリックし、表示されたダッシュボード画面の上部にあるモードの切り替えを「開発中」から「ライブ」に変更して終了します。

 Hint

アプリの開発モードとライブモード

“Instagramダイアログ”でInstagramテスターの役割を付与されたInstagramアカウントの認証の確認ができたら、アプリを開発モードからライブモードに切り替えてください。
なお、Instagramモジュールではライブモードの切り替えの際にアプリレビューは必要ありません。
アプリの開発モードとライブモードの違いにつきましては、下記のデベロッパーサイトのドキュメントをご確認ください。

⇒ 開発モード・ライブモードについてはこちら(外部サイト)

  • 上記手順10の“Instagramダイアログ”での認証は、開発モードでもライブモードでも可能です。

引き続き、Instagramの設定を行う場合は、下記をご確認ください。

⇒ Instagramの設定についてはこちら