サイトの概要が入ります。サイトの概要が入ります。サイトの概要が入ります。サイトの概要が入ります。

操作マニュアル

Instagramの設定、設置

Instagramのアカウントを設定することで、Instagramの写真やキャプションを見せることができます。表示形式は2つの形式から選択することができ、キャプションの表示方法や一覧の表示スタイルなどを設定することができます。
※Instagramの仕様上、現在表示できる写真の枚数は最大20枚になります。

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をコピーする際には、前後にスペースが含まれないようご注意ください。

    ●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リスト

Instagramの表示設定 - 一覧表示

  • タイトル
    Instagramの表示設定のタイトルを入力します。
  • 表示形式
    一覧表示を選択します。
  • キャプション表示
    Instagramアカウントの写真のキャプションを表示するかどうかを設定します。また、表示する場合はマウスオーバーで表示するかどうか、テキストの色、マウスオーバー表示の場合の背景色を設定します。
    ※マウスオーバーはスマートフォンでの閲覧の際は表示されません。
  • 一覧表示設定
    表示する横の枚数、縦の枚数を設定します。また、余白を表示するかどうか、フレームを表示するかどうか、表示する場合のフレームの色、枠線を表示するかどうか、表示する場合の枠線の色を設定します。
    ※Instagramの仕様上、現在表示できる写真の枚数は最大20枚になります。
  • ステータス
    このInstagramのパーツを一般に公開するかどうかを設定できます。
    「公開」 ・・・ 再構築によって一般に公開されます。
    「非公開」・・・ 編集サイトのみ表示され、一般サイトには公開（表示）されません。
    「編集中」 ・・・ 再構築をしても、編集した内容が一般サイトには反映されません。
表示例 - 一覧表示
Instagramの表示設定 - カルーセル表示

  • タイトル
    Instagramの表示設定のタイトルを入力します。
  • 表示形式
    カルーセル表示を選択します。
  • キャプション表示
    Instagramアカウントの写真のキャプションを表示するかどうかを設定します。また、表示する場合はマウスオーバーで表示するかどうか、テキストの色、マウスオーバー表示の場合の背景色を設定します。
    ※マウスオーバーはスマートフォンでの閲覧の際は表示されません。
  • カルーセル表示設定
    表示する横の枚数、自動スライドをするかどうか、自動スライドする場合はスライド停止時間、スライド移動時間を設定します。
    ※Instagramの仕様上、現在表示できる写真の枚数は最大20枚になります。
  • ステータス
    このInstagramのパーツを一般に公開するかどうかを設定できます。
    「公開」 ・・・ 再構築によって一般に公開されます。
    「非公開」・・・ 編集サイトのみ表示され、一般サイトには公開（表示）されません。
    「編集中」 ・・・ 再構築をしても、編集した内容が一般サイトには反映されません。
表示例 - カルーセル表示
ページの先頭へ