Embed Code Generator

Society Speaks の投票ウィジェットを数分で記事に追加できます。開発者はクリーンな iframe とカスタマイズコントロールを、エディターは構造化されたインサイト（コメントノイズではない）を得られます。

埋め込みは Society Speaks ネイティブ議論で利用できます。

実装チェックリスト

ドメインが許可リストに登録されていることを確認する
下記で iframe を生成する
自動リサイズを追加してシームレスな UX を実現する

パートナーポータルを使用して本番環境のオンボーディングを行う

<a href="/for-publishers/portal/signup" class="underline">パートナーポータル</a> でテストキーを作成し、ドメインを確認してから、本番用キーを有効化します。スケーリングの場合は、API を使用してディスカッションを作成し、返されたディスカッション ID を CMS に保存します。プログラム的なワークフローについては <a href="/for-publishers/api" class="underline">API Reference</a> を参照してください。

開発者向け

軽量な iframe、予測可能なパラメータ、postMessage リサイズフック。

エディター向け

構造化された参加、明確なコンセンサスシグナル、監査可能な方法論。

オーディエンス向け

数秒で投票でき、世論の一致を確認し、深い分析を探索できます。

大規模対応フロー

1) 記事 URL で検索、2) 見つからなければ作成、3) ディスカッション ID を保存。

ディスカッション ID とは何ですか？

ディスカッション作成時または検出時に API から返される一意の識別子。

まだディスカッションがありませんか？

POST /api/partner/discussions を呼び出して作成し、すぐに埋め込みます。

1. ディスカッションを検索

記事 URL

または

ディスカッション ID

ディスカッション作成時または検出時に API から返されます。

2. テーマを選択

Default

Dark

Editorial

Georgia

Minimal

Bold

Muted

またはカラーをカスタマイズ：

プライマリーカラー

背景

フォント

3. 参照情報を追加（オプション）

パートナー参照

アナリティクスに使用されます。小文字、スペースなし。

プレビュー

ディスカッション ID を入力するか、記事 URL を検索してプレビューを表示する

埋め込みコード

<!-- ディスカッションIDを入力して埋め込みコードを生成 -->

自動サイズ調整スニペット

<script>
window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'societyspeaks:embed:resize') {
    const iframe = document.getElementById('societyspeaks-embed');
    if (iframe) iframe.style.height = event.data.height + 'px';
  }
});
</script>

パフォーマンスのヒント

<link rel="preconnect" href="https://societyspeaks.io">
<link rel="dns-prefetch" href="https://societyspeaks.io">

Tips

レスポンシブ埋め込みのためにiframeの幅を100%に設定
デフォルトの高さは600px。ステートメント数に応じて調整してください
refを追加して、あなたのサイトからの参加を追跡
埋め込みはpostMessageで高さを投稿し、動的なサイズ調整を実現
スクロールバーを避けるために自動サイズ調整スニペットを追加してください
preconnect ヒントを使用して最初のペイントを高速化