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