Instagram連携・商品タグ付け・フィード表示プラグイン

『Instagram Feed プラグイン』の設定画面では、Meta APIとの安全な直接連携から、投稿の定期自動同期、フロントエンドのレスポンシブ表示・デザイン調整までを1画面で直感的に設定できます。

• アカウント情報の一目で把握: 連携中のユーザーネーム、ユーザーID、連携状態バッジをリアルタイム表示。
• トークン有効期限の可視化: 60日間の有効期限ステータスを表示し、Cron同期時に自動更新されます。
• 手動データ同期: いつでも「手動データ同期」ボタンから最新投稿を即時取得・キャッシュ更新できます。

• Cronジョブ設定: サーバーに登録するCronコマンドがワンクリックでコピー可能。定期的に最新メディアとローカル画像キャッシュを自動同期します。
• Webhook同期: 外部Cronサービス等から安全に同期を実行できるSHA256ハッシュ保護付きWebhook URLも完備。

• かんたん4ステップ連携: Meta Developersで取得した「Instagram App ID」と「Instagram App Secret」を入力し、画面上部の「Instagramと連携」を押すだけで安全に認証が完了します。
• リダイレクトURLコピー機能: Meta側に登録するOAuthリダイレクトURIをワンクリックでコピー可能。
• 手動トークン連携(バックアップ): 長期アクセストークンを直接入力して連携するバックアップ機能も搭載。

• 表示枚数・レイアウト: 最大表示件数、レイアウト形式(スライダー / グリッド)を選択可能。
• ハッシュタグ絞り込み: #ootd, #sale など、特定のハッシュタグを含む投稿のみを抽出して表示可能。
• デバイス別カラム数設定: PC(4列など)、タブレット(3列)、スマートフォン(1列)の表示列数を個別指定可能。
• オプション表示: ホバー時キャプション表示、別タブ表示、フォローボタンの表示/非表示を自在に切り替え。

• 画像の隙間(Gap): 標準(8px)、狭い、広いなど、サイト全体のトンマナに合わせて調整。
• 角丸(Border Radius): 写真の四隅の丸みをノーコードで設定。
• ホバーエフェクト: アイコン表示、ズーム、フェードなど、動きのある魅力的なホバーアニメーションを選択可能。

トップページには「スライダー形式」、商品一覧やフッターには「グリッド形式」など、設置場所ごとに異なるデザインや表示設定を持つ複数のInstagramウィジェットを無制限に作成・管理できます。

• レイアウト形式の選択: 「グリッド(格子)」または「スライダー(カルーセル)」を視覚的なボタンからワンタップで選択。
• 表示枚数 & ハッシュタグ絞り込み: ウィジェットごとに最大表示件数の指定や、特定のハッシュタグ(例:「#ootd」「#sale」)が含まれる投稿のみを抽出して出し分け可能。

• デバイス別カラム設定: PC(1200px+)、タブレット(768-992px)、スマホ(〜767px)それぞれの表示列数を個別に最適化。
• 隙間(Gap)・角丸の調整: 画像同士の間隔や角の丸みをノーコードで自由に調整。
• 4種類のホバーエフェクト: 「少し拡大(Zoom)」「薄くなる(Fade)」「アイコン表示」「キャプション表示」からサイトの雰囲気に合わせて選択できます。

• ブロック自動生成: ウィジェットを保存すると、専用のEC-CUBEブロック(例:instagram_feed_widget_1)がシステム内に自動生成されます。
• ドラッグ&ドロップ配置: コンテンツ管理 > レイアウト管理 を開き、生成されたブロックを目的のページ・好きな位置(#main_bottom など)へドラッグ&ドロップするだけで設置完了です。

• 作成済みウィジェットは一覧画面でカード形式で一覧表示され、レイアウト形式・表示枚数・PCカラム数・ホバー効果などの設定内容が一目で確認できます。
• 各ウィジェットの「編集」「削除」もワンクリックでスムーズに行えます。

取得したInstagramの投稿一覧カードを見ながら、EC-CUBEに登録されている商品を視覚的にタグ付け(紐付け)できます。SNSのコーディネート写真や活用例から、スムーズに商品購入へと誘導(Shoppable Instagram)します。

• ワンクリックでタグ編集: 各カードの「タグを編集」ボタンを押すと商品検索モーダルが開き、商品名や商品コードで素早く検索・選択できます。
• 複数商品の同時タグ付け: 1枚のコーディネート写真に対して、トップス・ボトムス・小物など複数の商品を同時にタグ付け可能です。
• 商品情報プレビュー: タグ付けされた商品は、サムネイル画像・商品名・販売価格がカード内にリアルタイムでプレビュー表示されます。

• 表示・非表示のワンタッチ切り替え: 各投稿に備わった「ウィジェットに表示」チェックボックスをOFFにするだけで、不要な告知投稿や私的な投稿をショップフロントから即座に非表示にできます。
• 安心の非破壊管理: データを削除する必要がないため、後からいつでも再表示させることが可能です。

• 写真単体(IMAGE)、複数写真(CAROUSEL_ALBUM)、リール動画(VIDEO)のメディア種別バッジが自動表示され、投稿形式を一目で判別できます。

• フロントエンドでユーザーが画像にホバーするとタグが表示され、クリックすると洗練されたLightboxポップアップが開きます。
• ポップアップ内から「今すぐ購入」ボタンで直接カートに追加できるため、購買意欲の高いユーザーを離脱させずにコンバージョンへ繋げます。

フロントエンドでInstagramの写真をクリックすると、洗練されたリッチなLightboxポップアップ(モーダル)が起動。写真と紐付けられた商品情報が美しく並び、その場で即座にカートへ投入できます。

• 写真・動画の最適表示: 高画質な写真はもちろん、リール動画(自動再生・ループ対応)やカルーセルアルバムのスライド表示にも完全対応。
• Instagram公式リンク: ポップアップ上部の「Instagramで見る」リンクから、公式のInstagram投稿へもスムーズに遷移可能。

• 写真の右側に「掲載商品」として、タグ付けされた商品のサムネイル画像・商品名・販売価格が一覧表示されます。
• 商品名をクリックすると商品詳細ページへ移動し、詳細なスペックを確認できます。

• 画面遷移なしでカートイン: 商品一覧の「今すぐ購入」ボタンを押すだけで、ページをリロードすることなく直接ショッピングカートへ商品を投入します。
• リアルタイム同期: ヘッダーのカートアイコンや合計数量も即座に更新され、快適なショッピング体験を提供します。

• PCでは見やすい2カラムレイアウト、スマートフォンでは縦スクロールで自然に閲覧できる最適なUIに自動切り替えされます。