---
title: "Webflowにレビューを埋め込む方法"
description: "Google、Facebook、Yelpのレビューを、Webflowのサイトに表示する手順をご紹介します。"
---

EmbedSocialは[Webflow](https://webflow.com/)とのパートナーシップのもと、Webflowのサイトビルダーにレビューを連携する手順をわかりやすくまとめたチュートリアルを用意しました。

この記事では、Google、Facebook、Yelp、TwitterのレビューをWebflowのサイトに簡単に表示する方法をご紹介します。

## EmbedSocialでレビューウィジェットのコードを取得する

> EmbedSocialのアカウントをまだお持ちでない場合は、[7日間のトライアルを開始](/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget&lang=ja)してください。

EmbedSocialでウィジェットをすでに作成している場合は、次の手順に進みます。

1. [EmbedSocial](/admin/login?lang=ja) のアカウントにログインし、レビューを生成します。
2. Widgetsを開き、埋め込みたいウィジェットを選択します。
3. 左側の設定パネルで '**Embed**' タブをクリックし、下図のように '**Copy code**' をクリックします。

![コードをコピーしている画面](https://embedsocial.com/images/docs/4003185/1.jpg)

ウィジェットのコードをコピーしたら、Webflowのアカウントに切り替えます。

## Webflowにレビューウィジェットを埋め込む

コードを取得したらWebflowのアカウントにログインし、サイトの編集画面を開きます。Googleレビューを埋め込む手順は次のとおりです。

:::steps
1. 左のメインメニューから '**Add element**' をクリックします。
![要素を追加している画面](https://embedsocial.com/images/docs/4003185/2.jpg)
2. 左側の '**Components**' メニューから '**Embed**' のコードのオプションを選び、レビューを表示したいセクションにドラッグ＆ドロップします。
![セクションを追加している画面](https://embedsocial.com/images/docs/4003185/3.jpg)
3. 入力欄に **EmbedSocial** のコードを貼り付けます。
![コードを埋め込んでいる画面](https://embedsocial.com/images/docs/4003185/4.jpg)
:::

これで完了です。

## Webflowでのレビューウィジェットの例

レビューはWebflowのサイトにすぐに表示されます。表示例は次のとおりです。

![Webflowでのレビューウィジェットの例](https://embedsocial.com/images/docs/4003185/5.png)

* * *

> ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、[support@embedsocial.com](mailto:support@embedsocial.com) までメールをお送りください。喜んでサポートいたします 🙏

## 他のWebビルダーにレビューを埋め込む

[WordPressにレビューを埋め込む](/docs/integrations/wordpress/)

[Wixにレビューを埋め込む](/docs/integrations/wix/)

[Notionにレビューを埋め込む](/docs/integrations/notion/)

[Squarespaceにレビューを埋め込む](/docs/integrations/squarespace/)

[Weeblyにレビューを埋め込む](/docs/integrations/weebly/)

[PageCloudにレビューを埋め込む](/docs/integrations/pagecloud/)

## ECプラットフォームにレビューを埋め込む

[Shopifyにレビューを埋め込む](/docs/integrations/shopify/)

[Magentoにレビューを埋め込む](/docs/integrations/magento/)

[BigCommerceにレビューを埋め込む](/docs/integrations/bigcommerce/)

## WebflowにInstagramフィードを埋め込む

ここでは、InstagramのフィードをWebflowのページに簡単に表示する方法をご紹介します。

かんたんにご説明すると、[EmbedSocial](/social-media-aggregator/) はInstagram、Facebook、Twitterをはじめとする多くのソーシャルメディアから投稿を取り込み、常に最新の状態に保ちながら、デザイン性の高い動的なウィジェットとしてWebサイトに表示できるサービスです。

Webflowは、デザイナー、クリエイター、起業家がWebのためにものづくりできるようにすることをミッションに掲げています。柔軟さを損なうことなく、誰もが自由にWebを作れるようにするという考え方が、その根底にあります。

はじめる前に、次の準備をします。

- EmbedSocialのアカウントに[ログイン](/admin/login?lang=ja)します。
- 下図のように、**Widget** からコードを取得します。

![EmbedSocialのウィジェットからコードを取得している画面](https://embedsocial.com/images/docs/4444460/1.png)

***補足: Instagramフィードの設定について詳しくお知りになりたい場合は、[EmbedSocialのヘルプセンター](/docs/social-media-aggregator/instagram/)をご覧ください。***

コードを取得したら、[Webflow](https://webflow.com/dashboard/login) のアカウントにログインし、サイトの編集画面を開きます。

:::steps
1. 左のメインメニューで追加の '+' ボタンをクリックし、'Elements' を選択します。
![Webflowで追加の+ボタンをクリックしてElementsを選択している画面](https://embedsocial.com/images/docs/4444460/2.png)
2. 左側の '**Components**' メニューから '**Embed**' のコードのオプションを選び、表示したいセクションにドラッグ＆ドロップします。
![ComponentsメニューからEmbed codeのオプションをエディタにドラッグしている画面](https://embedsocial.com/images/docs/4444460/3.jpg)
3. 入力欄に **EmbedSocial** のコードを貼り付け、'**Save**' をクリックします。
![入力欄にEmbedSocialのコードを貼り付けてSaveをクリックしている画面](https://embedsocial.com/images/docs/4444460/4.jpg)
:::

これで完了です。

InstagramフィードはWebflowのページにすぐに表示されます。

サポートが必要な場合は、ライブチャットまたは [support@embedsocial.com](mailto:support@embedsocial.com) までお気軽にお問い合わせください。

このチュートリアルがお役に立てば幸いです。
