Embedding Discourse in Static Sites


#1

It’s been possible to embed comments from a Discourse forum on to other sites for a while now, but the only publishing software we supported was Wordpress.

Many people, myself included, don’t use Wordpress to run their sites. This very blog is a series of static HTML documents that are generated by Middleman. (Like Discourse itself, my blog is open source; you can find the code here so feel free to submit pull requests!).

Well… Good News Everyone! It’s now possible to embed Discourse content into any HTML document. In fact, as you can see below, the comments on this very site are now handled by a Discourse instance I set up.

How it Works

You can now configure Discourse to support embedding. Once you’ve done that, you paste a small snippet of Javascript into your site template and you’re off to the races.

Discourse will create topics for your blog entries if you provide it with an RSS or Atom feed. It’s also smart enough to update them if the content changes, say for corrections or typos. When any users of your forum post comments, they will automatically be inserted into your blog.

If your site does not have an XML feed, Discourse will create topics based on your page contents using a readability algorithm. It’s remarkably accurate for those cases when your site doesn’t have a feed.

How to Set up Embedding

  1. Install a Discourse Forum. We currently recommend using discourse_docker to do this. If you have ruby on your computer, you can even do it via a command line wizard.

  2. Navigate to the Embedding Site Settings. The URL will be something like:

    http://discourse.yourdomain.com/admin/site_settings/category/embedding

  3. Configure the settings appropriately. Here’s how it looks for my blog:

    Embedding Settings

  4. In your blog template, paste in the following snippet of Javascript and a <div> tag for where you’d like the comments to appear:

    <div id="discourse-comments"></div>
    
    <script type="text/javascript">
      var discourseUrl = "http://fishtank.eviltrout.com/",
          discourseEmbedUrl = 'http://eviltrout.com/link-to-blog-entry.html';
    
      (function() {
        var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
          d.src = discourseUrl   'javascripts/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
      })();
    </script>
    

    Configuration

    1. You will have to change the discourseUrl variable so it points to the root URL of your Discourse forum.
    2. Make sure discourseEmbedUrl is the canonical URL to the page where you are embedding Discourse. You will want to make sure this uniquely identifies the page. For my blog template, I use the following code to link to the article: discourseEmbedUrl = 'http://eviltrout.com<%= current_page.url %>'

  5. Reload your blog. Your blog posts should start syncing over to your forum and any comments should be imported into your blog. It’s that easy!

Going Forward

eviltrout.com has been running this set up for a few weeks now and it’s been great! Of course, like with any new feature of Discourse we’d love to hear your feedback so we can iterate on it and make it better. Let us know how it works for your use case.


This is a companion discussion topic for the original entry at http://eviltrout.com/2014/01/22/embedding-discourse.html

#2

This is what a comment looks like when embedded on the blog! :smiley:


#4

Oh boy, I can’t wait to play with this. Is so fed up with Disqus…
Did I mention that I love you, Discourse team?


#5

Congratulations! This is a great contribution to the broader adoption of Discourse as a platform… Now I probably figure out how to get this working with my wikis. :smile:


#6

I tried this but I’m not seeing any posts show up in the forum. Are there any logs available (either through the admin UI, or on the Discourse installation) to help troubleshoot when feed polling doesn’t result in topics getting created?

P.S. This is totally awesome and I am really excited to use it! Thank you for making comment embedding work!


#7

I think my problem might have been that I used the “system” user as the poster for embedded topics (not sure if that’s allowed), or maybe I just didn’t wait long enough. I changed it to my username and checked back some time later, and now I have topics!

However, I am getting an error when trying to actually display the comments: the response is a 404 not found (with an X-Frame-Options header set to SAMEORIGIN, so it displays nothing but I can see it in the console).


#8

Nevermind, I got it working!

I was putting “http://” in the embeddable_host setting. It wanted only the host portion, not the protocol.

This is totally awesome.


#9

Awesome. We’re going to patch it so that if you put in http:// it still works.


#10

Is there a way to not have it import every post? I want to use the plugin but not spam the forum with every one of my blog posts.


#11

There’s no way right now but that might be a good feature. How would you expect it to work? We’d need to somehow say “this is importable” and “this is not.” Maybe a post on meta would be good for this topic?


#12

Awesome, awesome, awesome. Seriously great work Robin!


#13

@eviltrout do you know why the link contains IP address instead of domain, for an example on this post on the Begin the Discussion button?

When i look in DevTools discourseUrl and discourseEmbedUrl contains proper domain names. Discourse instance is resolving fine.


#14

It is possible the discourse instance is reporting itself somehow as the IP, perhaps you are forcing the hostname or something like that?


#15

I didn’t set the proper url (it was only IP address) for host before some posts were picked up. Maybe I need to publish a new post and see a result now with proper host.

Thanks for your time.


#16

One thing I think Atlassian got right in Confluence was using the same editor for pages (or blog posts) and comments. I’ve yet to use Ghost, but I can see from my first experience creating a comment in Discourse that Discourse appears to use the same markdown-beside-preview approach as Ghost, which, at least at first glance, would appear to make Ghost and Discourse a reasonable match, given that Ghost does not have built-in commenting. Still, I think that, ideally, a blog or wiki should offer exactly the same editing experience for commenters and authors. I think that commenters should be able to format replies that look as good as the original articles.


#17

All the best Discourse team. A long way to go. Remember that people don’t care about open source or not, people use what’s easy to use and what serve people’s need in best possible manner. Godspeed…


#18

is there a way to set which Topic the forum posts show up in?
often i’d like cross-posting from blog posts to the forum, but would like to be able to organize where they show up…


#19

I have a similar question\request.
We would like to replace existing comments on our website with discourse one, as we have already installed discourse forum.
However we need to be able to specify that pages created in this category of website will initiate creation of topics in specified forum’s category, and for pages in other website category, topics should be created in other forum’s category…


#20

Right now you can only choose embed_category for imported posts and all imported will end up with that category.

It would require some development to support what you’re suggesting unfortunately.


#21

This is a great feature and it finally made me try out Discourse. I just implemented the embeddable comments on my Rails site and it’s working great.

To @jorge_castro 's point about imposting every post: I just made an RSS feed with every page (in my case I’m tracking stocks, so I made a feed with every stock’s page) and Discourse imported over 7,000 pages for me.

The one wrinkle is that I also have a blog on the site for which I’d like to use Discourse for the comments. It would be great if I could tell Discourse here are multiple RSS feeds and here’s the category each feed should import to… or, kinda like @dcsan asked, provide just one feed but have an element in each feed item which Discourse could use to figure out the category.

Anyway, thanks for the great product. I’m excited to get rolling with my forum.