このガイドでは、JavaScript を使用して外部ウェブサイトに Discourse トピックのリストを埋め込み表示する方法について説明します。これにより、ブログ、ウェブサイト、または外部コンテンツプラットフォーム上で、ディスカッションやお知らせなどのフォーラムコンテンツを紹介できます。
必要なユーザーレベル：管理者
概要
外部ウェブサイトに Discourse トピックを埋め込むことで、Discourse フォーラムからのトピックリストを他のサイトに直接表示できます。この統合により、フォーラムへのトラフィックを誘導し、コミュニティコンテンツを通じてオーディエンスのエンゲージメントを維持することが可能になります。埋め込まれたトピックは、サイトの DOM 構造に統合される JavaScript ウィジェットとして表示され、CSS によるカスタマイズが容易になります。
トピック埋め込みの有効化
外部サイトでトピック埋め込みを設定するには、以下の手順に従ってください：
- 管理 > 高度な設定 > 埋め込み に移動し、設定 タブに切り替えます。
embed_topics_listサイト設定を有効にします。
- 埋め込みスクリプトを外部サイトの HTML の
<head>セクションに追加します：
<script src="https://discourse.example.com/javascripts/embed-topics.js"></script>
discourse.example.com を実際の Discourse フォーラムの URL に置き換えてください。
- トピックを表示したい場所（ブログ記事や個別のサイトページなど）にトピックリスト要素を配置します：
<d-topics-list discourse-url="https://discourse.example.com" category="1234" per-page="5"></d-topics-list>
- Discourse サイトとは異なるドメインにトピックを埋め込む場合は、管理 > 高度な設定 > 埋め込み > ホスト に外部サイトのドメインを追加します。
例えば、Discourse サイトが yourdiscourseforum.com にあり、yourexternalsite.com にトピックを埋め込みたい場合、yourexternalsite.com を許可されたホストリストに追加する必要があります。
ログインが必要なプライベートな Discourse サイトからのトピックは埋め込めません。
設定パラメータ
d-topics-list 要素では、トピック表示をカスタマイズするために以下の属性がサポートされています：
discourse-url- Discourse サイトの URL（必須）template- 表示スタイルのオプション：basic（デフォルト）- トピックタイトルをリンクとして表示complete- タイトル、ユーザー名、アバター、作成日時、最終返信時刻、いいね数、返信数、および注目画像/サムネイルを表示
per-page- 表示するトピックの数（隠し設定embed_topic_limit_per_pageによって制限され、デフォルトは 200）category- 特定のカテゴリからトピックをフィルタリングするためのカテゴリ IDtags- 特定のタグでトピックをフィルタリングallow-create- true に設定すると「新しいトピック」ボタンが表示されますembed-class- 埋め込まれたトピックリストコンテナにカスタム CSS クラスを追加します（英数字、ハイフン、アンダースコアのみ）top-period- 特定の期間のトップトピックを表示：allyearlyquarterlymonthlyweeklydaily
複数のパラメータを組み合わせてトピックリストの表示を絞り込むことができます。例：
<d-topics-list
discourse-url="https://discourse.example.com"
category="5"
tags="announcements"
per-page="10"
template="complete">
</d-topics-list>
外観のカスタマイズ
管理 > 外観 > テーマとコンポーネント パネルで、カスタム SCSS を使用して埋め込まれたトピックのスタイルを設定できます。現在のテーマまたはデフォルトのテーマをクリックし、コードを編集 をクリックします。次に、Show_advanced を選択し、埋め込み CSS を選択してカスタムコードを追加します：
以下は、グリッドレイアウトを作成するための SCSS の例です：
.topics-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
.topic-list-item {
.main-link {
border: 1px dotted gray;
padding: 0;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-column.featured-image-column .topic-featured-image img {
max-width: initial;
max-height: initial;
width: 100%;
}
}
}
}
ベストプラクティス
- オーディエンスに関連するコンテンツを表示するために、意味のあるカテゴリとタグのフィルタを使用する
- 訪問者を混乱させない適切な
per-page値を設定する - レスポンシブデザインが機能しているか確認するために、異なる画面サイズで埋め込まれたトピックをテストする
- スペースに余裕がある場合は、視覚的な魅力向上のために
completeテンプレートを使用することを検討する - 許可されたホストリストを定期的に確認し、承認されたドメインのみがトピックを埋め込めるようにする
よくある問題と解決策
外部ドメインでトピックが表示されない
問題: 外部ドメインで表示すると、埋め込まれたトピックが空白またはグレーのボックスとして表示される。
解決策: 外部ドメインを Discourse サイトの 管理 > 高度な設定 > 埋め込み > ホスト に追加します。正しいサブドメインを含めることを確認してください（例：サイトが www.example.com を使用している場合、example.com だけでなく www.example.com を追加する必要があります）。
スクリプトの読み込みエラー
問題: 埋め込みスクリプトの読み込みに失敗するか、接続エラーが返される。
解決策:
- スクリプトソース内の Discourse URL が正しいか、アクセス可能か確認する
embed_topics_listサイト設定が有効になっているか確認する- 公開トピックに対してログインが必要でないか確認する
SameSite コンテキストの動作
埋め込みサイトとフォーラムが親ドメインを共有する SameSite コンテキストでは、Discourse はログイン状態を尊重し、それに応じて結果を表示します。ログイン済みのユーザーは、匿名ユーザーがアクセスできないセキュリティ設定されたカテゴリのコンテンツを表示できる場合があります。
よくある質問（FAQ）
Q: プライベートな Discourse サイトからトピックを埋め込むことはできますか？
A: いいえ、トピック埋め込みは公開 Discourse サイトでのみ機能します。ログインが必要なプライベートサイトは埋め込むことができません。
Q: 同じページに複数のトピックリストを埋め込むことはできますか？
A: はい、異なるパラメータを使用して同じページに複数の <d-topics-list> 要素を含め、さまざまなトピックコレクションを表示できます。
Q: 注目画像付きのトピックを埋め込むにはどうすればよいですか？
A: <d-topics-list> 要素で template="complete" パラメータを使用すると、サムネイルと注目画像付きのトピックを表示できます。
Q: トピックリンクの開く場所を変更できますか？
A: デフォルトでは、トピックリンクは親ウィンドウで開きます。この動作は、CSS または JavaScript のカスタマイズを通じて変更できます。
