このガイドでは、JavaScriptを使用してDiscourseトピックのリストを外部ウェブサイトに埋め込み、表示する方法について説明します。これにより、ブログ、ウェブサイト、または外部コンテンツプラットフォームでディスカッションやアナウンスなどのフォーラムコンテンツを公開できます。
必要なユーザーレベル：管理者
まとめ
Discourseトピックを外部ウェブサイトに埋め込むことで、Discourseフォーラムのトピックリストを他のサイトに直接表示できます。この統合は、フォーラムへのトラフィックを促進し、オーディエンスをコミュニティコンテンツに引き付け続けるのに役立ちます。埋め込まれたトピックはJavaScriptウィジェットとして表示され、サイトのDOM構造と統合されるため、CSSによるカスタマイズが容易になります。
トピックの埋め込みを有効にする
外部サイトでトピックの埋め込みを設定するには、次の手順を実行します。
- Discourse管理ダッシュボードに移動し、
site_settingsをクリックします。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サイトのAdmin > Advanced > Embedding > Hostsに外部サイトのドメインを追加します。
たとえば、Discourseサイトがyourdiscourseforum.comにあり、yourexternalsite.comにトピックを埋め込みたい場合は、yourexternalsite.comを許可ホストリストに追加する必要があります。
ログインが必要なプライベートDiscourseサイトからトピックを埋め込むことはできません。
設定パラメータ
d-topics-list要素は、トピック表示をカスタマイズするために次の属性をサポートしています。
discourse-url- DiscourseサイトのURL（必須）template- 表示スタイルのオプション：basic（デフォルト）-最小限のトピック情報を表示しますcomplete-タイトル、ユーザー名、アバター、作成日、サムネイルを表示します
per-page-表示するトピックの数category-特定のカテゴリのトピックをフィルタリングするためのカテゴリIDtags-特定のタグでトピックをフィルタリングしますallow-create-trueに設定すると、「新しいトピック」ボタンが表示されますtop_period-特定の期間のトップトピックを表示します：allyearlyquarterlymonthlyweeklydaily
複数のパラメータを組み合わせて、トピックリストの表示を絞り込むことができます。たとえば、次のようになります。
<d-topics-list
discourse-url="https://discourse.example.com"
category="5"
tags="announcements"
per-page="10"
template="complete">
</d-topics-list>
外観のカスタマイズ
DiscourseのAdmin > Customize > ThemesパネルでカスタムSCSSを使用して、埋め込まれたトピックをスタイル設定できます。現在のテーマまたはデフォルトのテーマをクリックし、「コードの編集」をクリックします。「詳細を表示」を選択し、「埋め込み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サイトのAdmin > Customize > Embedding > Allowed Hostsに外部ドメインを追加します。正しいサブドメインを含めるようにしてください（例：サイトがwww.example.comを使用している場合、example.comだけでなくwww.example.comを追加します）。
スクリプト読み込みエラー
問題：埋め込みスクリプトが読み込まれないか、接続エラーが返されます。
解決策：
- スクリプトソースのDiscourse URLが正しいこと、およびアクセス可能であることを確認します。
embed_topics_listサイト設定が有効になっていることを確認します。- Discourseサイトが公開トピックに対してログインを必要としないことを確認します。
SameSiteコンテキストの動作
埋め込みサイトとフォーラムが親ドメインを共有するSameSiteコンテキストでは、Discourseはログインステータスを尊重し、それに応じて結果を表示します。ログインしているユーザーは、匿名ユーザーがアクセスできないセキュアカテゴリのコンテンツを表示できる場合があります。
よくある質問
Q：プライベートDiscourseサイトのトピックを埋め込むことはできますか？
A：いいえ、トピックの埋め込みは公開Discourseサイトでのみ機能します。ログインが必要なプライベートサイトは埋め込むことができません。
Q：同じページに複数のトピックリストを埋め込むことはできますか？
A：はい、さまざまなトピックコレクションを表示するために、同じページに異なるパラメータを持つ複数の<d-topics-list>要素を含めることができます。
Q：注目の画像を含むトピックを埋め込むにはどうすればよいですか？
A：<d-topics-list>要素でtemplate="complete"パラメータを使用して、サムネイルと注目の画像を含むトピックを表示します。
Q：トピックリンクが開く場所を変更できますか？
A：デフォルトでは、トピックリンクは親ウィンドウで開きます。この動作は、CSSまたはJavaScriptのカスタマイズを通じて変更できます。
