Discourseをフルコメントシステムとしてサイトに埋め込む

Discourseの埋め込みシステムを使用すると、iframeを通じて外部サイトにトピックのコメントを表示できます。しかし、これまでその体験は読み取り専用でした。閲覧者が返信、いいね、または議論への参加を行うには、必ずDiscourseサイトへ移動する必要がありました。

今回は、埋め込み用にフルアプリモードを追加しました。これにより、iframe内に完全なDiscourseアプリケーションが読み込まれます。これによって、あなたのブログやウェブサイトから離れることなく、閲覧者がトピックに返信したり、いいねや引用を行ったり、議論に参加したりできるようになりました。

有効化方法

管理画面 \u003e 詳細設定 \u003e 埋め込みに移動すると、ページの上部にフルアプリモードを有効にする新しいトグルが表示されます。

オンにすると:

  • 埋め込み設定スニペットに自動的に fullApp: true および embedHeight: '800px' パラメータが含まれます
  • このモードを有効にするサイト設定も自動的に有効になります

この設定は、埋め込み \u003e 設定タブの embed_full_app としても利用可能です。

閲覧者への変化

フルアプリモードを有効にすると、埋め込まれたiframeは静的な返信リストの代わりに完全なDiscourse UIを読み込みます。外部サイトの閲覧者は以下が可能になります:

  • トピックに直接返信する
  • 投稿にいいねしたり引用したりする
  • フォーラムと同様にトピック内を移動する

これにより、ブログの読者はページから離れることなく、第一級の議論体験を得ることができます。

デモ

実際に動作を確認するには、当社のブログの以下の投稿をご覧ください:Discourseの信頼レベルを理解するタグについて話す時が来ましたDiscourse AIの紹介

「いいね!」 38

これは驚くべきことで、ゲームチェンジャーです。よくやりました、チーム。:discourse: :clap:

「いいね!」 2

お、これは本当に素晴らしい進化ですね!! :+1:

「いいね!」 2

これは素晴らしいですね!元のページ内で直接編集できるのは良いことですが、私にとっては埋め込み版で数式がレンダリングされることの方が、さらに大きな改善点だと感じています。自分のサイトでも活用できることを楽しみにしています。

試してみるために、リンクされたデモトピックの一つに移動し、そこで返信する際にいくつかの小さな問題に気づきました:

  1. エディタツールバーに Markdown/リッチエディタの切り替えボタンが表示されませんでした。
  2. 投稿後、サイト上でその投稿を編集しようとすると、「別のウィンドウで編集されています」という警告が表示されましたが、実際には編集用の他のウィンドウは開いていませんでした。
  3. 自分の返信を削除できませんでした。どうやらコミュニティによって削除されたようです。

全体的には、大きな一歩を踏み出されたと思います。ありがとうございます!

「いいね!」 3

埋め込み環境での体験をシンプルにするため、その機能をはじめ、多くの UI 要素を削除しました。もし必要であれば、小さなテーマコンポーネントを追加することで、あなたのサイトにそれを戻すことは可能です。

新しい機能については、常に適切なバランスを探っています。そのため、ほとんどのブログにとって意味のある体験になるように設計しましたが、Discourse はご期待通り、いつでもカスタマイズ可能です。

興味深い事例ですね。この件については引き続き注視していきます。

「いいね!」 7

これを Discourse 自体に埋め込むことは可能でしょうか?

つまり、ブログとしてトピックを作成し、それに対応するコメント(l)を別のトピックとして分離するといった使い方です。

訪問者にアカウントがない場合、アカウント作成を促すメッセージが表示されるのでしょうか?

新しいスレッド形式の返信機能と組み合わせれば、非常に良いものになると思います。

もしかしたら可能かもしれませんが、今回はそれが焦点ではないため、一切テストしていません。

この機能の範囲外です。

はい、ログイン用の新しいタブが開きます。

はい!私たちもその実装が間近に到来することをとても楽しみにしています!

「いいね!」 2

もしチャットでもこれができたらいいのにね :smiley:

これは素晴らしいですね!まさにこの機能をもう一度見直そうと思っていたタイミングで登場しました :smiley:

一つ提案したいのは、スクロールバーをより明確にすることです。例えば、こちらのページを見てください:Understanding Discourse Trust Levels

これを見ると、コメントが3つあるように見えます。マウスを合わせると、右上に小さな銀色のデフォルトのスクロールバーがうっすらと表示されています(Firefox、Linux)。

Discourseの仕組みを知らない場合、現在3つの返信があると思い込み、Jayの名前の横にある「返信」ボタンがトピックへの一般的な返信ボタンだと誤解してしまいます。残念ながら、この誤解を避けるために誰かが誤ってクリックするたびに、Jayには返信通知が届いてしまいます。

以下のような解決策はないでしょうか:
a) 「トピックに返信」ボタンを常に表示させる方法
b) 洗練されたデザインを保ちつつ、スクロールをより目立たせる方法

「いいね!」 6

素晴らしいご提案ですね。より一般的に言えば、UI 要素が少しやりすぎで弱くなりすぎてはいませんか?昨日の「信頼レベル」に関するブログ投稿に返信した際、タイムラインスクロール要素が欠落しているため、自分の返信を確認できるまで無限スクロールを続ける必要がありました。

「いいね!」 4

報告の観点から、返信や「いいね」はどのように扱われますか?特定のカテゴリに割り当てられるのでしょうか?

編集:ああ、今理解しました。埋め込みページはカテゴリに投稿されます。このように

「いいね!」 2

これは素晴らしいです。ありがとうございます。

他のユーザーがコメントしているように、無限スクロールは直感的ではなく、コメント数が定義された高さを超えると、返信ボタンが見えなくなってしまう問題があります。

「いいね!」 1

ある理由で、Super Fight Bot が挑戦を返してきたり、他のこととして最も古い返信に関するものだったりします。

でも、この埋め込みは気に入りました。

残念ながら、あなたの例の1つが示す通り、これではユーザーが1レベル目のコメントを投稿できるようになるまで、iframe(多くの欠点があります)内の膨大で目を痛めるほどのコメントをスクロールして確認する必要があります。トップレベルで、返信ではないコメントを追加する方法はありますか?

「いいね!」 3