Discourse&Ghost Integration to manually add comments section

Integrations & API
1

Hello!

We are building a Ghost blog for our company and we want to integrate comments from Discourse but we need to do this process manually not automatically.

Regular workflow is to publish a blog post in Ghost and once the article gets published automatically a new topic will be created in Discourse and comments section will be fully integrated to Ghost post…now we do not want to proceed like this…as per some requirements we do not want Ghost to update our Discourse forum by automatically creating topics…

What we need is:

  • publish first Topic A in Discourse forum.
  • grab Topic ID from topic URL
  • publish blog post A (same article as in discourse) in Ghost and MANUALLY tell this post that comments section will be grabbed from THIS topic in Discourse.

Discourse allow to do this by using topicId: ‘MY_TOPIC_ID’ in this piece of code instead of
discourseEmbedUrl: my_URL

<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://mycommunity.com/',
                     topicId: 'MY_TOPIC_ID' };

  (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>

…problem is all examples i can find in docs is for automatic creation of topics from blog by embedding that code in post.hbs template and using discourseEmbedUrl in our theme files which will not work for us as the code in post.hbs is executed for every blog post created and Topic Id will be a dynamic changing number…

Is there a way where we can tell Ghost “comments section for this blog post will be grabbed from this Forum Topic especifically”?

Thanks!

2

How I would do this:

Take your code snippet and wrap it in a conditional check for a particular tag of comments, using the {{#has}} helper:

{{#has tag="comments"}}

<div id='discourse-comments'></div>

<script type="text/javascript">
    if (window.location.pathname.indexOf('/p/') < 0) {
        DiscourseEmbed = {
            discourseUrl: 'https://forum.ghost.org/',
            discourseEmbedUrl: '{{url absolute="true"}}'
        };

        (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>

{{/has}}

Now the automated Discourse code will only be executed on posts which contain the comments tag - and on all other posts, the Discourse code will be skipped completely.

Alternative

But, if you really want to create the Discourse forum topic first and then associate it with a post, you could hack around this by re-purposing one of the social fields, if there’s one you generally don’t use.

Within post.hbs you have access to everything in the post object, you can grab {{og_description}} and insert that into the code snippet:

<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://mycommunity.com/',
                     topicId: '{{og_description}}' };

  (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>

So then you can feed in the Discourse topic URL using the Facebook description in the Post Settings Menu:

CleanShot 2021-10-04 at 18.52.48@2x
CleanShot 2021-10-04 at 18.52.48@2x1122×982 45 KB

1 Like
3

Thanks @John for your replies…however none of those above works for me…the only way i found is to add at the very end of each article in Ghost a new HTML card and insert the code snippet with te corresponding topicId…tested and works like a charm. Thanks!

1 Like
4

This code work perfectly, but, how to block the comment section with height and scroll ?

because with my topic on discourse it’s not possible to scoll juste have de 2/3 first message show