Embed Discourse comments on another website via Javascript

A post was split to a new topic: Embed Discourse using external_id

For a documentation site use case (hundreds/thousands of pages), is it possible to not have Discourse generate the topic when a user visits the pages, but rather when they want to leave a comment, the way Giscus works?

This is now “Allowlist”

This is now “Username for topic creation”.

Aside from that, is there a way to test the integration from http://localhost? I get this error in the console due to the lack of https:

Refused to frame ‘https://forum.weaviate.io/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’ https://localhost:3000”.

1 Like

Hi! Thanks for reporting. I updated some parts from the guide, but it may need to be reviewed in-depth to ensure it’s properly updated and working.

You may need to use a service like ngrok.

2 Likes

Edit: turns out using url_escape on the embed URL (since I use Liquid to automatically insert the right URL) breaks the embed. Whoops :upside_down_face:

Hey! I was planning on using forums software to double up as my blog’s comment section, so when I found out not only do y’all have a way to do that but it is also currently live on someone’s website, my mind exploded :exploding_head:

However, when trying to implement this system on my site, an error message is shown on my site, and this popped up on my forums’ error logs:

Error message
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

I’m using Jekyll to host my blog and hosting my forums alongside it using nginx virtual hosts. I have eleboog.com as an allowed host and /posts/.* as my path allowlist. Any ideas as to what could be causing this issue? Thank you so much!

I was stuck in between but after some alterations i got it. I am working with my ghost blog and discourse
Here is what i added in post.hbs file for all my posts.

{{#post}}
                    <div class="row">
                        <div class="col-sm-10 offset-sm-1">
                            {{> "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 file code pasted under comment : Screenshot by Lightshot
And this My Embedded settings : Screenshot by Lightshot

=====

I am getting the very first comment as Listed ( Screenshot by Lightshot ).
How can i remove that .

No post is posted on discourse topic Only the the original post link. : Screenshot by Lightshot

Anyone know how can i post the content of my blog into this topic… Same like OP.

What to do when it keeps showing “Loading Discussion”?

Try opening your browser’s web inspector to its Console tab and see if there are any errors. If you post the errors here, someone may be able to help.

Also, try opening your browser’s web inspector to its Elements tab and searching for ‘discourse-comments’. That should highlight one element in the markup. Directly under the <div id="discourse-comments"> element, there should be a script tag. Have a look at the content of that tag for obvious errors.

Maybe the first thing to check is to make sure that the Host record that you have configured for the domain on Discourse is publishing posts to a public category.

If you are attempting to publish posts to either a protected category, or to a Discourse site that requires users to login to view content, you will likely get errors.

2 Likes

Thank you Simon for helping out.

Console started empty, but after a while it shows this error:

Edit:
I figured after a lot of troubleshooting that I needed to include “www.” in the discourseEmbedUrl.

3 Likes

Hey everyone! A couple questions:

  1. Any ideas why the “Imported topics will be unlisted until there is a reply.” option might keep reverting to being activated every time I click “Save Embedding Settings”, even after I’ve deselected it?

Screenshot 2023-09-20 at 4.12.03 PM

  1. When viewing a blog post in Chrome, I’m seeing the following where the embedded Discourse comments should be displayed:

And in Safari, there is just a blank/white block in this space, with no message at all.

I’m logged into the Discourse install on both browsers while testing this. The blog is on a different domain than the Discourse install.

Thanks in advance!

I don’t know why that would be happening. What happens if you go to your site settings page and change the value of the embed unlisted site setting?

That setting, and the “Imported topics will be unlisted…” setting are supposed to mirror each other.

As long as you are not embedding the topics in a private Discourse category, having the blog on a different domain than Discourse should not cause an issue.

The error I’m seeing on this blog post (Break Out Of Your Workout Rut With 8 AMRAP Fitness Challenges) is:

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".

Do you have the full domain (including the www) set on the Host record on your Discourse site? It looks like you might have just added antsylabs.com to that setting.

2 Likes

This was the issue, thank you!

You’re absolutely right. I had omitted the ‘www’ from this record, and adding it to the host record results in the embedded comments displaying perfectly.

Thank you so much for your help! I sincerely appreciate it.

1 Like

Is it possible to display the embedded comments in reverse chronological order (newest first, oldest last)?

That is not currently possible. It would be great if embedded comments displayed some user selectable options for filtering comments. For example “all”, “recent”, “best.”

2 Likes

Is it possible that the crawler cannot handle German umlauts, like Ä, Ö, Ü?
Titles like “Ich würde” end up in “Ich würde”.

I have quite a few questions, and I’d appreciate if someone could help me.

I’m trying to embed comments on a NextJS website with static exports, i.e. by the time the site is live, all pages are pre-generated, so although I’ve seen comments elsewhere that discourse cannot scrape SPA, my understanding is that it should be able to handle my website.

Let’s imagine my forum is at forum.domain.com and my website where I want to embed comments is at site.domain.com. We added all the scripts related to comments, and see an eternal “Loading discussion” within an iframe.

If I open from Safari, I see the following error in the console:

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

Which seems to be a CORS issue, but I did add both site.domain.com and www.site.domain.com to the Embedding settings on my Discourse instance.

For some reason, I don’t see that error within Firefox console, I only see

And finally, if I go to https://forum.domain.coom/embed/comments?embed_url=https%3A%2F%2Fsite.domain.com%2Fpath%2Fto%2Fpage, I also see the Loading Discussion eternally. Which makes me think the issue is somehow on Discourse end, and not on my website. Unless I misunderstand how embedding works, so if anyone has any advice, would greatly appreciate it.

What’s interesting, and perhaps related, is that I’ve added embedding on two kinds of pages: site.domain.com/path/to/page and site.domain.com/longer/path/to/page, and I haven’t added comments tag to the home page. But on my discourse, I see a topic dedicated to the home page of site.domain.com, which, for some reason, seems to be updated every time a user visits a website

image

so now it has an insane amount of edits. Part of the embedded text contains an email address, which is rendered in discourse as [email protected] and all the edits are shown as if modifying that part

1 Like

Hello there!

I would like to have your thought on this “bug”: Embed: dates are not localized - #9 by weber-s

Would it make sens to have a setting for the date localization? Because right now it is in english, with no possibility of customization.

We have a scenario where it doesn’t look good when people share image/screenshots in their posts for posts that are embedded on another page.

What would be a good solution for hiding images in posts that are embedded in another site?

1 Like

There is a dedicated CSS tab in themes for this feature, so hidding images inside the post body with CSS is the quickest way to achieve that.

1 Like