Embed Discourse as a full comment system on your site

A massive thanks for this as the new setup truly makes Discourse into a legit commenting system, particularly for the usage of combining the commenting systems of several aggregated blogs into one forum system. That being said, I’m unfortunately having a slew of problems.

Putting the cosmetic issues aside for the moment, I’ll start off by pointing out that I’m trying to get this to work with a Ghost blog, a blog which integrates the Ghost and Discourse membership systems with the Discourse on Ghost (DoG) integration (announced on Discourse’s forum here). While I’m certain that some of the problems I’m having are directly because of the DoG usage, others aren’t, and others… maybe?

The first I’ll point to is the manner in which I seem to not be getting the “full” commenting system but more like half of it.

Yes, after going through a full sign-up process with DoG I do proceed to see the “Allow access” popup, which I agree to.

But following that, not only am I not seeing the “Reply” buttons after every comment as I saw on the demo Discourse blog posts (while the link icon is also conspicuously different from the link icon I see on Discourse’s blog – although that may just be an outcrop of the theme Discourse’s forum is using), but when I scroll down to the bottom of the post I do see that, although part of the new setup is present, the Share and Reply buttons that I presumed would have appeared over on the left aren’t there and that the sole Reply button is over on the right instead (with a different arrow icon from that seen on Discourse’s blog, an icon which I figure is either a throwback to the original embed system or to do with the theme used by the forum itself).

Moreover, when I click that Reply button I’m sent over to the homepage of my blog’s forum rather than seeing the newly integrated commenting box appear. That being so, if I click on the “37/37” comment count button above I do in fact see the box appear, the “Jump to” button, as well as the ability to “scroll” between comments, although when I “scroll” to a comment and let go of the mouse button the placement in the comment embed doesn’t move (the box just closes).

To be clear, my embed’s code is as follows:

<section itemscope itemtype="http://schema.org/UserComments" class="post-item post-comments" id="comments" loading="lazy">
    <div class="wrapper post-wrapper{{#is "post"}} no-post-border{{/is}}">
        <h2 class="comments-title">
            <a href="#comments" class="heading-link">
                <svg aria-hidden="true" class="aal_svg" version="1.1" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
                </svg>
            </a>
            Comments</h2>
        <div id='discourse-comments'></div>
        <meta name='discourse-username' content='DISCOURSE_USERNAME'>
        <script type="text/javascript">
            if (window.location.pathname.indexOf('/p/') < 0) {
                DiscourseEmbed = {
                    discourseUrl: 'https://ff2f.discourse.group/',
                    discourseEmbedUrl: '{{url absolute="true"}}',
                    fullApp: true,
                    dynamicHeight: 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>
    </div>
</section>

And yes, I’ve got the Full app mode toggle turned on over on my site’s forum settings.

Is it possible that I’ve just failed to activate some toggle or failed to include a line of code, or might this be due to some kind of incompatibility between the new full comment system and DoG?

Edit #1: I was in fact missing a line of code, having errantly not realised that there was more than fullApp: true and dynamicHeight: true that needed to be added. However, when slipping in the missing <meta name='discourse-username' content='DISCOURSE_USERNAME'>, nothing changed.

Edit #2: Having played around with the embed just after adding in the missing <meta name='discourse-username' content='DISCOURSE_USERNAME'> I happened to notice that when letting go of the mouse button when using the “scroll bar” that one’s placement within the comment embed now shifts to the proper spot. I can’t imagine that this would’ve changed due to the added code, but there you go.

Edit #3: Oh. Having played around with Discourse’s blog and login process, I take it that this is an issue related to DoG in some way. Because the look of the embed on Discourse’s blog when not logged in on the forum end is the exact same as what I called “half” the commenting system.

In other words, after going through the login process, the blog’s embed isn’t recognising that the user got logged into the forum (even though the “Allow access to your session to comment as yourself” popup appeared).

3 Likes