Lovableにライブのソーシャルメディアフィードを埋め込む方法とは？

このチュートリアルでは、EmbedSocial APIを使ってさまざまなメディアソースやコンテンツタイプのコンテンツをLovableに同期する方法をご紹介します。

さらに、Lovableで作成できるウィジェットの種類をご紹介し、Lovable Cloudの管理方法や、AIを使ってウィジェットの表示を強化する方法についても解説します。

Lovable上で開発を進める代理店の方や、自社サイトに非常にカスタマイズ性の高い動的コンテンツを実装したいWEB開発者の方にとって、最適なチュートリアルです。

以下のデモをご覧ください。

または、詳細については以下の手順をご確認ください。

Lovableにソーシャルメディアフィードを埋め込む手順

• ステップ1：Lovableのウェブサイトを作成する
• ステップ2：Lovable Cloudを有効にする
• ステップ3：EmbedSocialのAPI Keyとドキュメントを取得する
• ステップ4：LovableにAPIのコンテキストを提供する
• ステップ5：データベーステーブルを作成する
• ステップ6：LovableにAPI Keyを追加する
• ステップ7：Lovableにウィジェットの参照コードを追加する
• ステップ8：連携をテストする
• ステップ9：投稿を表示する
  • Grid Layoutのプロンプト
  • Slider Layoutのプロンプト
  • Masonry Layoutのプロンプト
  • オプションの拡張機能
• はじめましょう
• よくある質問

ステップ1：Lovableのウェブサイトを作成する

まずは、ソーシャルメディアフィードを読み込むWEBページの初期セットアップを依頼します。次のようなプロンプトを使うとよいでしょう。

プロンプト： 「EmbedSocial APIを使って、TikTok、Facebook、YouTube、Instagram、LinkedIn、Pinterest、Twitterから投稿を取得し、ライブのソーシャルメディアフィードを表示するWEBページを作成してください」

ステップ2：Lovable Cloudを有効にする

プロジェクトが作成されたら、トップメニューのCloudパネルを開き、「Enable cloud」を選択してバックエンドを有効にします。Lovableが自動でデータベースのセットアップを完了するまで待ちます。

ステップ3：EmbedSocialのAPI Keyとドキュメントを取得する

次に、EmbedSocialアカウントから取得するEmbedSocial APIの実装手順が必要になります。そのためには、独自のAPI認証情報を取得するために、Premiumプランで有効なEmbedSocialアカウントを保有している必要があります。

アカウントを作成してログインしたら、右下のProfileメニュー ＞ Integrations ＞ API documentation に移動します。ここには、APIに関するすべての情報に加えて、API Keyが用意されています。EmbedSocial APIのドキュメントからは、endpointのURL、必須パラメータ、サンプルレスポンスなど、必要な情報がすべて得られます。安全に入力できるよう、API Keyとアルバム参照番号（widget ID）を手元に用意しておきましょう。

提供されたAPIドキュメントから実装用の手順をコピーしてください。後ほど、ドキュメントと同じページにあるAPI Keyも必要になりますのでご注意ください。

ステップ4：LovableにAPIのコンテキストを提供する

次に、以下のプロンプトでLovableのチャットボットにAPIの手順を提供します。

プロンプト：「EmbedSocial APIを連携する必要があります。これは以下に提供するendpointを使用し、id、caption、image_url、link、created_atなどの文字列を含む投稿を返します。以下がリクエストの詳細とレスポンスのドキュメントです：（LovableがAPIの呼び出し方法を理解できるよう、ドキュメントまたは主要な抜粋を貼り付けてください。EmbedSocialの連携ページ）

ステップ5：データベーステーブルを作成する

次に、APIドキュメントの情報をもとに、データベースを準備するようシステムにプロンプトを出します。

プロンプト： 「APIから生成されたメディア情報を使って、データベースにテーブルを作成してみてください」

LovableはCloudデータベースを使ってschemaを生成します。

ステップ6：LovableにAPI Keyを追加する

次に、システムから求められたら、EMBEDSOCIAL_API_KEYのsecretを追加します。

ステップ7：Lovableにウィジェットの参照コードを追加する

同様に、チャットでEMBEDSOCIAL_WIDGET_REFのsecretを提供するよう求めるプロンプトが表示されます。Lovableに表示したいウィジェットは、ウィジェットエディタにアクセスし、そのURLに含まれる大きなコードを取得するだけで、どれでも入手できます。

ステップ8：連携をテストする

edge functionを手動で、またはUIのボタンを通じて呼び出し、投稿が取得されてテーブルに保存されていることを確認します。データベースのエントリーが正しいかどうかをチェックしましょう。

ステップ9：投稿を表示する

これで完了です。投稿が生成されたら、ウィジェットをさまざまにカスタマイズして、真にオリジナルで魅力的なソーシャルメディアフィードを作成できます。デモをご覧ください。

プロンプト：「SocialFeedページで、social_postsテーブルから読み込み、投稿の画像、短縮されたcaption、そして『Read More』リンクを表示する、レスポンシブなカードのgridを作成してください」

Lovableでウィジェットをデザインするためのプロンプト

Grid Layoutのプロンプト

Create a component called SocialFeedWidgetGrid.

Pull posts from the social_posts table and display them in a responsive grid:
- Desktop: 3 columns
- Tablet: 2 columns
- Mobile: 1 column

Each card should include:
- Image (cover, full width, 16:9 ratio, rounded-xl, shadow-sm)
- Caption (truncate to 100 characters, show “...more” if longer)
- Button link "View post" → opens permalink in a new tab

Style cards:
- Rounded corners (xl)
- Shadow-md
- Padding-3
- Hover effect: slight scale on image
- Font: Inter, base size

---

Slider Layoutのプロンプト

Create a component called SocialFeedWidgetSlider.

Use a carousel/slider to display posts horizontally with navigation arrows.

Each slide includes:
- Image (cover, full width, height 300px, rounded-xl)
- Caption below (truncate to 80 characters)
- Link "View post" that opens the permalink

Style:
- Center the active slide slightly larger (scale 1.05)
- Add smooth sliding animation
- Rounded-xl + shadow-lg
- Use Inter font, base size

---

Masonry Layoutのプロンプト

Create a component called SocialFeedWidgetMasonry.

Pull posts from the social_posts table and render them in a responsive masonry layout.

Layout:
- Desktop: 3 columns
- Tablet: 2 columns
- Mobile: 1 column

Each post card includes:
- Image (full width, height auto, rounded-xl)
- Caption (truncate to 120 characters)
- Small "View post" link below caption

Style:
- Use CSS columns for masonry effect
- Gap between items: 16px
- Rounded-xl + shadow-sm

---

オプションの拡張機能

Lightboxのプロンプト

Enhance the widget so when a user clicks an image, it opens a lightbox modal.

Modal shows:
- Full-size image
- Caption (full text, scrollable if long)
- Button link "View on Instagram" (or platform source)

Style modal with dark overlay, centered content, and close button (X).

CTA Buttonsのプロンプト

Add a customizable CTA button below each post card.

- If a post has a field called cta_url, display a button "Shop Now" that links to it.
- Style button: primary color background, white text, rounded-full, hover opacity-90.

LovableのAIを使ってAPI経由でソーシャルメディアを同期すべき理由

ビジネスがUGCに依存している場合、シンプルな埋め込みだけでは十分でないことがあります。EmbedSocialのAPIをLovable Cloudに接続することで、静的なフィードをはるかに超える数々のメリットを引き出せます。

• APIへの直接アクセスにより、必要に応じて最新のメディアを取得できるため、手作業を介さずにサイトに最新の投稿やレビューを表示し続けられます。
• コンテンツをLovable Cloudに保存することで、データを自分でコントロールできます。複数のソースをフィルタリング、並べ替え、統合し、オーディエンスに合わせたユニークなフィードを作成できます。
• LovableのAIは、オーダーメイドのウィジェットデザインの作り込みをサポートします。明確なプロンプトを通じて、CSSを手書きすることなく、レイアウト、色、タイポグラフィ、レスポンシブな挙動を調整できます。
• edge functionは、定期的な同期やエラー処理といったバックエンドの自動化をサポートするため、ウィジェットは常に最新かつ堅牢に保たれます。
• カスタムウィジェットには、ページネーション、検索、カテゴリーフィルター、CTAボタンなどの機能を組み込むことができ、ユーザーのエンゲージメントとコンバージョンを高められます。
• API経由で複数のフィードを連携すれば、ブランドの世界観やメッセージに合った、統合的なダッシュボードやクロスプラットフォームのギャラリーを構築できます。

APIの柔軟性とLovableのAI主導のデザインツールを組み合わせることで、自社サイトで一際目を引く、動的で完全にブランディングされたソーシャルフィードを作り上げられます。

はじめましょう

まずは、EmbedSocialアカウントに登録し、API Keyとwidget IDを取得しましょう。

次に、Lovableで新しいプロジェクトを作成し、Lovable Cloudを有効にして、上記の手順に従ってソーシャルフィードを連携します。これらのツールを使えば、ソーシャルメディアのコンテンツを自社サイトに直接同期する動的なウィジェットを構築できます。