EC-CUBE 4.2 / 4.3 対応公式マニュアル

Instagram Feed プラグイン

自社Instagramの投稿（画像・リール動画・カルーセル）をEC-CUBE上に美しく表示。画像への商品タグ付け（Shoppable Instagram）、Ajax即時カート追加、マルチウィジェット作成、ローカル画像キャッシュによる0ms高速表示までを網羅した最高峰のInstagram連携プラグインです。

1. プラグイン概要と主な機能

『Instagram Feed プラグイン (InstagramFeed)』は、外部の中間サーバーを経由しないダイレクトAPI直接認証方式を採用しており、安全・高速にInstagramのメディアをショップフロントへ反映します。

Shoppable Instagram（商品タグ付け）

投稿画像に直接EC-CUBE商品をタグ付け。ホバー時にタグが出現し、リッチなLightboxからワンクリックで商品詳細へ誘導。

ポップアップ内 Ajax 即時購入

モーダル内で「今すぐ購入」をクリックすると、画面遷移なしで直接カートへ商品を投入。ヘッダーのカート数も即座に同期。

マルチウィジェット & ノーコード設計

グリッド・カルーセル（スライダー）の複数ウィジェットを自由に作成。カラム数、余白、角丸、ホバー演出を管理画面で完結。

サーバー内ローカル画像キャッシュ

Instagram側のCDN URL有効期限切れによるリンク切れ・非表示トラブルを100%防止し、常時安定した配信を実現。

トークン有効期限監視 & 自動延長

管理画面でトークン残日数を可視化し、Cron定期同期時に自動で60日延長。認証切れによる表示停止を防ぎます。

ハッシュタグ絞り込み & アルバム対応

#ootd や #sale などの特定ハッシュタグのみの出し分けや、複数枚写真（カルーセルアルバム）のスライド閲覧に対応。

2. インストール・有効化

EC-CUBE管理画面の「オーナーズストア」経由、またはCLIコマンドから簡単に導入できます。

オーナーズストアからインストール

管理画面 → オーナーズストア → プラグイン一覧 より「InstagramFeed」をインストールし、有効化を完了してください。

（開発者向け）CLIコマンドでのインストール

# プラグインのインストール
bin/console eccube:plugin:install --code=InstagramFeed

# プラグインの有効化
bin/console eccube:plugin:enable --code=InstagramFeed

# キャッシュクリア
bin/console cache:clear --no-warmup

3. Meta Developers アプリ作成手順

Instagramとの直接連携には、Meta for Developers で「Instagramログイン」対応のアプリを1つ作成します。（※Facebookページとの紐付けは不要です）

⚠️ Instagram アカウントの種別について

Meta APIの仕様上、連携対象のInstagramアカウントは事前に「プロアカウント（ビジネスまたはクリエイター）」へ切り替えておく必要があります（Instagramアプリの設定から無料で数秒で切り替え可能です）。

Meta for Developers にログインしアプリを作成

Meta for Developers にアクセスし、「アプリを作成 (Create App)」をクリックします。
ユースケース選択画面で「その他」または「ビジネス / コンシューマー」を選択します。

Instagram プロダクトの追加

アプリダッシュボードの左メニュー「製品を追加」から「Instagram」を選択し、「設定」をクリックして「Instagram ログイン」を有効化します。

有効なOAuthリダイレクトURIの登録

EC-CUBE管理画面（Instagram Feed ＞ Instagram設定）に表示されている「有効なリダイレクトURL」をコピーし、Meta側の「クライアントOAuth設定＞有効なOAuthリダイレクトURI」に貼り付けて保存します。

https://[自社サイトドメイン]/[管理画面パス]/instagram_feed/oauth/callback

Instagram App ID & App Secret の取得

Meta側の「Instagram ＞基本表示 / 設定」に表示されている Instagram App ID と Instagram App Secret をコピーします。

4. EC-CUBEでの連携設定

管理画面 → Instagram Feed → Instagram設定 を開きます。

App ID & Secret を入力して保存

取得した「Instagram App ID」と「Instagram App Secret」を入力し、画面下部の「設定を保存」ボタンをクリックします。

「Instagramと連携」をクリックして認証

設定保存後、画面上部に表示される「Instagramと連携」ボタンをクリックします。
Instagramの認可ダイアログがポップアップしますので、対象アカウントでログインして「アクセスを許可」をクリックします。

初回データ同期の実行

連携完了メッセージが表示されたら、「今すぐ手動同期」ボタンをクリックすると、Instagramの最新投稿がEC-CUBEのデータベースおよびローカルストレージへ一括取得されます。

💡 アクセストークンの手動入力にも対応（バックアップ機能）

Meta Graph API Explorer 等で取得した長期アクセストークンをお持ちの場合、「アクセストークン手動連携」欄に直接貼り付けて保存することでも即時連携が可能です。

5. Shoppable 商品タグ付け機能

管理画面 → Instagram Feed → 紐付け設定 では、取得したInstagramの各投稿カードに対して、EC-CUBEに登録されている商品を視覚的にタグ付けできます。

1. 商品の検索とタグ付け

対象のInstagram投稿カードの「＋商品をタグ付け」ボタンをクリックします。
商品検索モーダルが開きますので、商品名や商品コードで絞り込み、対象商品を1クリックで追加します（1つの投稿に複数商品のタグ付けも可能）。
タグ付けされた商品は、フロントエンドの画像ホバー時や Lightbox ポップアップ内に商品画像・価格・商品リンクとして自動表示されます。

2. ポップアップ内「今すぐ購入 (Ajax)」の動作

フロントエンドでユーザーがInstagram写真をクリックすると、洗練されたLightboxモーダルが起動します。モーダル内の商品リストには「今すぐ購入」ボタンが設置されており、ページを離脱することなく即座にカートインできます。

3. 投稿ごとの表示 / 非表示トグル

各カードの「ウィジェットに表示」スイッチをOFFにすることで、不要な告知投稿やプライベートな投稿をショップ上に非表示にできます（データを削除する必要はありません）。

6. ウィジェット管理とレイアウト配置

管理画面 → Instagram Feed → ウィジェット管理 より、設置場所ごとに異なるデザインのフィードを複数作成できます。

1. ウィジェットの新規作成

設定項目	説明
ウィジェット名	管理用の名前（例: `トップページ用スライダー`、`フッター用グリッド`）。
レイアウト形式	グリッド（格子状）またはカルーセル（スライダー形式）から選択。
デバイス別カラム数	PC（3〜6列）、タブレット、スマホそれぞれの表示列数を個別に指定可能。
表示件数	表示する最大画像枚数（例: 6枚、12枚）。
スタイル調整	画像の角丸（Border Radius）、余白（Gap）、ホバー時エフェクト（ズーム、オーバーレイ）をノーコードで調整。

2. レイアウト管理でのブロック配置

EC-CUBE管理画面の コンテンツ管理 → レイアウト管理 を開きます。
表示したいページ（例: トップページ）のレイアウト編集画面を開きます。
未使用ブロック一覧に生成された「Instagram Feed」または作成したウィジェット名ブロックを、配置したい位置（#main_bottom など）へドラッグ＆ドロップして保存します。

7. 商用拡張機能（監視・キャッシュ・タグ）

エンタープライズECの安定運用を支える以下の拡張機能が標準搭載されています。

1. トークン有効期限監視 & 自動延長

Meta APIのアクセストークン（60日間有効）の残り日数を管理画面で可視化（緑・黄・赤）。Cron定期実行時に自動でリフレッシュされ、認証切れによる表示ストップを未然に防ぎます。

2. サーバー内ローカル画像キャッシュ (Local Media Storage)

取得したメディア画像は html/plugin/InstagramFeed/media/ に自動ダウンロード保存されます。Instagram側の署名URL有効期限切れによるリンク切れを100%防止し、高速表示（0ms遅延）を実現します。

3. カルーセルアルバム (CAROUSEL_ALBUM) 完全対応

Instagramの複数写真投稿にはサムネイル右上にアルバムバッジが自動付与され、ポップアップ内でスライドめくり閲覧（左右矢印キー対応）が可能です。

4. ハッシュタグ絞り込み (Hashtag Filtering)

#ootd、#sale などのハッシュタグが含まれる投稿のみを抽出してウィジェットごとに自由に出し分けできます。

8. 自動同期・定期実行 (Cron / Webhook)

Instagramの最新投稿を定期的にバックグラウンド取得するため、サーバーの定期実行（Cron）または Webhook の設定を推奨します。

方法 1: Cron による自動同期（推奨）

サーバーの crontab に以下のコマンドを登録します（3〜6時間ごとの実行を推奨）：

# 3時間おきに最新投稿・ローカル画像保存・トークン自動延長を実行
0 */3 * * * cd /path/to/ec-cube && php bin/console instagram-feed:sync-media > /dev/null 2>&1

方法 2: 外部Webhookによる自動同期

外部のCronサービス（UptimeRobotやEasyCron等）を利用して、以下のURLへ定期的にGET/POSTリクエストを送信することでも同期が可能です（SHA256トークン保護付）：

https://[自社サイトドメイン]/instagram_feed/sync/webhook?token=[SHA256_HASH_TOKEN]

9. よくある質問・トラブルシューティング

Q. リダイレクトURIが一致しません（OAuthException）

Meta側に登録した「有効なOAuthリダイレクトURI」と、EC-CUBEのURLが1文字でも異なるとエラーになります。EC-CUBE管理画面の設定画面に表示されているURLをコピーしてMeta側にそのまま登録してください。

Q. 個人用Instagramアカウントでも利用できますか？

Meta社のAPI仕様改定により、現在は「プロアカウント（ビジネスまたはクリエイター）」のみが対象です。Instagramアプリの「設定とプライバシー＞アカウントの種類とツール」から無料で数秒で切り替え可能です。

Q. リール動画の動画が自動再生されない場合があります

著作権保護されたBGM付きの動画やリール投稿は、Instagram APIの規約制限により動画ストリームが制限される場合があります。その場合、プラグインは安全に高画質なカバー写真（サムネイル）を表示します。

10. サポート・公式リンク

本プラグインに関するご質問、カスタマイズのご要望、不具合のご報告がございましたら、EC-CUBEオーナーズストアのお問い合わせ窓口または開発元（CubeLab）までお気軽にお問い合わせください。