通过 Javascript 将 Discourse 评论嵌入到另一个网站上

{“content”:“\u003cdiv data-theme-toc="true"\u003e \u003c/div\u003e\n\nDiscourse 具有使用 Javascript API 创建 IFRAME 的功能,以便将主题的评论嵌入到远程站点中。有关此功能实际应用的示例,请查看 Coding Horror 的博客。该博客通过 Ghost 运行,但评论是从他的 Discourse 论坛 嵌入的。\n\n使用此设置时,需要注意的一点是用户必须导航到您的论坛才能发表回复。这是故意的,因为我们认为 Discourse 论坛上的发帖界面目前比我们能通过 Javascript 嵌入的界面要丰富得多。\n\n本指南将向您展示如何在自己的博客或网站上设置评论嵌入。\n\n### 工作原理\n\n在 Discourse 中,一个主题由许多帖子组成。当您在另一个站点上嵌入 Discourse 时,您是将一个文档(博客文章、HTML 页面等)与单个主题关联起来。当人们在该主题中发帖时,他们的评论将自动显示在您嵌入它的页面上。\n\nYou have the choice to have Discourse create the topics automatically when a new embedding is found, or you can create the topics yourself in advance. \n\n### 配置 Discourse 以进行嵌入(简单设置)\n\n以下设置将在 Discourse 论坛(运行于 =DISCOURSE=)上嵌入评论源,在虚构博客 URL http://example.com/blog/entry-123.html 上的页面中显示。\n\n论坛的域名\n博客的域名\n\n1. 访问 Discourse 安装中的 管理 > 自定义 > 嵌入https://=DISCOURSE=/admin/customize/embedding\n\n2. 创建至少一个可嵌入主机。这应该是您希望嵌入评论的主机名(域名)。在本例中,主机是 =BLOG= —— 请注意没有 http:// 和路径。\n\n - 路径白名单 允许您指定远程主机上接受嵌入的路径。\n\n - 发布到分类 - 如果您在输入主机时提供了分类,则从该主机导入的帖子将自动进入该分类。不同的主机可以发布到不同的分类。\n\n - 标签 - 您可以为从给定主机创建的主题自动应用标签。\n\n - 帖子作者 - 您可以选择按主机覆盖主题创建用户。如果未设置,则使用“帖子和主题”选项卡中的默认值。\n \n3. 导航到帖子和主题选项卡,填写主题创建的用户名字段。这是在新嵌入被发现时创建主题的用户。让我们假设我们的 discourse 有一个名为 eviltrout 的用户,所以其值为 eviltrout。\n\n4. 将以下 HTML 插入到 http://=BLOG=/blog/entry-123.html 处的网页上\n\nhtml\n\u003cdiv id='discourse-comments'\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n DiscourseEmbed = {\n discourseUrl: 'https://discourse.example.com/',\n discourseEmbedUrl: 'http://example.com/blog/entry-123.html',\n // className: 'CLASS_NAME',\n };\n\n (function() {\n var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;\n d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';\n (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);\n })();\n\u003c/script\u003e\n\n\n代码片段中可配置的部分位于 DiscourseEmbed 对象中。discourseUrl 是到您的 Discourse 基础的完整路径,包含尾部斜杠。discourseEmbedUrl 是当前嵌入评论源的文档。\n\n如果正确设置了此项,当您第一次访问 http://=BLOG=/blog/entry-123.html 时,它将尝试加载博客文章的评论。由于没有评论,它会指示 Discourse 论坛在后台创建一个新主题。eviltrout 将在后台创建一个新主题,并且将抓取您的博客内容作为第一篇帖子,并自动提取文本。\n\n新主题创建后,用户可以对其进行评论,下次访问 http://=BLOG=/blog/entry-123.html 时,他们的评论将自动显示。\n\nclassName 是可选的,它将向嵌入项添加一个您选择的类,以便您可以使用 CSS 进行自定义。\n\n\u003e :bulb: 提示: 如果您的博客有多个作者,您可以在每页添加一个 \u003cmeta name=\"discourse-username\" content=\"author_username\"\u003e 标签。当 Discourse 抓取页面以创建主题时,它将使用此 meta 标签来确定帖子作者,覆盖管理设置中设置的默认用户名。\n\n### 在多个页面上嵌入\n\n在上面的示例中,我们在 Javascript 代码片段中硬编码了我们的 http://=BLOG=/blog/entry-123.html URL。这通常是不够的,因为许多网站都有许多自动生成的页面。例如,在博客中,每篇文章通常都有自己的页面。为了支持这一点,请在希望显示评论的每个页面上放置相同的代码片段,但用当前页面的 URL 替换传递给 discourseEmbedUrl 的值。在我的博客上,我为 discourseEmbedUrl 使用的值是:'http://eviltrout.com\u003c%= current_page.url %\u003e' —— 随着新博客页面的创建,Discourse 上也会自动为它们创建新主题。\n\n### 样式化您的嵌入内容\n\nYou have the ability to add a stylesheet for your embedded comments. Use the Embedded CSS section of the Theme editor at Admin \u003e Customize \u003e Themes \u003e [your theme] \u003e Edit CSS/HTML and you can add a custom stylesheet that will be served up with your embedded comments. By default we think the layout looks nice on a white background, but if your site has a unique layout you’ll want to style it yourself.\n\n###(可选)添加轮询源\n\n如上所述,Discourse 将自动抓取嵌入它的任何站点。但是,HTML 有时可能难以解析,并且可能无法正确提取您的帖子内容。许多博客和网站支持 RSS/Atom 源进行联合,Discourse 可以使用它来更准确地提取您的博客文章内容。\n\nDiscourse 附带 RSS 轮询插件(默认包含)。如果您在嵌入 Discourse 的站点上设置了 RSS 或 Atom 源,您可以启用 rss_polling_enabled 站点设置,并通过管理 > 插件 > RSS 轮询添加您的源 URL。添加源 URL 后,Discourse 将解析该源,并根据您添加到“嵌入设置”中的“允许的主机”将帖子发布到相应的分类中。\n\n###(替代配置)链接到现有主题\n\n有些人更喜欢不让 Discourse 在他们的论坛上自动创建主题。他们希望自己创建主题,然后只需告诉他们的嵌入代码他们想要关联哪个主题。您可以通过稍微更改嵌入代码来实现这一点:\n\nhtml\n\u003cdiv id='discourse-comments'\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n window.DiscourseEmbed = {\n discourseUrl: 'https://=DISCOURSE=/',\n topicId: 12345\n };\n\n (function() {\n var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;\n d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';\n (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);\n })();\n\u003c/script\u003e\n\n\n唯一的区别是我们用 Discourse 中某个主题的 ID 替换了 discourseEmbedUrl。如果您这样做,将不会创建任何主题,并且该主题的评论将自动显示。\n\n### 设置引用策略\n\n由于最近(2020 年 9 月)浏览器默认引用策略的更改,Discourse 现在明确默认将 iframe 的引用策略设置为 \"no-referrer-when-downgrade\"。如果出于安全原因您的网站需要更严格的引用策略,可以通过在嵌入脚本的 DiscourseEmbed 对象中添加 discourseReferrerPolicy 值来设置。例如:\n\njs\nDiscourseEmbed = { discourseUrl: 'https://forum.example.com/',\n discourseEmbedUrl: '\u003cyour_posts_canonical_URL\u003e',\n discourseReferrerPolicy: 'strict-origin-when-cross-origin'};\n\n\n### 以编程方式查询嵌入详情\n\n我们有一个 API 端点,可以使用 embed_url 作为参数查询嵌入详情:\n\n\ncurl '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' \n\n\n响应如下:\n\njson\n{\n \"topic_id\": 187794,\n \"post_id\": 925017,\n \"topic_slug\": \"discourse-team-grows-to-50-blog\",\n \"comment_count\": 2\n}\n\n\n### 嵌入私人站点评论\n\n对于私有 Discourse 实例,如果 Discourse 位于博客域名的子域名下,那么已登录 Discourse 的用户将看到评论。未登录 Discourse 的用户将看到“拒绝连接”消息。如果 Discourse 和博客位于完全不同的域下,则私人论坛不会显示任何评论。\n\n### 故障排除\n\n用户在嵌入 Discourse 时遇到的最常见问题是为添加的可嵌入主机设置了不正确的值。请务必仔细检查它是否仅是您站点的域名,并且不包含任何多余的斜杠或无效字符。”}

116 个赞
Deeply integrating Discourse into website
Is it possible to test Discourse Embed comment on localhost?
Discourse 1.4 Released!
Is it possible to use Discourse as a "commenting system"?
Trouble connecting drupal and discourse
Using Discourse in a web app
Create topic when a link is clicked
Learning Management Systems
Discourse blog comments like your blog comments
Can be integrated with liquid templates?
Comment Reply Threading / Linking on the WordPress Side
Embedded Comments iframe Height
Using Discourse as a comment system
Use Discourse as the comments section of a Jekyll site?
Imported topic via embedding will not render normally
News Plugin :newspaper:
Cannot get embedding to work
Integrating Discourse with a larger social network app?
What is Discourse Blog built with?
Using Discourse as commenting system via JavaScript: Delay load or load on scroll
Anybody using Discourse for Blog Comments on a Gatsby site?
What software you use for blog.discourse.org?
Embedded topic comments are missing if containing page's URL includes a fragment identifier
Using Discourse to power comments in an event system or blog?
"Error Embedding" comments
Shared Discourse/Static Site Login
Discourse + Ghost Blog Integration. Is my Understanding Wrong?
Trying to do embedding. Hit with “The referer did not match any of the following hosts:” issue
Looking for Ruby-based CMS recommendations as a compliment to Discourse
[Paid] Embedding: Allowing one RSS feed and one username per host
Discourse comment-like discussion
Discourse embedding error: Failed to execute postMessage on DOMWindow
Discourse + Ghost integration and SEO
Error Embedding
Hide or remove "Listed/Unlisted" comments when embedded
Display all posts in embedding topics with +100 comments
Embedding Topic topic-map or Topic Summary on Other Site
Wordpress integration by iFrame instead of sync
Not generate topic automatically for all blog posts
Link to Discourse topic without displaying Comments (in Drupal)
Which CMS for Discourse
Understanding how embedding works on remote site
Arguments against integrated intranet solutions?
Embed single discourse Topics to articles on news website
Displaying comments embed as a link without using the WP plugin
Get right title embedding comments
Disqus-like commenting on Wordpress
Embedding Discourse Comments *without* Javascript
How to integrate in discourse in zenodo
Co-author topics
How might we better structure #howto?
Issue with image uploads on embedded topics
Getting Discourse URL on embedded comments
Integrating registered users notifications+avatar into static website
Pandoc integration
Can I use Discourse to add Commenting to my Blogs?
How can I get the list of Discourse Topic IDs dynamically
[Question/Request] Featured image url for post
JS embed fails with "Job exception: invalid stored block lengths (Zlib::DataError)"
No `Referer:`, no embedding
Commenting system: integrate Discourse and Webflow
WP Discourse Embed Plugin
Embedding error
Best option to have category "hidden" on Discourse, but otherwise accessible if you have the link?
Topic list on the right side
Create an empty topic via API
Using Discourse for Comments?
Add button with link post forum
Add button with link post forum
Discourse embed crawls cookie warning text
The Gamification of Discourse
Embedding Discourse comment box to blog page
Pinned topic summary is using first-line link text instead of body text
Nextcloud support
Discourse comment button on blog?
Is there a Disqus like comment implementation?
One Discourse instance, Two Blogs?
Embeddable Discourse activity widget
Blog Post Styling
Integration: Discourse comments in Gitbook
Is it possible to autologin discourse via iframe?
Widget to embed in 3rd party websites
How to customize the text in an embedded post?
Benefits to using WP comments over JS embed?
Benefits to using WP comments over JS embed?
What CSS was used for Comments here?
Setting canonical URL when posting/cross-posting
Embed comments from Discourse in your single page app
Embedded site stuck at "Loading Discussions"
Embedding Categories in Existing SPA
[Update] Simplify embed feature
Does setting the discourseUrl prevent other clients from creating embedded posts for moved pages?
To use Discourse completely on shopify
I'm unsure of how oneboxing is setup for blog posts to Discourse
I'm unsure of how oneboxing is setup for blog posts to Discourse
Embed my Discourse Forum as IFrame
Discourse blog (article and comments)
Most efficient way to use Discourse for comments on Shopify blog posts?
Is the Discourse content markdown toolbar available as a standalone?
Is there a blog plugin for Discourse's meta blog implementations?
Discourse Comments stuck on "Loading..."
Topic Ratings Plugin
Discourse implementation in create react app
Embed forum
BricksForge and Bricks API Query Builder with Discourse
Wordpress posts are now unlisted from latest update of forum and plugin
Most efficient way to use Discourse for comments on Shopify blog posts?
AI sockpuppet accounts to jumpstart my community?
Should Discourse make an effort to become a viable comment platform?
Problem embeding a topic in a page on another domain
Want to set internal forum on our reactjs member's platform
Embed Discourse using external_id
Expose external_id in embed.js
Grow my community
Forbidden error on embed widget
Strapi discourse integration
Migrating embedded topics from topicId to automatic topic creation
Migrating embedded topics from topicId to automatic topic creation
Problem with "Publish as Unlisted Topics"
RSS Polling
Failed to execute 'postMessage' on 'DOMWindow'
Failed to execute 'postMessage' on 'DOMWindow'
RSS plugin default show full post
Is there a Disqus like comment implementation?
Embending topic in 'another' website. And change redirect page after login
Embedding full threads - possible?
How to customize the text in an embedded post?
How to show the latest discussion on the front page of our main website
Embed Most Recent Replies To Post in Specific Category
Is anyone using Discourse in higher ed for courses?
Embed a list of Discourse topics onto an external site
Is Discourse a full website or just a forum add-in?
Is Discourse a full website or just a forum add-in?
Can I send an external URL to the Discourse API for it to return topics linking to that URL?
Threaded comments when using Discourse for website comments?
How to Enable Terms of Service and Privacy Policy Pages in Discourse?
Bug with URLs in Embedded Comments
Blog posts would be nicer if authored by an identifiable person
Structuring an active support community migrating from Facebook
Embed Discourse as a full comment system on your site
Where in Discourse can users publicly share PII?
"Show Full Post" button doesn't work in subfolder installations
"Show Full Post" button doesn't work in subfolder installations
How to use Discourse API for article forums and independent community spaces
JavaScript embed won’t display embed, console log shows: Failed to execute postMessage on DOMWindow…
Can i use / embed discourse to make comments on pages hosted for example on Aquia
Emoji are huge when embedding
Set topic title with Discourse Embed
Embedding Discourse Profile via Javascript
WP-discourse: comments are not pulled over
discourseEmbed, does not match recipient window origin
Statamic integration
How to embed whole forum in another site
Possible to add comment count (to a Ghost blog)?
How can I delete or undelete topics?
Link existing forum topic to new WordPress post
How to enable Discourse comments via JavaScript in Wordpress?
How to link the existing discourse comments to wordpress posts?
Embed whole forum
WP Discourse Embed Plugin
WP Discourse Embed Plugin
Synchronising log out of discourse when logging out of WordPress
Topic as widget
Discourse a a comment system with React Native and Meteor
A post's TopicEmbed isn't destroyed when the post is deleted
Pages from Google search are not rendering
Controlling amount of embedded text
Zendesk Article Comment in Discourse Integration
Flood of new topics from Embedded Discourse
Discourse topics as Dokuwiki talk pages
Multiple cors origins on hosted discourse?
WordPress / Discourse API Strategy: Get Reply Count via API Efficiently
Error Embedding for existing posts
Making embedded JavaScript based discourse commenting responsive
[paid] Preference to create & embed a topic via JavaScript only when a user clicks the "Start Discussion" link
Embedding: Discussion not showing up for new posts
Allowing WP comments while showing Discourse comments too
Handling large pictures of embedded comments inside jquery window
"Error Embedding" comments
Embedded comments not displayed due to X-Frame-Options DENY
Failed to execute postMessage on DOMWindow: The target origin provided does not match
Embedding Discourse сomments with GitBook

Is it possible to use this method if the Discourse category is hidden from public view?

Probably not, but it might work if all of your viewers are logged in.

I’ve created a tutorial that walks you through the process of setting up a local discourse instance on vagrant for your local tests to embed discourse in your front-end development project. You can find it here: Local discourse: vagrant, ansible, lxd, docker, discourse-embedding

This is different from other descriptions that I found before in that it allows you to run locally a complete discourse set-up like you would do in production to get a feel for the “real” set-up process. In addition this set-up is able to serve as a local development playground for embedding discourse into your project.

2 个赞

Hi, is there a way to disable embedding for posts in draft status? I can’t see any handlebar within Ghost for post status, can I change the embed settings to exclude /p/ which is used to preview posts? I have a problem where posts that are previewed are being added to Discourse. Cheers.

Can’t seem to find the setting to style the embedding iframe any more…? Is the original post out of date somehow?

EDIT: Nevermind, it had just changed places. I can add it to a theme component :slight_smile: thanks!

2 个赞

This sounds like a ghost question, not a Discourse question? However your Ghost integration is working needs to take that into account, not Discourse.

3 个赞

Hello everyone!
I need some help to embed Discourse into READTHEDOCS (using Sphinx)
Does anyone have this kind of experience?

1 个赞

Looks like there is GitHub - pdavide/sphinxcontrib-discourse which always embed a single topic.

6 个赞

Thank you for reply, let check it out

大家好
我在嵌入特定主题时遇到了一些问题:
我尝试了各种设置变体,但在我的网站上仍然只显示“嵌入错误”。
您能看出我可能哪里做错了吗?我花了很长时间试图解决这个问题,任何帮助都将不胜感激。

当前嵌入到网站中的代码

您的 JavaScript 控制台中有错误吗?

在你的第一张截图中,所有路径都设置为发布到“未分类”类别。如果你希望将所有帖子发布到同一个类别,只需创建一个“可嵌入”主机记录即可。

你在主机条目中添加的“路径白名单”值可能会导致问题。你可以将该值留空,以发布已添加 Discourse 嵌入脚本的博客站点中的所有帖子。如果你想为发布到特定 Discourse 类别设置特定路径,该路径应以 /.* 结尾。例如:/sites/.*

你路径 /t/newsletter-discussions/105 开头的双斜杠可能是一个问题。此外,这看起来像是 Discourse 主题的路径。如果设置,该路径应指向你博客上的一组帖子的路径。“路径白名单”设置的目的是允许你将博客上特定路径的帖子发布到特定的 Discourse 类别。

5 个赞

好的,谢谢西蒙,我很感激。我会试试看。

@codinghorror 一样,我也在使用 Ghost 的 Discourse 集成 使用默认配置,该配置将绝对 URL 用作 discourseEmbedURL

大约一周前,我决定更改 Ghost 博客的路由,使 URL 如 https://engineerworkshop.com/2020/02/20/how-to-set-up-wireguard-on-a-raspberry-pi/ 的文章重定向到 https://engineerworkshop.com/blog/how-to-set-up-wireguard-on-a-raspberry-pi/,其中 https://engineerworkshop.com/blog/how-to-set-up-wireguard-on-a-raspberry-pi/ 成为新的永久链接。

问题所在

您可能已经预见到了这个问题:discourseEmbedURL 仍设置为旧 URL,因此当嵌入脚本被调用时(此时 URL 已不同),Discourse 中会创建一个新的评论帖子。

尝试的解决方案(但失败了)

在此之前,我已经预见到了这个问题,并自以为聪明地使用正则表达式配合 remap 来修复 URL:rake posts:remap["[0-9]{4}\/[0-9]{2}\/[0-9]{2}","blog",regex]

虽然这“某种程度上”奏效了,但在原始 Discourse 评论帖子中使用的任何 URL,不幸的是,当我加载博客文章时,Discourse 中又创建了新的评论主题。

最终,我只是重新加载了网站上的每篇文章,并将评论从旧主题转移到了新主题,然后删除了原始主题(我知道,我知道)。显然,删除页面会对 SEO 产生负面影响,更不用说对用户体验的影响了。

我的问题

我猜测我的正则表达式补丁尝试之所以失败,是因为 Discourse 主题在后台 somehow 与 URL 关联。(我坦率承认自己对 Discourse 的数据结构并不了解)。为了未来的知识积累,也为了任何未来可能尝试同样操作的人,是否有办法将 Discourse 主题重新映射到新的博客文章 URL?

提前感谢!

5 个赞

7 篇帖子已合并到现有主题:WP Discourse Embed 插件

我非常喜欢这个功能,因为我运营着许多杂志风格的内容网站,可以自动生成话题到我们的论坛。但有没有办法让 URL 预览像 Discourse 中那样正常工作呢?

比如,不是这样:

而是像这样:

谢谢,
Jim

3 个赞

如果链接单独占一行,它应该会自动生成预览卡片。
然后将您的完整描述行放在下方,包括链接,就像您在第一张图中展示的那样。该描述将显示在预览卡片下方。

2 个赞

嗯……这确实是个问题,因为预览的正是页面本身。因此,在页面 HTML 或文章正文的开头放置链接会有些棘手。这是相关页面:

https://modelshipwrights.com/news/us-navy-light-cruiser-cl-89-miami

3 个赞

大家好。我快让这功能跑起来了,但意识到我设想的使用场景可能没我想象的那么直接,也不确定需要多少额外的工作量。

我希望利用这个功能来驱动一个基于用户生成内容的网站上的讨论。对于评论的嵌入、设置单点登录(SSO),以及确保我的用户能自动成为社区成员(使用相同的邮箱、用户名等),我都没有问题。

我原本希望的是:当我的网站上创建新的用户内容时,发布该内容的用户能成为相关 Discourse 帖子的作者,而不是嵌入功能中“创建话题的用户名”设置里定义的单一用户。我不会允许在我的现有注册流程之外进行注册,因此我可以 100% 确定 Discourse 用户要么已经存在,要么至少可以在创建新线程的同时被创建。

我想这样做的原因应该很明显。也就是说,内容创作者将成为我 Discourse 网站上该讨论的原作者(OP),可以自动订阅该线程并收到回复通知,其帖子会被高亮显示以区别于其他评论,等等。

有什么关于从哪里开始的建议吗?

谢谢!

3 个赞