Embed Discourse comments on another website via Javascript

I believe this is possible now. The embed_url property can be set when you first create the topic. Our WordPress plugin does that here: wp-discourse/discourse-publish.php at main · discourse/wp-discourse · GitHub. The embed_url property cannot be updated via the API after the topic has been created.

4 Likes

That’s fantastic! Looks like the API docs need to be updated then!

What would it take to get the property added to the update API method? That would let me solve this properly.

4 Likes

Hi, i’ve been struggling to get the posts on my blog to associate with forum posts using this method. It seems I’m having similar issues to some other users here with the iframe content-security-policy. My blog is generated by Jekyll and is hosted by github and my discourse is hosted by Digital Ocean. Their addresses are blendertube . com and forum.blendertube . com respectively.

Here is the error reported in my browser:

Refused to frame ‘forum.blendertube.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’ blendertube.com”.

Does this have anything to do with ssl for my discourse instance?

Here are some screenshots:

Hope ya’ll can help. Thanks!

1 Like

Here is another screenshot:

1 Like

Does anyone have an idea what the syntax would be to replace the “current_page.url” with the URL of a WordPress WooCommerce product page? We’d like to do this so we don’t have to customize the code for each page, and can easily apply it to all pages.

I tried replacing our own domain value for discourseEmbedUrl : 'http://eviltrout.com<%= current_page.url %>' but this did not work on WP.

1 Like

I think what we might need here is the new noindex, indexifembedded tag

Edit @codinghorror thought this was a good idea when it came up for a similar use case (The topic embed )

2 Likes

I can’t figure out if/how the following is possible:

When the discourse instance’s default theme is Dark, how can the embedded one be Light?

If my browsers are not messed up, it looks like @codinghorror’s implementation is just that way. How is this done in an elegant way? :smiley:

2 Likes

Note if anyone else ever tries this, the discourseEmbedUrl wasn’t working for me when trying to embed Topics directly into corresponding Thinkific LMS lessons, but the topicId method did work.

1 Like

I was using this feature for embedding discourse comments on our blog. It was working perfectly fine initially. I recently noticed that newer blogs (<1 yrs :rofl:) seem to have some issue where the slug is not created like in this case resulting in an incorrect hyperlink.

Slug generation method is set to ascii, and the allowed host is set as www.gyandhan.com

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://discussions.gyandhan.com/',
                     discourseEmbedUrl: '<%= request.original_url.split('?').first%>' };

  (function() {
    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>

Restating the obvious, but the issue I notice is that the topics created by the embed neither have the slug nor the title populated. I am still not sure why I am encountering this issue.

1 Like

Hi all, sorry if this is a dummy question -

From what I’m seeing, the embedded experience only allows to read some posts in a thread, but no interact with it within the website, right? It brings you back to discourse when you try to load more comments / reply or click on a profile

Is there a version of the embedded experience that lives entirely in a third-party website (not on discourse)?

When my site changes between dark and light mode, how could I notify the embeded part to switch the color mode?

I configured the Embedding Allowed Hosts as below


But when I try to add class for body of iframe, I found iframe.contentDocument is null, and if use document.getElementById("discourse-embed-frame").contentWindow.document, the error as below:

How can I provide a specific string in the site that embeds the iframe for Discourse to use as title (or at least for the slug) for the created thread? I have embedding URLs like example.com/12345 with textual content and the threads end up using words from the content, while I would like “12345”.

Isn’t it reading the <title> tag from the document?

Ah, that would make sense. My titles are more fancy than the “12345” though and might change over time while the “12345” would stay stable. That’s why I would like to use that rather.

I tested a bit: The scraper is indeed taking the <title>text</title>. Setting it to <title>12345</title> and overriding it for human clients using some <script>document.title = "fancy title";</script> at the bottom of the HTML document works fine. The created thread is using “12345” as title and slug URL while humans see a nice title on the page where the embedding is happening.

Thanks for the hint!

2 Likes

Hey everyone,

I’d like to know if it’s possible to fetch posts from any topic by #tag ?
For example, on the main (non-Discourse) website we have a page which is defined by it’s name, let’s call it “My show” (/myshow)

In the same, in our Discourse instance we have a lot of topics about “The Show”, they have the same hashtag #theshow and people can navigate those as seasons or events go.

The idea is to be able to fetch the latest posts from all the topics with #theshow tag. Is it possible to do so?

Closest we have is fetching all topics ordered by activity under a specific tag, check Embedding a list of Discourse Topics in another site.

2 Likes

How to prevent the first post on embed comments like Jeff’s blog?

EDIT: I was using arivanandan/discourse-embed-complete: Includes first post while embedding discourse :slightly_smiling_face:

What if I want to embed multiple topics’s comments in one single page? How to do that?