---
title: "DudaでEmbedSocialを使う方法"
description: "Dudaでのウィジェットの埋め込み、レビューソースの接続、レビューのインポート、ウィジェットのデザイン設定について説明します。"
---

このガイドでは、DudaのWebサイトビルダーでEmbedSocialを使ってできることをひととおり説明します。ウィジェットの埋め込み、レビューソースの接続、レビューのインポートと作成、そしてデザインの調整です。

## Dudaにウィジェットを埋め込む

はじめる前に、次の点をご確認ください。

-   EmbedSocialのアプリを開き、表示されているソースのいずれかを接続してレビューウィジェットを作成します。

-   カスタマイズが終わったら、ウィジェットを埋め込みたいページを選びます。

-   '**Widgets**' ボタンをクリックし、開いたドロワーからEmbedSocialを、表示したいページのセクションにドラッグします。

![WidgetsのドロワーからEmbedSocialのウィジェットをページのセクションにドラッグしている画面](https://embedsocial.com/images/docs/6231688/1.png)

-   ドロップダウンから、ページに表示したいウィジェットを選びます。

![ドロップダウンから表示するウィジェットを選んでいる画面](https://embedsocial.com/images/docs/6231688/2.png)

これで、レビューウィジェットがページに追加されました。

![Dudaのページに追加されたレビューウィジェット](https://embedsocial.com/images/docs/6231688/3.png)

最後に、変更の公開をお忘れなく。

## FacebookまたはGoogleのレビューを埋め込む

ここでは、Googleビジネスプロフィールのアカウントを接続してGoogleのレビューをウィジェットに取り込み、Dudaに埋め込む手順を説明します。Facebookのレビューも同じ手順です。

1.  はじめに '**Sources**' タブを開き、ソースとしてGoogleまたはFacebookを選択します。

![SourcesタブでソースとしてGoogleまたはFacebookを選んでいる画面](https://embedsocial.com/images/docs/6253476/1.png)

2.  ソーシャルアカウントをまだ接続していない場合は、選択したソースに応じて、GoogleビジネスプロフィールまたはFacebookのアカウントの接続を求められます。

![画面の案内に従ってGoogleビジネスプロフィールまたはFacebookのアカウントを接続している画面](https://embedsocial.com/images/docs/6253476/2.png)

3.  アカウントを接続したら、レビューを取り込むソース（ページまたはロケーション）を選んでウィジェットを作成します。

![レビューを取り込むページまたはロケーションを選んでいる画面](https://embedsocial.com/images/docs/6253476/3.png)

4.  ウィジェットの作成をクリックすると、数秒でレビューが取り込まれ、レビューウィジェットの画面に移動します。

![ウィジェットを作成した後に生成されたレビューウィジェット](https://embedsocial.com/images/docs/6253476/4.png)

5.  最後に、作成したレビューウィジェットをDudaに埋め込みます。手順は次をご覧ください。

[Dudaにウィジェットを埋め込む](#dudaにウィジェットを埋め込む)

## カスタムレビューを作成して埋め込む

この機能を使うと、ご自身で入力したレビューでカスタムレビューウィジェットを作成し、1行のコードでDudaに表示できます。

手順は次のとおりです。

'**Sources**' のページを開き、'**Add source**' をクリックします。

![SourcesページでAdd sourceをクリックしている画面](https://embedsocial.com/images/docs/6259722/1.png)

'**Custom Reviews**' を選ぶと、カスタムレビューを追加するページが開きます。

'**Add Review**' をクリックし、**評価と顧客名を入力**します。

レビュー本文の入力、顧客写真のアップロード、レビュー日の指定も行えます。

![Add Reviewをクリックし、評価と顧客名を入力している画面](https://embedsocial.com/images/docs/6259722/2.png)

![レビュー本文、顧客写真、レビュー日を追加している画面](https://embedsocial.com/images/docs/6259722/3.png)

レビューの追加が終わったら '**Create widget**' を開くと、ウィジェットが作成されます。

## スプレッドシートからレビューをインポートする

EmbedSocialのアプリでは、スプレッドシートに保存しているレビューや、他のプラットフォームからダウンロードしたレビューを簡単にインポートできます。インポートしたレビューは、Dudaのウィジェットに表示できます。

レビューをインポートするには、次の仕様に沿ってスプレッドシートを用意してください。

### レビューインポートファイルの仕様

**Reviews Import** のツールは [comma-separated values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values) 形式のファイルに対応しています。テンプレートまたはデータファイルの1行目は列見出しです。2行目以降が、インポートするカスタムレビュー1件ずつに対応します。

1つのファイルでアップロードできるレビューは最大 **500** 件です。テンプレートファイルは[こちら](/downloads/reviews_template.csv)からダウンロードできます。

**列:**

`name`, `review_date`, `rating`, `review_text`, `email`, `tags`, `custom_link`, `reviewer_photo_url`

-   `name`: レビュー投稿者名

-   `review_date`: 日付の形式は選択できます

-   `rating`: 1から5の数値

-   `review_text`: レビュー本文

-   `email`: レビュー投稿者のメールアドレス

-   `tags`: レビューのタグ（カンマ区切り）

-   `custom_link`: 個別レビューのリンク。このリンクはソースのリンクより優先されます

-   `reviewer_photo_url`: レビュー投稿者の写真のURL

必須の列は `name`、`review_date`、`rating` です。その他の列は空欄でも構いませんが、カンマで区切る必要があります。

**レビューのスプレッドシートをEmbedSocialのアプリでインポートする**

上記の仕様に沿ってスプレッドシートを用意したら、EmbedSocialのアプリでそのファイルをアップロードします。

手順は次のとおりです。

1.  '**Sources**' のページを開いて '**Add source**' をクリックし、'**Custom Reviews**' を選びます。

2.  新しいページに移動したら '**Import reviews**' ボタンをクリックします。

![カスタムレビューのページでImport reviewsボタンをクリックしている画面](https://embedsocial.com/images/docs/6261129/1.png)

3.  レビューを取り込む**アップロードファイル**を選び（1つ目の欄）、CSVファイルで使用している日付の形式を選択します（2つ目の欄）。

![アップロードするファイルとCSVで使用している日付形式を選んでいる画面](https://embedsocial.com/images/docs/6261129/2.png)

これで完了です。

インポートしたレビューは選択したソースに表示され、そのレビューでウィジェットを作成してDudaに表示できます。

埋め込みの手順は[Dudaにウィジェットを埋め込む](#dudaにウィジェットを埋め込む)をご覧ください。

## レビューウィジェットをカスタマイズする

レビューウィジェットのレイアウトは、ウィジェットの左側にある '**Layout**' のドロップダウンメニューから、用意されているレイアウトのいずれかを選んで変更できます。

![Layoutのドロップダウンメニューでレイアウトを選び、ウィジェットを保存している画面](https://embedsocial.com/images/docs/6152051/1.png)

変更を加えたら、右上の '**Save**' を必ずクリックしてください（上のスクリーンショット）。

1行に表示するレビューの件数を変えたい場合は、Layout → General settings → Columns を開くと、デスクトップ表示とモバイル表示それぞれの列数を指定できます。

次のドロップダウンメニュー '**Feed**' では、ページに表示するレビュー、メディアのロゴの表示、日付、色の設定など、さらに多くのカスタマイズが行えます。

![メディアのロゴ、日付、色などのオプションが並んだFeedのドロップダウンメニュー](https://embedsocial.com/images/docs/6152051/2.png)

ウィジェットの変更が終わったら、右上の '**Save**' ボタンをクリックしてください。変更は、ウィジェットを埋め込んでいるWebサイトに自動的に反映されます。

さらに細かい調整はCustom CSSのセクションで行えます。詳しくは[カスタムCSSを追加する](#カスタムcssを追加する)をご覧ください。

## レビューをピン留めして表示順を指定する

ここでは、Dudaに表示するウィジェットで、レビューをピン留めしたり、優先度の数値を指定して任意の順序で表示したりする方法を説明します。

### レビューをピン留めするには？

ピン留めは、ウィジェットの他の並び替え設定にかかわらず、指定したレビューを必ず先頭に表示する機能です。

レビューをピン留めする手順は次のとおりです。

1.  いずれかの**ウィジェット**を開きます

2.  '**Moderation**' タブをクリックします

3.  一覧で、先頭に表示したいレビューの横にある '**Pin**' をクリックします

![Moderationタブでレビューの横にあるPinをクリックしている画面](https://embedsocial.com/images/docs/6259690/1.png)

ピン留めしたレビューは、設定画面で指定した他の並び替え設定にかかわらず、常にレビューウィジェットの先頭に表示されます。

### 優先度でレビューの順序を指定するには？

ウィジェットに表示するレビューの順序を細かく指定したい場合は、優先度（Priority）のオプションでレビューに順序の数値を設定できます。この方法では、20件のレビューを優先度順に表示できます。

レビューウィジェットで任意の順序を設定する手順は次のとおりです。

1.  いずれかのウィジェットを開きます

2.  '**Moderation**' タブをクリックします

3.  優先度の列で、各レビューに**優先度**の数値を設定します

![優先度の列で各レビューに優先度の数値を設定している画面](https://embedsocial.com/images/docs/6259690/2.png)

たとえば、最初の20件として表示したいレビューに1から20までの優先度の数値を設定すると、その順序でレビューウィジェットに表示されます。

## カスタムCSSを追加する

ここでは、EmbedSocialのフィードで使えるCSSの例をご紹介します。Custom CSSのオプションは、ソーシャルメディアフィードのデザインをWebサイトのブランディングやレイアウトに合わせられるよう、自由に調整していただくための機能です。

この例では、**タイトルの背景色**のCSSを変更しています。

### カスタムCSSコードの例

```css
#es-header .es-header-avatar {
border-radius: 40px;
margin-right: 5px;
margin-bottom: 2px;
object-fit: cover;
}
.table-cell {
vertical-align: middle;
display: table-cell;
float: none;
background-color: #03FCF4;
}
```

変更後の表示は次のとおりです。

![カスタムCSSの例によってウィジェットのタイトルの背景色が変わった画面](https://embedsocial.com/images/docs/5646596/1.png)

### カスタムCSSをフィードに適用する方法

ウィジェットの左側にあるCustom CSSのドロップダウンメニューを開きます。上記のCSSタグの変更を追加し、Previewをクリックすると、変更後の表示を確認できます。

![Custom CSSのドロップダウンメニューにCSSを追加してPreviewをクリックしている画面](https://embedsocial.com/images/docs/5646596/2.png)

変更が終わったら、右上の '**Save**' ボタンをクリックすると、Webサイトに変更が反映されます。

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

喜んでお手伝いいたします。