Instagram UGC Widget

概要

このプロジェクトは、n8n で取得した Instagram タグ付き投稿を、EC サイトに埋め込み可能な ウィジェットとして表示するためのアプリケーションです。

  • 承認済みの投稿のみを表示
  • Grid / Slider の 2 種類のレイアウト
  • クリックでモーダル表示 → Instagram へ遷移

環境変数

.env.local に以下を設定してください：

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

※ Supabase ダッシュボード > Settings > API から取得

セットアップ

  1. supabase/schema.sql を Supabase の SQL Editor で実行
  2. .env.local を設定
  3. npm install で依存関係をインストール
  4. npm run dev で開発サーバーを起動

埋め込みコード例

EC サイトに以下のコードを貼り付けてください：

<div id="social-photos"></div>
<script
  src="https://YOUR_DOMAIN/embed.js"
  data-store="store1"
  data-layout="grid"
  data-limit="12"
  data-target="social-photos"
></script>

パラメータ説明:

  • data-store: stores テーブルの slug（必須）
  • data-layout: grid または slider（デフォルト: grid）
  • data-limit: 表示件数（デフォルト: 12）
  • data-target: ウィジェットを挿入する要素のID

参考リンク