JavaScriptを使って他のウェブサイトにDiscourseコメントを埋め込む

あのCSSページを何百回も見たのに、埋め込み用のCSSに気づいたことがなかったなんて…

「いいね!」 1

埋め込みページがどのようなものか見つけにくい場合は、こちらをご覧ください。

今日これを実装しようとしましたが、いくつか問題がありました。

  • フォーラム投稿では、URL(discourseEmbedUrlから派生?)が小文字化され、テキスト「This is a companion discussion topic for the original entry at …」に続くリンクの、大文字と小文字を区別するURLが壊れます。
  • 最初のページ読み込み時に、埋め込みが「Loading discussion…」と表示され、ハングします。2回目のページ読み込みで全てが機能します。
  • ページのスラッシング:iframeが読み込まれている間、デフォルトの高さになりますが、コメントが見つからない場合、高さは「Start Discussion」のみを表示する1行に縮小されます。これは、「loading discussion」のバグを悪化させます。なぜなら、それは大きな垂直の高さを開いたままにするからです。
  • 埋め込みの親からスクレイピングされたデータが、ページ全体をテキスト化するのではなく、メタタグを優先すると良いでしょう。これはより一般的なdiscourseの動作だと思います。

最大の驚きは、埋め込みがあるURLにアクセスするたびに、新しいトピックが作成されることを学んだことです。これはOPにあります。

私が考えられる唯一の解決策はハックですが、埋め込みエンドポイントにpingを送信するために短期的なSSR/キャッシングに依存しています。

したがって、ロジックは次のようになると考えられます。

  1. $discourse/embed/info?embed_url=$linkをチェックします。

  2. トピックが存在する場合は、通常どおり埋め込みを表示します。

  3. 存在しない場合は、「start conversation」ボタンを表示し、$discourse/new-topic?subject=$linkにリンクします。

これで機能しますか、それとも他に連携する必要のあるものはありますか?

エンベドを含むページが初めて訪問されたときにのみ、新しいトピックが作成されます。それ以降の訪問では、URLに関連付けられた既存のトピックがレンダリングされます。

自動トピック作成を望まない場合は、API呼び出しを使用して、最適な方法でトピックを作成し、その後、関連付けを手動で制御するためにtopicIDをエンベドに渡すことができます。

わかりました、これは私のケースではひどいことです。なぜなら、何万ものページがあるからです。

このように?

  1. APIでトピックが存在するかどうかを確認します。
  2. 存在しない場合、ボタンを表示します。
  3. ボタンをクリックすると、APIがトピックを追加します。
  4. 成功すると、ボタンコンテナが埋め込みに変換されます。

…これにも問題があります。フォローアップのエンゲージメントがないボタンクリックなどです。

ユーザーが実際にコメントした場合にのみトピックを作成する方法はありますか?たとえば、次のような方法です。

$discourse/new-topic?subject=$link.

それとも、ここではトピックIDを渡して決定論的なカップリングを行うことができないという問題がありますか?

いいえ、Discourseでは存在しないトピックに返信することはできません。

このニーズに対応するため、すべての埋め込みトピックを非公開トピックとして作成できるようにし、誰かが最初に返信したときに自動的にリストに表示されるようにしました。

トピックの作成には、サーバーで実行される認証済みリクエストが必要になると思います。それに煩わされたくない場合は、UIにボタンを追加し、このコード(ページのheadタグに自動的に追加されるコード)に似たコードをトリガーするという別の方法があります: https://github.com/discourse/discourse/blob/581dbca97f2b55c9bbbe40dc3b58a9df7409d77f/public/javascripts/embed.js。これは、このデータを使用してiframe要素を作成するだけです。

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'http://127.0.0.1:4200/',
    discourseEmbedUrl: 'EMBED_URL',
    // className: 'CLASS_NAME',
  };
</script>

編集:試してみました。これは単なる概念実証です: https://github.com/scossar/discourse-embed-iframe-test/blob/main/app/routes/triggering-embed-code.tsx。あなたの問題に対する優れた解決策だとは思いません。

ロジックはすべてクライアント側にあります(ローダー関数は便宜上のものです)。残念ながら、クライアントがトピックがDiscourseに存在するかどうかを知るための優れた方法はありません。そのため、トピックが存在するかどうかに基づいてUIをカスタマイズすることはできません。解決策はありますが、おそらくアプリのデータベースに何かを書き込む必要があるでしょう。

Discourseは、iframeから親ドキュメントにデータを渡すためにWindow: postMessage()を使用しています。たとえば、埋め込まれたコメントで返信リンクがクリックされたとき: discourse/app/assets/javascripts/discourse/scripts/embed-application.js at 581dbca97f2b55c9bbbe40dc3b58a9df7409d77f · discourse/discourse · GitHub

「いいね!」 1

新しい投稿にプライマリリンクを割り当てることができれば、そうする必要はないと思います。

$discourse/new-topic-link?link=$link

これは、おそらくスレッドが既に存在する場合はスレッドに転送し、埋め込み管理者の既存のロジックを使用します。テンプレートでも可能でしょうか?

別の解決策としては、問題のリンクを参照している投稿を検索し、サイト全体の会話の一部として一致するものを表示し、SSR経由でページに直接レンダリングすることが考えられます。埋め込みは表示専用なので、これは同等かもしれません。そこでの最も明白な問題は、参加したいときにユーザーをどのスレッドに送信するかを選択することです。

編集:リンクコンテンツで投稿を検索する方法を見つけられれば

この機能はDiscourseフォーラムを攻撃するために使用できるか疑問に思っています。具体的には、誰かがホストの複数のURLでページを訪問したことを偽装し、多くのトピックを作成することは可能ですか?

こんにちは、Discourseコミュニティの皆さん!

Docusaurus v3 を使用していて、サイトに Discourse コメントを埋め込みたい方向けに、私が開発したプラグインを共有できることを嬉しく思います。

docusaurus-plugin-discourse-comments

このプラグインは、Docusaurus v3 サイトに Discourse コメントを簡単に統合できるようにします。主な機能は以下のとおりです。

  • Docusaurus v3 とのシームレスな統合
  • 設定可能な埋め込みルート
  • 簡単なトラブルシューティングのためのデバッグモード
  • 埋め込み URL の自動処理
  • コメントのカスタマイズ可能な配置

Docusaurus v3 を使用していて、ドキュメントやブログ記事に Discourse コメントを追加したい場合は、このプラグインがプロセスを大幅に簡素化します。

npm でプラグインを見つけることができます: docusaurus-plugin-discourse-comments

「いいね!」 4

仮に、埋め込み可能なホストが1つ、blog.example.comがあり、ワイルドカードパスの許可リストが/.*だとします。

同じホストを使って、別の埋め込みを追加したいのですが、今度は異なる許可リスト、例えば/new-release.*と、追加のタグ、例えばreleasesを使用します。

当然ながら、「新しいリリース」のトピックは、ホストとパスの組み合わせの両方に一致する可能性がありますが、どちらが優先されるのでしょうか?ルールはどのような順序で評価されるのでしょうか?

プライベートフォーラムのトピックを別のホストに埋め込むことは、まだできないのでしょうか?私のユースケースでは、製品のホスティングにKajabiを使用し、コメントプラットフォームとしてDiscourseを使用しています。それぞれに個別のログインが必要なため、答えはまだ「不可能」だと推測していますが、これはユーザーにとっての制限要因であり、750以上のモジュールがあり、それぞれに専用のディスカッションスペースがあるため、大きな問題です。各KajabiモジュールのDiscourseトピックを同じページに埋め込むことができれば、そのページでコメントできなくても、すべてが簡素化され、Discourse内の関連トピックへの簡単なリンクが可能になります。

これに関して何か進展はありましたか、それともこれは常にプライベートフォーラムの制限となるのでしょうか?

プライベートフォーラムからのコメントを埋め込むことはできないことがわかりました(別ドメインのサイトの場合):

しかし、同僚はGhostサイトのコメントにパブリックフォーラム(全く別のドメイン)を使用しており、ほとんどの投稿は無料です。最近、最初のメンバー限定投稿を公開しましたが、Discourseの関連トピックを「全員」ではなく特定のグループ(Ghostサイトの有料メンバーに関連付けられている)にしか表示されないカテゴリに変更したところ、埋め込みに「埋め込みエラー」と表示されるようになりました。

OPは、別ドメインのプライベートフォーラムは埋め込みを許可しないと言っていましたが、これはパブリックフォーラムでありながらプライベートカテゴリを使用している場合です。私が目にしている問題は、パブリックフォーラムのプライベートカテゴリが、実質的にプライベートフォーラムと同じように機能しているためでしょうか?結局、私は次のコメントを読みました。これはその主張を裏付けているようです。

もし、パブリックフォーラムのプライベートカテゴリからのトピックをそのままでは埋め込めない場合、埋め込み(および/またはプラットフォーム)を調整することで可能になる方法はありますか?(Ghostのプライベート投稿をDiscourseがスクレイピングして、誤ってDiscourseで非有料ユーザーにコンテンツを表示してしまうことを防ぐため)一時的にプライベートカテゴリをパブリックに設定することに問題はないので、この問題の「修正」を急ぐ必要はありませんが、これが可能であれば、後日誰かを雇って埋め込みを修正したり、プラットフォームにPRを提出したりすることを検討してもよいでしょう。

こんにちは。Ghostブログで埋め込み機能を使用していますが、ブログ投稿がフォーラムに表示される方法に問題があります。以下のようなホストを設定しています。

サブドメインの設定に課題があったため(ドメインはDiscourseフォーラムとは別のISPで取得しています)、タグのルートを使用することにしました。

問題は、すべてのブログ投稿がDiscourseフォーラムの「Blog」カテゴリに表示されてしまうことです。Discourseの投稿者として管理者ユーザーを使用しており、3つのカテゴリすべてで管理者が新しいトピックを作成できるようになっています。

この原因について、何か insight はありますでしょうか?

各パスを指定してみてはどうでしょうか?たとえば、ブログカテゴリに属する投稿が /blog/<slug> の下にある場合、/blog/* のように指定できると思います。

「いいね!」 1

Ghostブログでは(少なくとも標準的なインストールでは)機能しません。メインドメイン(alphagamer.net)を使用していますが、Ghostブログは基本的にドメインの後にブログ記事のタイトルに基づいてパスを自動的に追加します。パスを追加しようとしましたが、削除されるだけでした。

「いいね!」 1

DiscourseのトピックにDiscourseのコメント(トピック)を埋め込むことは可能でしょうか?

iframeを使用して、返信ボタンは表示するが、サイトの他の部分(ヘッダーやフッターなど)は表示しないようにすることは可能でしょうか?

Ghostで問題なく使用できましたが、SSO統合がないため、ユーザーは不満を感じています。

例のコードを少し調整する必要があったことを思い出しました。

1つの埋め込みがあれば問題なく動作すると思いますが、異なる種類のブログ投稿を異なるDiscourseカテゴリに埋め込もうとする場合は、もう少し調整が必要になると思います。

タグを使用して機能させることができると思いましたが、タグだけでは(私のセットアップでは)うまくいかないようです。Ghostでコンテンツコレクションを作成する必要があると考えています。これは基本的にフォルダ構造を追加できるものです(alphagamer.net/blog/やその他必要なものなど)。週末にこれを試してみて、「パス許可リスト」を更新し、機能させることができればここに投稿します。

カンマ区切りで許可リストを設定できますか?

/blog/.*,/articles/.*

編集: どうやら機能しないようです。これも機能しません。

/(blog|articles)/.*

別々のホストにする必要があるのでしょうか?