SocialProof.Reviewsは、すべてのワークスペースに4つの埋め込み可能な推薦文ウィジェットを提供しています — Wall of Love、カルーセル、評価バッジ、収集フォームです。それぞれはブランドカラーとロゴを使用し、新しいレビューを承認するたびに自動更新される軽量な<iframe>です。
このガイドで説明する内容：
| ウィジェット | 埋め込みサイズ | 最適な配置場所 |
|---|---|---|
| Wall of Love | 全幅、800px以上の高さ | 専用の /testimonials または /reviews ページ |
| カルーセル | 全幅、280〜360pxの高さ | ホームページのヒーロー、料金ページ、ランディングページ |
| バッジ | 220×48px | ナビゲーションバー、フッター、料金プランの横 |
| 収集フォーム | 全幅、700pxの高さ | 購入後ページ、サンキューページ、ダッシュボード |
4つのウィジェットはすべてHTTPS経由で配信され、非同期で読み込まれ（Core Web Vitalsに影響なし）、新しい推薦文を承認すると自動的に更新されます — 再埋め込みは不要です。
<iframe>スニペットをコピーする — ワークスペース固有のコードです承認済み推薦文のフルマソングリッドです。専用のレビューページや推薦文ページで使用してください。
含まれる内容： レビュアーの名前、写真、会社、役職、スター評価、レビューテキスト、写真、ビデオサムネイル、フィルターバー、ブランドカラー、オプションの「レビューを残す」CTA。
<iframe
src="https://socialproof.reviews/YOUR-SLUG/wall"
width="100%"
height="800px"
frameborder="0"
style="border:none; width:100%;"
title="Wall of Love"
></iframe>
<iframe
id="spr-wall"
src="https://socialproof.reviews/YOUR-SLUG/wall"
width="100%"
frameborder="0"
style="border:none; width:100%;"
title="Wall of Love"
onload="this.style.height = this.contentWindow.document.body.scrollHeight + 'px'"
></iframe>
自動回転する推薦文スライダーです。スペースが限られているホームページ、料金ページ、ランディングページに最適です。
含まれる内容： 回転する推薦文スライド、レビュアーの名前・写真・会社、スター評価、レビューテキスト、ナビゲーションドットと矢印、ブランドカラー。
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
高さのヒント： 推薦文が長い場合は320〜360pxに増やしてください。デフォルトの280pxは1枚のカードに適しています。
配置のヒント：
集計スター評価とレビュー数を表示するコンパクトなトラストピルです。ナビゲーションバー、フッター、料金プランの横向けに設計されています。
含まれる内容： 集計スター評価（例：★ 4.9）、合計レビュー数、ブランドカラーのアクセント、クリックするとWall of Loveへのリンク。
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/badge"
width="220px"
height="48px"
frameborder="0"
style="border:none;"
title="Rating Badge"
></iframe>
配置のヒント：
推薦文の送信フォームをサイト内に直接埋め込みます — 別のページへのリダイレクト不要。
含まれる内容： マルチステップフロー（評価 → 自己紹介 → レビュー → オプションのビデオ）、ブランドカラーとロゴ、メールバリデーション、写真アップロード、送信後のオプションリワード表示。
<iframe
src="https://socialproof.reviews/YOUR-SLUG"
width="100%"
height="700px"
frameborder="0"
style="border:none; width:100%;"
title="Leave a Review"
></iframe>
最適な配置場所：
SocialProof.ReviewsのウィジェットはHTMLの標準<iframe>タグを使用しており、主要なWebサイトプラットフォームすべてで動作します。以下の表は各プラットフォームでカスタムHTMLまたは埋め込み要素を追加する方法を示しています。
| プラットフォーム | 使用する要素 |
|---|---|
| WordPress | カスタムHTMLブロック |
| Webflow | Embedコンポーネント（詳細設定） |
| Wix | HTMLを埋め込む（Embed＆Social） |
| Squarespace | コードブロック |
| Shopify | コードを編集（テーマ） |
| Kajabi | カスタムコードブロック |
| ClickFunnels 2.0 | カスタムJS/HTML要素（Misc） |
| Framer | Embedコンポーネント（ユーティリティ） |
| Systeme.io | Raw HTML要素（詳細設定） |
| React / Next.js | <iframe> JSX要素 |
| カスタムHTML | HTMLに直接貼り付ける |
推奨方法 — カスタムHTMLブロック（Gutenberg）：
<iframe>スニペットを貼り付ける代替方法 — ページビルダー：
注意： WordPress.comの無料プランとPersonalプランは
<iframe>タグを制限しています。Businessプラン以上が必要です。または、セルフホスト型のWordPress.orgを使用してください。
<iframe>コードを貼り付ける注意： デザイナービューでは埋め込みコンテンツがグレーのプレースホルダーとして表示されます。公開後のライブサイトで正しくレンダリングされます。
<iframe>コードを貼り付けるWix Studioの注意： **+**アイコンを使ってHTML iFrame要素を追加する — 手順は同じです。
HTTPS必須： iframeの
srcURLはhttps://を使用する必要があります（http://ではなく）。
<iframe>コードを貼り付けるプラン要件： iframeの埋め込みにはSquarespaceのBusiness、Commerce、またはそれ以上のプランが必要です。
srcURLはHTTPSを使用する必要があります。
page.liquid）<iframe>スニペットを貼り付ける代替方法 — Shopifyページエディタ：
<>ボタン）に切り替える<iframe>コードを貼り付けるウィジェットを中央揃えにするには、divで囲む：
<div style="text-align:center;">
<iframe src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%" height="280px" frameborder="0" style="border:none;"></iframe>
</div>
注意： ビデオ推薦文を別途埋め込む場合は、パフォーマンスのためにKajabiの専用ビデオ埋め込みブロックを使用してください。SocialProof.Reviewsのウォールやカルーセルにはカスタムコードブロックが適切です。
<iframe>コードを貼り付けてエディタを閉じるiframeが小さすぎる場合、明示的なサイズを追加する：
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
style="width:100%; height:320px; border:none;"
frameborder="0"
title="Customer Reviews"
></iframe>
<iframe>スニペットを貼り付ける、またはモバイルのサイズ： 小さな画面での正しい表示を確保するために、Embedコンポーネントの幅と高さを手動で調整してください。
<iframe>コードを貼り付けて保存をクリックするサイズ： 予測可能なレイアウトのために、iframeタグに直接
width="100%"と固定の高さ（例：height="300px"）を設定してください。
ウィジェットを<iframe> JSX要素として貼り付けます。JSXではframeborderがframeBorderになり、styleはオブジェクトを受け取ることに注意してください：
export default function TestimonialsSection() {
return (
<section>
<h2>What our customers say</h2>
<iframe
src="https://socialproof.reviews/your-slug/widgets/carousel"
width="100%"
height="300"
frameBorder="0"
title="Customer Reviews"
style={{ border: 'none', width: '100%' }}
/>
</section>
);
}
Next.js（App Router）でのWall of Love：
// app/testimonials/page.jsx
export default function TestimonialsPage() {
return (
<main>
<h1>Customer Testimonials</h1>
<iframe
src="https://socialproof.reviews/your-slug/wall"
width="100%"
height="900"
frameBorder="0"
title="Wall of Love"
style={{ border: 'none', width: '100%' }}
/>
</main>
);
}
ウィジェットを表示したい任意のHTMLファイルまたはテンプレートにiframeを直接貼り付けます：
<!-- カルーセルウィジェット -->
<iframe
src="https://socialproof.reviews/YOUR-SLUG/widgets/carousel"
width="100%"
height="280px"
frameborder="0"
style="border:none; width:100%;"
title="Customer Reviews"
></iframe>
YOUR-SLUGをワークスペースのスラッグに置き換えてください。ウィジェットは非同期で読み込まれ、ページのレンダリングをブロックしません。
すべてのウィジェットはワークスペースのブランディングを自動的に継承します。カラー、ロゴ、見出しの変更やセクションの表示切り替えを行うには：
詳細についてはブランディングガイドをご覧ください。
SocialProof.Reviewsのすべてのウィジェット：
width="100%"で完全にレスポンシブ対応ウィジェットを埋め込むには開発者が必要ですか？ いいえ。上記のすべてのプラットフォームはコードを書かずにHTMLを貼り付けることをサポートしています。必要なのはWebサイトのページエディタへのアクセスのみで、それ以上は不要です。
iframeを埋め込むにはどのSquarespaceプランが必要ですか？ Business、Commerce Basic、またはCommerce Advancedプランが必要です。iframeの埋め込みはPersonalまたはStarterプランでは利用できません。
ウィジェットはWebサイトを遅くしますか？
いいえ。<iframe>は別のブラウザコンテキストで非同期に読み込まれ、ページのクリティカルレンダリングパスをブロックせず、Core Web Vitalsスコアにも影響しません。
iframeにウィジェットの代わりにグレーのボックスが表示されるのはなぜですか？ WebflowのDesignerビューとFramerのプレビューモードでは、iframeがプレースホルダーとして表示されます。サイトを公開してライブURLを表示すると、ウィジェットが正しく表示されます。
ウィジェットをメールに埋め込めますか？
メールクライアントはセキュリティ上の理由でiframeをブロックします。代わりに、メール内でWall of LoveのURLに直接リンクしてください。購入後のシーケンスでは、https://socialproof.reviews/YOUR-SLUG（収集フォーム）へのリンクの方が効果的です。
新しい推薦文を承認したとき、再埋め込みが必要ですか？ いいえ。ウィジェットは読み込まれるたびにSocialProof.Reviewsからライブデータを取得します。ダッシュボードで推薦文を承認すると、ウィジェットに自動的に表示されます。
WordPress.comはiframeを許可していますか？ セルフホスト型のWordPress.org：はい、常に可能です。WordPress.com：iframeにはBusinessプラン以上が必要です。それ以下のプランでは、カスタムHTMLブロックがiframeタグを削除します。
Kajabiのウィジェットが表示されないのはなぜですか？
最も一般的な原因はHTTPのソースURLです。iframeのsrcがhttps://で始まっていることを確認してください。また、カスタムコードブロックを使用したことも確認してください（テキストエディタではなく）。KajabiのリッチテキストエディタはHTMLを削除します。
ClickFunnelsのファネルステップに収集フォームを埋め込めますか？
はい。ClickFunnels 2.0のカスタムJS/HTML要素（Miscセクション）を使用し、収集フォームのiframeコードを貼り付けて、フォームが切れて表示されないようにheightを少なくとも700pxに設定してください。