新着お知らせ EmbedSocial MCP: connect your data to any AI tool
BlogInstagramSocial Media FeedsWidgets

ショッパブルInstagramフィードをウェブサイトに作成・埋め込む方法【Shop My Feedウィジェット】

ショッパブルInstagramフィードを生成し、ウェブサイトに埋め込む方法をステップごとに解説するガイドです。

Nikola Bojkov
View as Markdown
ショッパブルInstagramフィードをウェブサイトに作成・埋め込む方法
Nikola Bojkov

Nikola Bojkov

EmbedSocial Team

近年、買い物客は購入する前にソーシャルプルーフを求めるようになっています。その結果、ブランドはお客様の体験をウェブサイト上で紹介するための工夫を凝らした方法を探しています。

しかし、信頼を伝える形はさまざまです。ウェブサイトにTikTokのメンションを追加することから、人気の他ブランドやクリエイターとのコラボレーションを表示することまで、その手法は多岐にわたります。

ですから、ウェブサイトにとって最も効果的な信頼要因の一つが、投稿、Reels、動画、テキストの更新など、SNS上で人々が公開しているパブリックなメンションであることは、決して驚くべきことではありません。

このまま読み進めてください。あなたのブランドにメンションしているInstagram投稿を集め、関連する商品をタグ付けし、ショッパブルなInstagramフィードをウェブサイトに作成する方法をご紹介します。

ショッパブルフィードでウェブサイトのコンバージョン率を高める方法とは?

手順に入る前に、なぜウェブサイトにショッパブルInstagramフィードが必要なのか、その主なメリットをご紹介します。

ショッパブルフィードは、商品の発見から購入までのギャップを埋めることで、ウェブサイトのコンバージョン率を高める強力なツールになり得ます。その仕組みは以下の通りです。

商品が実際に使われている様子を見せる

これは明らかなことです。ストック画像だけでは、お客様が共感し、より早く購入を決断できるような個性や本物らしさを十分に伝えることはできません。だからこそ、他の人々があなたの商品をどのように着こなしたり使ったりしているかを示す体験は、大きな効果をもたらします。

購入までの過程の障壁を減らす

商品へのエンゲージメントを高める

モバイル向けに最適化する

Instagramのショッパブル投稿フィードで商品をタグ付けする方法とは?

EmbedSocialのショッパブルフィードを使って、ウェブサイトにInstagramショップを作成する手順は以下の通りです。

1. Instagramアカウントに連携されたFacebookページに接続する

最初のステップは、EmbedSocialでInstagramアカウントを設定することです。プラットフォームがあなたのブランドにメンションしているすべてのInstagram投稿を定期的に同期できるようにするため、この設定が必要になります。これを行うには、InstagramプロフィールをFacebookビジネスページと接続しておく必要があります。これはメンション投稿を生成する機能を可能にする、Meta公式APIの要件です。

InstagramビジネスプロフィールとFacebookページを接続する方法は以下の通りです。

  1. 「ソース」へ移動し、Instagramを選択します。
    Instagramフィードを埋め込むためにソースとしてInstagramを選択する
  2. 次に、**Mentions posts(メンション投稿)をクリックし、ポップアップで「Continue with Facebook」**をクリックして、Instagramビジネスアカウントに接続されているFacebookページに必要な権限を付与します。
    FacebookページとInstagramビジネスアカウントを接続してInstagram投稿を生成する
  3. サブソースのページでMention posts(メンション投稿)を選び、Nextをクリックします。
    メンションのあるInstagramアカウントを選択する
  4. 次に、Instagramウィジェットのテンプレートを選びます。ここでショッパブルInstagramウィジェットを選択できます。
    Instagramテンプレートフィードのレイアウトを選択する

これで完了です。投稿が生成され、画面が切り替わります。

2. Instagram投稿を生成してウィジェットを作成する

ウィジェットエディターに進むと、他のInstagramユーザーが公開し、あなたのブランドを@メンションした投稿が表示され始めます。ここで、ウェブデザインに最適になるよう、ウィジェットをさらにカスタマイズできます。

3. 各投稿に商品をタグ付けする

商品のタグ付けを始めるには、ページ上部の「Links」タブへ移動します。すると、各Instagram投稿に特定の商品や複数の商品をタグ付けできるエリアが開きます。

Instagram投稿に商品をタグ付けする方法は以下の通りです。

  1. 上部メニューのLinksをクリックし、Tag productsをクリックします。
    Instagramフィードで商品をタグ付けする手順
  2. ポップアップで、商品が写っている写真のエリアをクリックします。商品画像、商品名、価格などの商品詳細を入力し、Save tagをクリックします。
    Instagram投稿に商品詳細を入力する
  3. 同じInstagram投稿にさらに商品タグを追加するには、Add new tagをクリックします。
  4. 完了したら、Done taggingをクリックします。
    Instagramフィードの商品タグ付けを完了する最後のステップ

この手順を繰り返して、新しいウェブInstagramショップで複数の投稿をタグ付けできます。

タグ付けされた商品は、カルーセル投稿のアイコンと並んで、投稿の上部に商品ステッカーとして表示されます。

なお、他のSNSプラットフォームの投稿を組み合わせて、より大きなウィジェットを作成することもできます。

4. タグ付け商品セクションを有効化する

これはEmbedSocialのプラットフォームならではの、まったく独自の機能です。

タグ付け商品とは、フィード内のInstagram投稿にタグ付けされたすべての商品をウィジェット内に表示できるセクションです。ここからお客様は、Shopifyストアや、ショッパブル投稿を埋め込む他のEコマースプラットフォーム上のシンプルなチェックアウト方法へ移動し、直接購入することができます。

タグ付け商品セクションを有効化する方法は以下の通りです。

  1. 左側のメニューでLayoutをクリックします。
  2. Widget elements(ウィジェット要素)セクションで、Tagged products(タグ付け商品)のオプションを有効化します。
    Instagramフィードでタグ付け商品セクションを有効化する
  3. タグ付けされた商品は、上部にそのウィジェット内のInstagramフィードにタグ付けされたすべての商品のグリッドショーケースとして表示されます。

こちらが、上部にタグ付け商品を有効化したウィジェットの実際のデモです。

5. Instagramフィードのコードをコピーしてウェブサイトに埋め込む

タグ付けとカスタマイズが完了したら、以下の手順に従ってInstagramウィジェットの埋め込みコードを取得します。

  1. 左側の設定パネルにあるEmbedタブへ移動します。
  2. 埋め込みコードの下にあるボタンのCopy codeをクリックします。
    Instagramショッパブルウィジェットの埋め込みコードをコピーする
  3. ウェブサイトビルダーまたはHTMLページへ移動し、コードを貼り付けます。以下の例は、WordPressサイトにショッパブルInstagramフィードを埋め込む方法です。
    WordPressにHTMLを埋め込む手順

詳しくは、以下の動画でInstagramフィードウィジェットの商品タグ付けとタグ付け商品セクションの有効化の方法をご覧ください。

ウェブサイト上のショッパブルInstagramフィードの3つの事例

前述の通り、ブランドはその用途に応じてこれらのウィジェットをさまざまな名前で呼んでいます。たとえば「Shop My Look」「Shop This Look」「How others are wearing it?」「Shop My Instagram Feed」などです。

ウェブサイト上のショッパブルInstagram投稿の事例をいくつかご紹介します。

Ikeaはユーザー生成コンテンツのストーリーを見せる

Ikeaは特定の顧客ペルソナに合わせた専用ページを用意し、そのページでお客様の写真を紹介しています。これらの写真の一部は関連する商品ページの下にも表示され、お客様はその家具が実際のお客様の家でどのように見えるかを確認できます。

IKEAのストーリーによるウェブサイト向けUGC

Nikeは「How others are wearing it?」Instagramフィードを表示する

Ikeaと同様に、Nikeのウェブサイトで商品ページに移動すると、その商品に対するお客様のレビューを表示するだけでなく、お客様の写真も表示していることがわかります。これらは、自身のInstagramコンテンツでNikeをタグ付けし、その特定の商品と一緒に写真を公開したお客様による写真のお客様の声のようなものです。

このセクションが商品ページにどのように表示されるかは以下の通りです。

NikeによるショッパブルInstagramフィードの例

Kylie Cosmeticsの「Shop Our IG」ウィジェット

Kylie Cosmeticsのウェブサイトは、メインのホームページ上で直接Instagramのショッパブル投稿ウィジェットを使用しています。

このウィジェットは彼女のInstagramアカウントのInstagramフィードを紹介しており、彼女のInstagramフォロワーに投稿を見てもらうことを狙うと同時に、興味を持った人がウェブサイトで商品を見つけ、ウィジェットを通じて購入できるようにしています。

Kylie CosmeticsのInstagramフィードによるShop our IGの例

このウィジェットはインタラクティブで、クリックするとポップアップが開き、お客様はショッピングタグや商品情報を確認できます。

Squareから商品情報を取得してInstagram投稿にタグ付けする方法とは?

これはSquareショップとのユニークな連携機能で、Squareからすべての商品情報を取得し、Instagram投稿へのタグ付けをより速く行えるようになります。

手順は以下の通りです。

  1. Linksタブへ移動し、Tag productsをクリックします。
  2. ポップアップでLink to Square productsを選び、手順に従ってSquareショップを接続します。
    商品を生成するためにSquare連携を選択する
  3. 接続が完了すると、以下のように商品情報のポップアップの商品ドロップダウンにSquareの商品が表示されます。

SquareチェックアウトのリンクをInstagramウィジェットにタグ付けする

これで、各商品の情報を手動で追加する必要はなくなります。商品を選択するだけで、Squareのチェックアウトページへの特定のリンクとともに、すぐにInstagram投稿上に表示されます。

ショッパブルInstagramフィードをShopifyに埋め込む方法とは?

これらの手順では、Shopifyとの連携も、ShopifyのInstagramフィードアプリを特別にインストールする必要もありません。

設定はすでに前述の通りで、Shopifyのページにコードを埋め込むだけです。

タグ付け商品付きのInstagramフィードをShopifyストアに埋め込む方法は以下の通りです。

  1. Pagesへ移動し、ショッパブルInstagram投稿を表示したいページを開くか、Add pageをクリックして新しいページを作成します。
    Shopify管理画面でページを開くまたは追加する
  2. ページの編集モードで、テキストエディターへ移動し、コードアイコンをクリックします。
  3. HTMLコードエリアに、EmbedSocialのウィジェットコードを貼り付けるだけです。
  4. Saveをクリックします。

ShopifyページのHTMLエディターにウィジェットコードを貼り付けて保存する

これで完了です。ショッピングタグ付きのInstagramフィードが、すぐにShopifyストアに表示されます。

ショッパブル投稿の成果を測定する

最も優れている点は、あなたのShop my lookやShop my feedの成果を実際に測定できることです。

これは、EmbedSocialプラットフォームのアナリティクス機能を使うことで可能になります。

InstagramのショッパブルフィードのCTRや効果を測定する方法は以下の通りです。

  1. ウィジェットエディターへ移動し、左側の設定パネルにあるGeneralタブをクリックします。
  2. ここで、Analytics(アナリティクス)の設定を有効化します。
  3. ページ上部にAnalyticsタブが表示されます。
  4. ここで、ウィジェット内の各投稿のクリック数や表示回数に関するデータを受け取り始めます。

ショッパブルInstagramウィジェットのアナリティクスを有効化する

こうすることで、どの投稿があなたのビジネスの売上を生み出しているかを確認できます。

Shop My Feedウィジェットに登録する

ショッパブルInstagram投稿は、あなたのウェブサイトで最も優れた販売チャネルの一つになり得ます。

このステップごとのガイドが、ウェブサイトにInstagramフィードを設定し、より本物らしい形で商品を宣伝し、購入者の体験を向上させる助けになれば幸いです。

詳しくはInstagramでのショッピングガイドをご覧いただくとともに、最もよく寄せられる質問への回答を以下からご確認ください。

Frequently Asked Questions

Instagramフィードの各商品タグにはどのような情報が必要ですか?

商品タグに必要な情報は以下の通りです。

  • 商品名
  • 商品のチェックアウトリンクまたは商品ページ
  • 商品価格
  • 商品写真

より多くの情報があれば、その商品の売上を伸ばすのに確実に役立ちます。

ウェブサイト上のInstagramショッパブル投稿の見た目をカスタマイズできますか?

はい。フィード投稿のスタイルを変更したり、フィード全体をフィード、コラージュ、スライダーのいずれかの表示に変更したりすることができます。

なぜShopifyのウェブサイトにInstagramフィードを追加するのですか?

Shopifyはデフォルトで、すべての商品データをアップロードして表示するプラットフォームです。しかし、他の人々があなたの商品をどのように使ったり着こなしたりしたかを紹介するとなると、ストック写真や自社で用意した商品写真だけでは不十分です。

だからこそ、お客様からのInstagramショッパブル投稿を追加し、彼らがシェアした写真の商品にタグを付けることが、一般の人々が実際にあなたの商品をどう使っているかをリアルに示す、より効果的な方法なのです。

そして、こうしたUGCショップは、通常のShopifyストアよりも多くの商品を販売します。

Instagramのショッピング投稿を作成する方法は?

Instagramのショッピング投稿の作成は、ショッピング機能のためにアカウントを設定し、その後で商品タグ付きの投稿を作成する流れになります。また、アカウントの審査プロセスを経る必要がある場合もあります。

簡単な手順は以下の通りです。

事前準備:

  1. ビジネスアカウントまたはクリエイターアカウントに切り替える: ショッピング機能を利用するには、Instagramのビジネスアカウントまたはクリエイターアカウントが必要です。
  2. Facebookページに接続してショップを設定する: Instagramアカウントを、ショップが接続されたFacebookページにリンクします。ここで商品情報や商品カタログを管理します。

ショッパブル投稿の作成:

  1. 新しい投稿を作成する: まず、Instagramプロフィールで新しい画像または動画の投稿を作成します。
  2. 商品をタグ付けする: 投稿の作成中に**「Tag Products」**をタップし、画像または動画の商品が表示されているエリアをタップします。
  3. 商品を検索して選択する: カタログから該当する商品を検索して選択します。画像投稿には最大5つ、カルーセル投稿には最大20の商品をタグ付けできます。
  4. 投稿をシェアする: 商品タグを追加したら、いつものように投稿をシェアします。

なお、これらの商品投稿とInstagramチェックアウトへのリンクは、Instagramアプリ内でのみ利用可能です。現在、商品タグを自動的に生成する方法はないため、ウェブサイト上のショッパブルウィジェットに表示させるには、改めて手動でタグ付けする必要があります。

Nick Poggi, TrovaTrip Ryan Hazlewood Zanna Ollove, Boston College Brooks Hitzfield, Seven Sons
400,000社以上のブランドに選ばれています

Instagramフィードを数分で埋め込む

EmbedSocialのウィジェットで、Instagramの投稿をあらゆるウェブサイトに表示できます。

無料トライアルを開始

いつでもキャンセル可能。全機能をご利用いただけます。

関連記事

View all posts
ECサイトにInstagram投稿・リールを埋め込む方法と効果

ECサイトにInstagram投稿・リールを埋め込む方法と効果

ECサイトにInstagram投稿・リールを埋め込むと購買率が向上します。HTMLコード・API・ツールの3つの方法と、EmbedSocialで実現するEC特化の活用術を解説。Shopify・WordPress・BASE・カラーミーショップへの対応手順や、商品ページへのUGC配置でCVRを高める実践ノウハウも網羅。

ソーシャルリスニング実践:Threads × キーワード収集 × 人気ドラマ編|データの読み方から活用まで

ソーシャルリスニング実践:Threads × キーワード収集 × 人気ドラマ編|データの読み方から活用まで

Threadsキーワード収集で集めた人気ドラマ関連の投稿550件を事例に、ソーシャルリスニングのデータ確認・分析・UGC活用まで実践的な手順を解説します。EmbedSocialを使った一気通貫ワークフローも紹介。

MEO運用をn8nで自動化する方法|EmbedSocial × n8n 実践ガイド【2026年版】

MEO運用をn8nで自動化する方法|EmbedSocial × n8n 実践ガイド【2026年版】

MEO運用の「自動化できること・できないこと」を整理し、EmbedSocial × n8n × ClaudeによるMEO自動化の3レイヤー構造を紹介。実践例としてEmbedSocial × n8nのワークフローを解説。他社MEOツールとのAPI連携比較も掲載。

UGC二次利用許諾の取り方3選|キャンペーン・Instagram・TikTok別に解説【2026年版】

UGC二次利用許諾の取り方3選|キャンペーン・Instagram・TikTok別に解説【2026年版】

UGCを安全に二次利用するには、事前同意・事後申請の2つのアプローチがあります。ハッシュタグキャンペーンでの事前同意方式と、EmbedSocialを使ったInstagram・TikTokの許諾リクエスト自動化をステップで解説します。

多店舗のMEOをAIエージェントに任せる─ EmbedSocial for MEO 完全ガイド

多店舗のMEOをAIエージェントに任せる─ EmbedSocial for MEO 完全ガイド

EmbedSocial for MEOは、AIと自動化で多店舗・複数拠点のMEO運用を効率化するプラットフォームです。本記事では2026年の市場変化や全機能、導入事例、既存ツールとの違いを網羅。店舗数増加による運用負荷に悩むチェーン本部や代理店にとって、最適なツール選定と意思決定を支援する決定版ガイドです。

【検証】Claudeに「Instagramセクションを作って」と頼んで見えた、LLMの限界とUGCツールの必要性

【検証】Claudeに「Instagramセクションを作って」と頼んで見えた、LLMの限界とUGCツールの必要性

ChatGPTやClaude等でUGCセクションは作れるのか?マーケターが実際に検証。AI単体では架空のUGCが生成され景表法違反のリスクがあり、API連携や許諾管理などの運用基盤も構築できません。LLMで戦略・コピーを作りUGCツール(EmbedSocial)で運用する、正しい相互補完の最適解を解説します。