Duda

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

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

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

• EmbedSocialのアプリを開き、表示されているソースのいずれかを接続してレビューウィジェットを作成します。
• カスタマイズが終わったら、ウィジェットを埋め込みたいページを選びます。
• 'Widgets' ボタンをクリックし、開いたドロワーからEmbedSocialを、表示したいページのセクションにドラッグします。

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

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

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

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

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

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

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

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

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

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

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

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

手順は次のとおりです。

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

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

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

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

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

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

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

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

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

1つのファイルでアップロードできるレビューは最大 500 件です。テンプレートファイルはこちらからダウンロードできます。

• name: レビュー投稿者名
• review_date: 日付の形式は選択できます
• rating: 1から5の数値
• review_text: レビュー本文
• email: レビュー投稿者のメールアドレス
• tags: レビューのタグ（カンマ区切り）
• custom_link: 個別レビューのリンク。このリンクはソースのリンクより優先されます
• reviewer_photo_url: レビュー投稿者の写真のURL

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

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

手順は次のとおりです。

1. 'Sources' のページを開いて 'Add source' をクリックし、'Custom Reviews' を選びます。
2. 新しいページに移動したら 'Import reviews' ボタンをクリックします。

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

これで完了です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. いずれかのウィジェットを開きます
2. 'Moderation' タブをクリックします
3. 一覧で、先頭に表示したいレビューの横にある 'Pin' をクリックします

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

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

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

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

1. いずれかのウィジェットを開きます
2. 'Moderation' タブをクリックします
3. 優先度の列で、各レビューに優先度の数値を設定します

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

カスタムCSSを追加する

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

この例では、タイトルの背景色の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をフィードに適用する方法

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

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

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

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