<div data-theme-toc="true"> </div>
Discourse には、Javascript API を使用して IFRAME を作成することにより、リモートサイトにトピックのコメントを埋め込む機能があります。この機能の動作例については、[Coding Horror のブログ](http://blog.codinghorror.com/welcome-to-the-internet-of-compromised-things/#discourse-comments)をご覧ください。このブログは [Ghost](https://ghost.org/) で実行されていますが、コメントは彼の [Discourse フォーラム](http://discourse.codinghorror.com/t/welcome-to-the-internet-of-compromised-things/3550)から埋め込まれています。
この設定で注意すべき重要な点は、**ユーザーが返信を投稿するには、フォーラムに移動する必要がある**ことです。これは意図的なものであり、Discourse フォーラムでの投稿インターフェースは、現在 Javascript 経由で埋め込むことができるものよりもはるかにリッチであると考えているためです。
このガイドでは、ご自身のブログまたはウェブサイトでコメントの埋め込みを設定する方法を紹介します。
### 仕組み
Discourse では、トピックは多くの投稿で構成されています。別のサイトに Discourse を*埋め込む*場合、ドキュメント（ブログエントリ、HTML ページなど）を単一の*トピック*にリンクします。そのトピックに人々が投稿すると、そのコメントは埋め込み元のページに自動的に表示されます。
埋め込みが検出されたときに Discourse にトピックを自動的に作成させるか、事前にトピックを自分で作成するかを選択できます。
### Discourse の埋め込み設定（簡単な設定）
次の設定では、`=DISCOURSE=` で実行されている Discourse フォーラムからのコメントフィードを、架空のブログ URL `http://example.com/blog/entry-123.html` のページに埋め込みます。
[wrap=placeholder key=DISCOURSE default=discourse.example.com] のドメイン [/wrap]
[wrap=placeholder key=BLOG default=example.com] のドメイン [/wrap]
1. Discourse インストールで **管理 > カスタマイズ > 埋め込み** にアクセスします。https://=DISCOURSE=/admin/customize/embedding
2. 少なくとも 1 つの **埋め込みホスト** を作成します。これは、コメントを埋め込みたいホスト名（ドメイン）である必要があります。この場合のホストは `=BLOG=` です。`http://` やパスを含まないことに注意してください。
- **パス許可リスト** を使用すると、埋め込みを受け入れるリモートホスト上のパスを指定できます。
- **カテゴリに投稿** - ホストを入力する際にカテゴリを指定すると、そのホストからインポートされた投稿は自動的にそのカテゴリに格納されます。異なるホストが異なるカテゴリに投稿できます。
- **タグ** - 指定したホストから作成されるトピックに自動的に適用されるタグを設定できます。
- **投稿者** - ホストごとにトピック作成ユーザーをオプションで上書きできます。設定されていない場合は、**投稿とトピック** タブのデフォルトが使用されます。
3. **投稿とトピック** タブに移動し、**トピック作成用のユーザー名** フィールドに入力します。これは、新しい埋め込みが検出されたときにトピックを作成するユーザーです。Discourse に `eviltrout` というユーザーがいると仮定すると、値は `eviltrout` になります。
4. `http://=BLOG=/blog/entry-123.html` にある Web ページに次の HTML を挿入します。
```html
<div id='discourse-comments'></div>
<script type="text/javascript">
DiscourseEmbed = {
discourseUrl: 'https://discourse.example.com/',
discourseEmbedUrl: 'http://example.com/blog/entry-123.html',
// className: 'CLASS_NAME',
};
(function() {
var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>
スニペットの構成可能な部分は DiscourseEmbed オブジェクト内にあります。discourseUrl は、末尾のスラッシュを含む Discourse の基本への完全なパスです。discourseEmbedUrl は、現在コメントフィードを埋め込んでいるドキュメントです。
これを正しく設定すると、http://=BLOG=/blog/entry-123.html に最初にアクセスしたときに、ブログ投稿のコメントを読み込もうとします。コメントがないため、バックグラウンドで新しいトピックを作成するように Discourse に指示します。eviltrout によって新しいトピックが作成され、最初の投稿の内容がブログからクロールされ、テキストが自動的に抽出されます。
新しいトピックが作成されると、ユーザーはそのトピックに投稿でき、次回 http://=BLOG=/blog/entry-123.html にアクセスしたときにコメントが自動的に表示されます。
className はオプションで、埋め込みに任意のクラスを追加するため、CSS でカスタマイズできます。
ヒント: ブログに複数の著者がいる場合は、各ページに
<meta name="discourse-username" content="author_username">タグを追加できます。Discourse がトピックを作成するためにページをクロールするとき、このメタタグを使用して投稿者を確認し、管理設定で設定されたデフォルトのユーザー名を上書きします。
複数のページへの埋め込み
上記の例では、Javascript スニペットを埋め込む際に http://=BLOG=/blog/entry-123.html の URL をハードコードしました。通常、これは不十分です。多くのサイトには自動的に生成されるページがたくさんあるためです。たとえば、ブログでは通常、各エントリに独自のページが割り当てられます。これをサポートするには、コメントを表示したい各ページに同じスニペットを配置しますが、discourseEmbedUrl に渡される値を現在のページの URL に置き換えます。私のブログでは、discourseEmbedUrl に次の値を使用しています: 'http://eviltrout.com<%= current_page.url %>' -- 新しいブログページが作成されると、Discourse 上にそれらのページに対応する新しいトピックが自動的に作成されます。
埋め込まれたコンテンツのスタイリング
埋め込まれたコメント用のスタイルシートを追加する機能があります。管理 > カスタマイズ > テーマ > [あなたのテーマ] > CSS/HTML の編集 のテーマエディタの 埋め込み CSS セクションを使用して、埋め込まれたコメントとともに提供されるカスタムスタイルシートを追加できます。デフォルトでは、レイアウトは白背景で見栄えが良いと思いますが、サイトに固有のレイアウトがある場合は、自分でスタイルを設定したい場合があります。
(オプション) ポーリング用のフィードの追加
前述のように、Discourse は埋め込まれたサイトのコンテンツを自動的にクロールします。ただし、HTML の解析が難しく、投稿のコンテンツを正しく抽出できない場合があります。多くのブログやウェブサイトは、シンジケーションのために RSS/Atom フィードをサポートしており、Discourse はこれを使用してブログ投稿のコンテンツをより正確に抽出できます。
Discourse には、RSS ポーリングプラグイン（デフォルトで含まれています）が同梱されています。Discourse を埋め込んでいるサイトに RSS または Atom フィードが設定されている場合は、rss_polling_enabled サイト設定を有効にし、管理 > プラグイン > RSS ポーリング 経由でフィードの URL を追加できます。フィード URL が追加されると、Discourse はフィードを解析し、埋め込み設定に追加した許可ホストに基づいて適切なカテゴリに投稿を発行します。
(代替構成) 既存のトピックへのリンク
一部のユーザーは、Discourse にトピックを自動的に作成させたくないと考えています。自分でトピックを作成し、埋め込みコードに関連付けるトピックを伝えるだけのようにしたいと考えています。これを実現するには、埋め込みコードを少し変更します。
<div id='discourse-comments'></div>
<script type="text/javascript">
window.DiscourseEmbed = {
discourseUrl: 'https://=DISCOURSE=/',
topicId: 12345
};
(function() {
var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>
唯一の違いは、discourseEmbedUrl を Discourse からのトピック ID に置き換えた点です。これを実行すると、トピックは作成されず、そのトピックのコメントが自動的に表示されます。
リファラーポリシーの設定
最近（2020 年 9 月）の ブラウザのデフォルトのリファラーポリシーの変更により、Discourse は iframe のリファラーポリシーを明示的に \"no-referrer-when-downgrade\" に設定するようにデフォルトが変更されました。セキュリティ上の理由でサイトがより厳密なリファラーポリシーを必要とする場合は、埋め込みスクリプトの DiscourseEmbed オブジェクトに discourseReferrerPolicy の値を設定することで設定できます。例：
DiscourseEmbed = { discourseUrl: 'https://forum.example.com/',
discourseEmbedUrl: '<your_posts_canonical_URL>',
discourseReferrerPolicy: 'strict-origin-when-cross-origin'};
埋め込み詳細のプログラムによるクエリ
埋め込みの詳細をクエリするための API エンドポイントがあり、embed_url をパラメーターとして使用します。
curl 'https://meta.discourse.org/embed/info?embed_url=https://blog.discourse.org/2021/04/discourse-team-grows-to-50' -H 'API-KEY: logapikeygoeshere' -H 'API-USERNAME: apiusernamehere'
応答は次のようになります。
{
"topic_id": 187794,
"post_id": 925017,
"topic_slug": "discourse-team-grows-to-50-blog",
"comment_count": 2
}
プライベートサイトからのコメントの埋め込み
プライベートな Discourse インスタンスの場合、Discourse がブログのドメインのサブドメイン上にある場合、Discourse にログインしているユーザーにはコメントが表示されます。Discourse にログインしていないユーザーには、「接続が拒否されました」というメッセージが表示されます。Discourse とブログが完全に別のドメインにある場合、プライベートフォーラムのコメントは表示されません。
トラブルシューティング
Discourse の埋め込みでユーザーが抱える最も一般的な問題は、追加した埋め込みホストに対して正しい値を設定することです。それがサイトのドメインのみであり、余分なスラッシュや無効な文字が含まれていないことを必ず再確認してください。