Embedding Discourse Comments via Javascript


(Neil Baptista) #96

Did you get this working? I’d like to have a look. Please share a URL.

Or, if anyone else like @firewaller has the comments working, with Discourse creating a new Topic on the fly, then please share the site URL.

Thank you.

(Neil Baptista) #97

We have reading lists on our site like this on ALDOUS HUXLEY: HUMANISM IN SCI-FI

We want to add comments to these pages. Since we already use Discourse for our discussion forum it would be ideal to use it for the comments as well. Our users are created in Discourse using SSO, so they are automatically signed in to Discourse.

Our ideal requirements would be adding comments in-place on our page, having Discourse essentially function as an engine. From this discussion, it appears that not going to happen.

So, our fall back would be:

  1. Embed the comments on our page.
  2. “Start discussion” would open Discourse with a topic created on the fly, with some content from our book list page injected for context.
  3. Reply editor is open so that a user has their bearings.

It’s already a bit jarring to go to a new page to comment on a post. So, we need some content for context and a Reply box open to smooth things out.

I’m following this thread to see if this may be possible, or if we’re just trying to fit a square peg in a round hole. In that case we’ll need to write our own.

I do imagine that any site that wants to add community will also have content or post pages that they need comments on. So, this is probably not so isolated a use case. Believe me, we’ve looked at Disqus, Muut, Spot.im, Livefyre.

(Gergely Fazekas) #98

Ok, I’m having a problem.

I solved the sameorigin issue, but the discourseEmbedUrl variable isn’t working, and thus the two systems don’t sync.

I run a ghost blog on www.dinchamion.com and a Discourse forum on community.dinchamion.com

Both are https from behind a reverse nginx proxy.

Inserting the embed code works as far as he script initializing, but then the following happens:

Browser console:

GET https://community.dinchamion.com/embed/comments?embed_url=%2F%2Fwww.dinchamion.com%3C%25%3D%20current_page.url%20%25%3E 403 (Forbidden)(anonymous function) @ comments?embed_url=%2F%2Fwww.dinchamion.com<%%3D current_page.url %>:75
comments?embed_url=%2F%2Fwww.dinchamion.com<%%3D current_page.url %>:185

Uncaught TypeError: Cannot read property 'forEach' of undefined(anonymous function) @ comments?embed_url=%2F%2Fwww.dinchamion.com<%%3D current_page.url %>:185

_application-28afc9acffebbc0a9cda52fa80414c1a.js:16231Uncaught TypeError: Cannot read property 'highlighted_languages' of undefined

Discourse error logs:

TypeError: Cannot read property 'forEach' of undefined
    at https://community.dinchamion.com/embed/comments?embed_url=%2F%2Fwww.dinchamion.com%3C%25%3D%20current_page.url%20%25%3E:185:34

I can tell that it’s the format of the variable that trips it up. But how can I fix this?

I feel like this is some incredible easy and obvious fix that I’m just not seeing. :-/

(Tropnevad) #99

I have managed to get this working via my ghost blog, but the issue for me is that none of my replies are showing up in ghost… I am using the default (casper) theme so not sure why its not working. All I see is how many replies there are, and dont see any continue discussion button, an example is shown below… any suggestions?


I have a feeling that this is a rather simple mistake that I am doing but I am new to all this… any suggestions as to where I am going wrong will be appreciated…

UPDATE: The issue was due to my maximum allowed comments setting being set to 0, after changing the Maximum number of posts to embed to a bigger number :slight_smile:

(Alex Armstrong) #100

Any chance you’ve got Privacy Badger or another ad-blocker that may be blocking the content from appearing?

(Tropnevad) #101

Thanks for the help, I thought that might be the case but tried with a few different browsers with same issue so not sure why. I am looking into it to see and if I can work it out.


I am considering using this method for a website I am working on and have a question. The website has a URI format that looks like http://domain.com/{product_name}

I would like to have a comments loaded using this method. There will be no topics at all, just comments associated directly with the product name. Our front page will not be the discourse front page at all. Basically just straight comments.

My questions are:

  1. Is this a good technology to accomplish this?
  2. Since the comments are embedded via javascript will this content not be considered for SEO purposes by Google?


(Kane York) #103

Based on what you said here, no, I don’t think Discourse is a good fit for product comments. Discourse is more focused on long-form discussions.

(Tropnevad) #104

I am also having the same issue with my ghost.io blog… any suggestions on how to fix


Hey @Tropnevad
Sorry @elSpectre coudnt get to you earlier…
you can try resizing the iframe on the blog site using a custom js file, after installing plugin discourse-allow-same-origin

I used the plugin discourse-embedded-comments in a bit different way.
Here’s what I did

  1. Installed both the plugins on Discourse.
  2. Copied this iframe-resizer js file to my ghost blog asset, and finally
  3. Added this code to the page
<div id="discourse-comments"></div>
<script src="{{asset "js/copiedJSFile.js"}}"></script>
<script type="text/javascript">
DiscourseEmbed = { discourseUrl: 'https://my-forum-site.com/', discourseEmbedUrl: 'http://my-blog-site.com{{url}}' };
(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);
function showComments(topic) {
  var comments = document.getElementById('discourse-comments');
  var iframe = document.getElementById('discourse-embed-frame');
  if (iframe) { iframe.remove(); }
  iframe.id = 'discourse-embed-frame';
  iframe.width = '100%';
  iframe.frameBorder = '0';
  iframe.scrolling = 'yes';
  iFrameResize({}, iframe);
showComments({{ url }});

And it worked.

P.S. Before following this approach please do check if you have implemented Embedding Discourse Comments via JS (above method) correctly
Then try resizing Iframe.
Happy Coding.

Embedded Comments iframe Height
(Jeff Atwood) #106

14 posts were split to a new topic: Control which comments are embedded?

(Alex Armstrong) #113

I’m having trouble getting this to work on my site’s blog. I’m using the embed code provided in the admin, with the discourseEmbedUrl option set by the CMS to the URL of the current page.

But on the front end it looks like this:

My Discourse site is private. Could this be the trouble?

If so, is there a way to request the data anyway? The users on the website would have to be logged in to view them. (And though I haven’t set it up yet, the website and Discourse will share a SSO soon.)

Alternatively, I would be happy with a “Comment on Discourse” button that leads users to an appropriate topic in Discourse – without embedding any replies. Is this possible?

(Alex Armstrong) #114

I fixed my issue by using www.example.com as the domain instead of just example.com.

(Alex Armstrong) #115

Another issue: I had previously embedded Discourse on our blog while testing. During this testing I deleted all the embedded topics that were created. Now, when I visit the blog and try to create a discussion, I bring up the deleted topic. Any ideas about how to handle this? I can’t even find a list of all deleted topics.

Edit: I’m still stuck with the fact that a user needs to be logged in to Discourse in order to see the iframe with the replies. (Because my Discourse is private.) Is it possible to add a button that links back to Discourse – without any replies – so that the user can login when they try to view the appropriate topic on Discourse. Or to circumvent the security altogether?

How can I delete or undelete topics?
(Tropnevad) #116

Does anyone know how to include the main blog post cover/first image from the RSS feed in the discourse preview snippet as I think it would make the discourse companion discussion abut more engaging in case someone lands on that page instead of the original blog post?

(Robin Ward) #117

You will need to update the topic_embeds table in this case. Discourse still has the relationship between the deleted topics :frowning:

I’ve actually not heard of someone wanting a private discourse but having embedded comments. Wouldn’t the vast majority of people never be able to see them?

This is unfortunately not possible right now.

How can I delete or undelete topics?
(Wraithseekerr) #118

Is there a way for us to set the forum discussion title instead of using the page title at the moment?

(Robin Ward) #119

No, it has to be added from the remote topic. What’s the use case for wanting it to have a different title?

(Sashko Stubailo) #120

There’s always the option of manually creating the thread and setting the topic ID in the embed - then you can pick whatever title and content you want for the Discourse topic.

Control which comments are embedded?
(Alex Armstrong) #123

@eviltrout I just noticed that this thread was re-opened. While it was closed, I replied to your questions here:

I’d love to get some feedback from you as other forum folks have suggested I’ve come across a bug.

Edit: I hope this gentle bump is not obnoxious. If it is, let me know :slight_smile: