Instagramモジュールの初期設定 | マニュアル一覧 | CMSなら「ant2-ASP」でホームページ制作!

Manual

CMS操作マニュアル

CMSの操作方法を作業から探せるようにマニュアル一覧にしました。
「こんな時はどうするの?」と迷った場合は、こちらをご覧ください。

Instagramモジュールの初期設定

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

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

Instagramモジュールの初期設定

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

2
“Instagram設定ダイアログ”が表示されますので、表示されているデベロッパーページ(英語)のURL(https://www.instagram.com/developer/)にアクセスし、写真を表示したいInstagramのアカウントでログインします。

3
デベロッパーページのヘッダーの[Manage Clients]をクリックします。
[Manage Clients]に初めてアクセスする際には、下記のDeveloper Signup画面が表示されますので、下記の3項目とAPI利用規約・ガイドラインの同意のチェックを入力し、[Sign up]をクリックします。

ウェブサイト (必須) Instagramと連携するサイトURL(モジュールを設定するサイトのURL)を入力します。
Phone number (必須) 利用者の電話番号を入力します。
What do you want to build with the API? (必須) API利用する目的を入力します。(例)サイトに写真を掲載
I accept the API Terms of Use and Brand Guidelines (必須)

API利用規約に同意するチェックを入れます。
※API利用規約は「Terms of Use and Brand Guidelines」から確認することができます。

4
次に右上の[Register new Client]ボタンをクリックして表示されたアプリケーションの作成画面に下記の必須情報を入力します。

Application Name (必須) 任意のアプリケーション名(日本語可)を入力します。
※「Instagram」「IG」「insta」「gram」はアプリケーション名に含むことはできません。
Description (必須) 任意のアプリケーションの概要(日本語可)を入力します。
Website URL (必須) Instagramと連携するサイトURL(モジュールを設定するサイトのURL)を入力します。
Valid redirect URIs (必須)

以下の2つのURLを入力します。

http://apps.secure-cms.net/instagram_auth.php
https://apps.secure-cms.net/instagram_auth.php

5
入力後に「私はロボットではありません」にチェックを入れ、表示された画像認証の確認および選択を行ってから、[Register]ボタンをクリックします。

6
登録が完了すると、Manage Clients画面に作成したアプリケーションが表示されます。そのアプリケーションの[MANAGE]ボタンをクリックします。

7
表示されたアプリケーションの詳細画面から、Client IDとClient Secretを取得します。
※「Client Secret」と「Client Status」をお間違いのないようご注意ください。

8
“Instagram設定ダイアログ”に前手順で取得したClient IDおよびClient Secret入力欄に入力して[保存]ボタンをクリックし、さらに右側に表示された[認証]ボタンをクリックします。

  • Client IDとClient Secretをコピーする際には、前後にスペースが含まれないようご注意ください。

 Hint

Instagramのアカウントの「言語」の確認

Instagramのアカウントの言語が「日本語」の設定の際は、手順9のInstagramの認証画面で認証ができない場合があります。Instagramアカウントの「言語」を「日本語」から「English」に変更し、“Instagram設定ダイアログ”の[認証]ボタンをクリックしてください。

  • 【スマートフォンアプリの場合】 [設定]→[アカウント]→[言語]
    ※言語がEnglishの場合:[Settings]→[Account]→[Language]
  • 【Instagramサイトの場合】 アカウントページにアクセス→フッターメニュー「言語」
    ※言語がEnglishの場合:カウントページにアクセス→フッターメニュー「LANGUAGE」

9
Instagramへのリクエスト内容が表示されたら[Authorize]ボタンをクリックします。

  • この認証画面の[Authorize]ボタンが表示されず日本語で[認証]ボタンと表示される場合は、手順8の『Instagramのアカウントの「言語」の確認』をご確認の上、ご対応ください。

10
“Instagram設定ダイアログ”のInstagramアカウントに「認証済み」と表示されたら完了です。

  • 手順8でInstagramの「言語」を「English」に変更している場合は、「日本語」に戻してください。

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

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