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

投稿が新しいトピックに分割されました:Embed Discourse using external_id

ドキュメントサイトのユースケース(数百/数千ページ)で、Giscus のように、ユーザーがページを訪問したときにトピックを生成するのではなく、コメントを残したいときにトピックを生成するように Discourse で設定することは可能ですか?

これは現在「許可リスト」になっています。

これは現在「トピック作成のためのユーザー名」になっています。

それ以外に、http://localhost からインテグレーションをテストする方法はありますか?HTTPS がないため、コンソールに次のエラーが表示されます。

コンテンツセキュリティポリシーディレクティブ「frame-ancestors ‘self’ https://localhost:3000」に違反しているため、「https://forum.weaviate.io/」のフレーム化が拒否されました。

「いいね!」 1

こんにちは!ご報告ありがとうございます。ガイドの一部を更新しましたが、適切に更新され機能していることを確認するために、詳細なレビューが必要になる場合があります。

ngrok のようなサービスを使用する必要があるかもしれません。

「いいね!」 2

編集:埋め込みURLにurl_escapeを使用すると(Liquidで正しいURLを自動挿入するため)、埋め込みが壊れることが判明しました。やっちまったぜ :upside_down_face:

こんにちは!ブログのコメントセクションとしてもフォーラムソフトウェアを使用することを計画していました。皆さんがその方法を持っているだけでなく、それがすでに誰かのウェブサイトでライブになっていると知ったとき、私は興奮しました :exploding_head:

しかし、このシステムを私のサイトに実装しようとしたところ、私のサイトにエラーメッセージが表示され、フォーラムのエラーログに次のメッセージが表示されました。

エラーメッセージ
Message (2 copies reported)

Addressable::URI::InvalidURIError (Cannot assemble URI string with ambiguous path: 'https://eleboog.com/posts/jekyll-to-gemini/')
lib/url_helper.rb:157:in `normalize_with_addressable'
lib/url_helper.rb:94:in `normalized_encode'
app/models/embeddable_host.rb:50:in `url_allowed?'
app/controllers/embed_controller.rb:84:in `comments'
app/controllers/application_controller.rb:418:in `block in with_resolved_locale'
app/controllers/application_controller.rb:418:in `with_resolved_locale'
lib/middleware/omniauth_bypass_middleware.rb:74:in `call'
lib/content_security_policy/middleware.rb:12:in `call'
lib/middleware/anonymous_cache.rb:369:in `call'
config/initializers/100-quiet_logger.rb:20:in `call'
config/initializers/100-silence_logger.rb:29:in `call'
lib/middleware/enforce_hostname.rb:24:in `call'
lib/middleware/request_tracker.rb:228:in `call'

Backtrace

addressable (2.8.4) lib/addressable/uri.rb:2337:in `to_s'
addressable (2.8.4) lib/addressable/uri.rb:856:in `initialize'
addressable (2.8.4) lib/addressable/uri.rb:697:in `new'
addressable (2.8.4) lib/addressable/uri.rb:697:in `normalized_encode'
lib/url_helper.rb:157:in `normalize_with_addressable'
lib/url_helper.rb:94:in `normalized_encode'
app/models/embeddable_host.rb:50:in `url_allowed?'
app/controllers/embed_controller.rb:84:in `comments'
actionpack (7.0.4.3) lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
actionpack (7.0.4.3) lib/abstract_controller/base.rb:215:in `process_action'

Env

HTTP HOSTS: forums.eleboog.com

ブログはJekyllでホストしており、フォーラムはnginxの仮想ホストを使用して並べてホストしています。eleboog.comを許可されたホストとして、/posts/.*をパス許可リストとして設定しています。この問題の原因として考えられることはありますか?どうぞよろしくお願いします!

いくつか変更を加えて、なんとか解決しました。GhostブログとDiscourseで作業しています。
すべての投稿に対して、post.hbsファイルに以下を追加しました。

{{#post}}
                    <div>
                        <div>
                            {{> "comments"}}
                            {{!-- {{#has tag="25"}} --}}
                            <div id='discourse-comments'></div>
                            <meta name='discourse-username' content='eviltrout'>
                            <script type="text/javascript">
                                DiscourseEmbed = {

                                    discourseUrl: 'https://discourse-1-0.cloudclusters.net/',
                                    discourseEmbedUrl : 'https://www.mydomain.com{{ post.url }}',
                                    discourseReferrerPolicy: 'strict-origin-when-cross-origin'
                                    //topicId: '25'
                                };
                                (function () {
                                    console.log("DiscourseEmbed", DiscourseEmbed);
                                    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>
                            {{!-- {{/has}} --}}
                        </div>
                    </div>
                    {{/post}}

                </div>
            </section>

コメントの下に貼り付けたGhost post.hbsファイルコード:Screenshot by Lightshot
そして私の埋め込み設定Screenshot by Lightshot

=====

最初のコメントがリストされている(Lightshot — screenshot tool for Mac & Win
それを削除するにはどうすればよいでしょうか。

Discourseトピックには、元の投稿リンクのみが投稿されており、投稿はありません:Screenshot by Lightshot

OPと同じように、ブログのコンテンツをこのトピックに投稿する方法を知っている人はいますか?

「ディスカッションを読み込み中」と表示され続ける場合はどうすればよいですか?

ブラウザのウェブインスペクターを開き、コンソールタブでエラーがないか確認してみてください。エラーをここに投稿すれば、誰かが助けてくれるかもしれません。

また、ブラウザのウェブインスペクターを開き、要素タブで「discourse-comments」を検索してみてください。これにより、マークアップ内の1つの要素がハイライト表示されるはずです。<div> id="discourse-comments"> 要素のすぐ下に、<script> タグがあるはずです。そのタグの内容に明白なエラーがないか確認してください。

おそらく最初に確認すべきことは、Discourseで設定したドメインのホストレコードが、公開カテゴリに投稿を発行していることを確認することです。

保護されたカテゴリ、またはユーザーがコンテンツを表示するためにログインする必要があるDiscourseサイトに投稿しようとすると、エラーが発生する可能性が高いです。

「いいね!」 2

サイモン、ご協力ありがとうございます。

コンソールは空の状態で開始されましたが、しばらくするとこのエラーが表示されます。

編集:
多くのトラブルシューティングの結果、discourseEmbedUrl に「www.」を含める必要があることがわかりました。

「いいね!」 3

皆さん、こんにちは!いくつか質問があります。

  1. 「インポートされたトピックは、返信があるまで非公開になります」というオプションが、「埋め込み設定の保存」をクリックするたびに、選択解除しても有効に戻ってしまうのはなぜでしょうか?

  1. Chromeでブログ記事を表示すると、埋め込まれたDiscourseコメントが表示されるはずの場所に、以下のものが表示されます。

Safariでは、このスペースに何もメッセージが表示されず、ただ空白/白いブロックが表示されるだけです。

これらのテストは、両方のブラウザでDiscourseにログインした状態で行っています。ブログはDiscourseのインストールとは異なるドメインにあります。

よろしくお願いします!

なぜそのようなことが起こるのか分かりません。サイト設定ページに移動して、embed unlisted サイト設定の値を変更するとどうなりますか?

この設定と、「インポートされたトピックはリストに表示されません…」の設定は、互いにミラーリングされるはずです。

プライベートDiscourseカテゴリにトピックを埋め込んでいるのでない限り、ブログがDiscourseとは異なるドメインにあっても問題ないはずです。

このブログ投稿(https://www.antsylabs.com/blogs/the-ant-hill/break-out-of-your-workout-rut-with-8-amrap-fitness-challenges)で表示されているエラーは次のとおりです。

Refused to frame 'https://community.irla.co/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://antsylabs.com https://antsylabs.com".

Discourseサイトのホストレコードに、完全なドメイン(wwwを含む)が設定されていますか?設定にantsylabs.comのみを追加した可能性があります。

「いいね!」 2

これが問題でした、ありがとうございます!

その通りです。このレコードから「www」を省略していました。これをホストレコードに追加すると、埋め込みコメントが完全に表示されるようになります。

大変助かりました!心より感謝いたします。

「いいね!」 1

埋め込みコメントを逆年代順(新しいものから古いものへ)で表示することは可能ですか?

現在、それは不可能です。たとえば、「すべて」、「最近」、「ベスト」などのコメントをフィルタリングするためのユーザー選択可能なオプションが埋め込みコメントに表示されると素晴らしいでしょう。

「いいね!」 2

クローラーがドイツ語のウムラウト(Ä、Ö、Üなど)を処理できないということはありますか?
「Ich würde」のようなタイトルが「Ich würde」になってしまいます。

いくつか質問があり、どなたか手伝っていただけると幸いです。

NextJSの静的エクスポートサイトにコメントを埋め込もうとしています。つまり、サイトが公開される時点で、すべてのページが事前生成されているため、他の場所でDiscourseはSPAをスクレイピングできないと見たことがありますが、私のウェブサイトなら処理できるはずだと理解しています。

フォーラムをforum.domain.com、コメントを埋め込みたいウェブサイトをsite.domain.comと仮定します。コメントに関連するすべてのスクリプトを追加しましたが、iframe内で「Loading discussion」が永遠に表示されます。

Safariから開くと、コンソールに次のエラーが表示されます。

Unable to post message to https://forum.domain.com. Recipient has origin https://site.domain.com.

これはCORSの問題のようですが、DiscourseインスタンスのEmbedding設定にsite.domain.comwww.site.domain.comの両方を追加しました。

なぜかFirefoxコンソールではこのエラーが表示されず、次のものだけが表示されます。

そして最後に、https://forum.domain.coom/embed/comments?embed_url=https%3A%2F%2Fsite.domain.com%2Fpath%2Fto%2Fpageにアクセスしても、永遠にLoading Discussionが表示されます。これは、問題が私のウェブサイトではなく、Discourse側にあるのではないかと思わせます。埋め込みがどのように機能するかを誤解していない限り、誰かアドバイスがあれば、大いに感謝します。

興味深いのは、おそらく関連していることですが、2種類のページに埋め込みを追加しました:site.domain.com/path/to/pagesite.domain.com/longer/path/to/pageですが、ホームページにはコメントタグを追加していません。しかし、私のDiscourseでは、site.domain.comのホームページ専用のトピックが表示されており、なぜかユーザーがウェブサイトを訪問するたびに更新されているようです。

image

そのため、現在は信じられないほどの編集が加えられています。埋め込まれたテキストの一部にはメールアドレスが含まれており、Discourseでは[email protected]としてレンダリングされ、すべての編集はその部分を変更しているように表示されます。

「いいね!」 1

こんにちは!

この「バグ」についてご意見を伺いたいのですが:Embed: dates are not localized - #9 by weber-s

日付のローカライズ設定を設けるのは理にかなっていますか?現状では英語になっており、カスタマイズの余地がありません。

別のページに埋め込まれた投稿で、画像/スクリーンショットが共有されると見栄えが悪くなるシナリオがあります。

別のサイトに埋め込まれた投稿の画像を非表示にするための良い解決策は何でしょうか?

「いいね!」 1

テーマにはこの機能専用のCSSタブがあるので、CSSで投稿本文内の画像を非表示にするのが最も簡単な方法です。

「いいね!」 1