Adding Comments to your Blog

dino · December 2, 2020, 9:05pm

Was able to add Hyvor Talk using the custom JavaScript below. But as salis has mentioned above, it is pretty bloated. They also no longer have a free plan. I was just lucky that I signed up for one before they changed their plans. So I managed to keep my free plan.

// src: https://talk.hyvor.com/web-api/embed
var HYVOR_TALK_WEBSITE = 0000; // REPLACE WITH YOUR 4 DIGITS
var HYVOR_TALK_CONFIG = {
    url: false,
    id: false
};

var hyvorTalkDiv = '<div id="hyvor-talk-view"></div>'
if (document.getElementById("post-body")) {
    document.getElementsByTagName("article")[0].insertAdjacentHTML('beforeend', hyvorTalkDiv);
}

mxcrml · January 18, 2021, 9:52pm

Hi everyone,

Just tried to implement “utterances” following @cjeller1592 's instruction but can’t make it work. Here is the piece of code I use:

comments.src = 'https://utteranc.es/client.js';
comments.async = true;
comments.crossOrigin = 'anonymous'; 
comments.setAttribute('repo', 'user/repo'); // (replaced with my proper user/repo)
comments.setAttribute('issue-term', 'pathname');
comments.setAttribute('label', 'NE');
comments.setAttribute('theme', 'github-dark');
document.getElementById('post-body').appendChild(comments);

My GitHub repository is public and utterances is installed on it.

What am I doing wrong ?

Thank you for the help.
MC

dino · January 19, 2021, 4:15am

I compared your custom JavaScript to one where utterances is working and the only difference I see is on this line:
comments.setAttribute('label', 'NE');

Robert Xu has it working on his blog and he uses comments.setAttribute('label', 'write.as');.

mxcrml · January 19, 2021, 5:40pm

Thank you dino for the answer, but the NE label isn’t really an issue. Just found that there is a conflict between utterances and two others custom javascript codes… don’t know why though.

dino · January 19, 2021, 6:11pm

Ah dang it, I was hoping it was an easy fix haha.

Try moving the scripts for utterances to the top of your Custom JavaScript entries so it will run first. If I’m not mistaken, the scripts are evaluated top to bottom.

mxcrml · January 19, 2021, 6:27pm

Yes, this works

Then I adapted Robert Xu code to prevent the comment section to appear under pinned post and it works well, no more conflict. Here is the code for the fictive domain name “yourdomain.com”, three pinned post named “menu”, “about” and “contact” and the dark theme.

if (window.location.hostname === 'yourdomain.com') {
if (!(/^\/$|^\/page|^\/menu|^\/about|^\/contact/.test(window.location.pathname))) {
    var comments = document.createElement("script");
    comments.src = 'https://utteranc.es/client.js';
    comments.async = true;
    comments.crossOrigin = 'anonymous';
    comments.setAttribute('repo', 'user/repo');
    comments.setAttribute('issue-term', 'pathname');
    comments.setAttribute('label', 'write.as');
    comments.setAttribute('theme', 'github-dark');
    document.getElementById('post-body').appendChild(comments);
}}

Hope this help. Thank you again @dino

PS: well, in fact there is still some conflict with the two other javascript code. Fixed ! Just needed to add “/page” into the prevent list of pinned posts. But still need to put it at the top !

dino · January 19, 2021, 7:46pm

You are welcome!

chrisaldrich · March 25, 2021, 9:22pm

I’ve wanted @mention/Webmention support on Hypothes.is for a long time. I had URL hacked my way into a solution a while back but never wrote about it.

I was reminded today that one can subscribe to an RSS/ATOM feed of annotations on their site (or any site for that matter) using the feed format https://hypothes.is/stream.rss?wildcard_uri=https://www.example.org/* and replacing the example.org URL with the desired one. Nota bene: the /* at the end makes the query a wildcard to find anything on your site. If you leave it off you’ll only get the annotations on your homepage.

If you’re using Hypothes.is in an off-label use case as a commenting system on your website, this can be invaluable. I recall Tom Critchlow and CJ Eller trying this out in the past.

To go a step further, one can also use this scheme to get a feed of @mentions of their Hypothes.is username too. If I’m not mistaken, based on some preliminary tests, this method should work for finding username both with and without the @ being included.

These are a few interesting tidbits for those who are using Hypothes.is not only for the social annotation functionality, but as a social media site or dovetailing it with their own websites and related workflows.

(originally posted at Hypothes.is as a comment system: Receiving @mentions and notifications for your website)

mattpedals · January 27, 2023, 5:41pm

I’ve explored Remark.as but I’d like to find a way of adding comments inline to blog posts. I’ve tentatively tried a couple of solutions but by problem is getting them to actually work. And I want to know they will work before I commit, so I’m in a bit of a Catch-22 situation.

For example, if I paste the sample code from https://fastcomments.com into the custom Javascript field in my blog (mattpedals.bike) I get nothing at all showing up.

This is the code:

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script> <div id="fastcomments-widget"></div> <script> FastCommentsUI(document.getElementById('fastcomments-widget'), { tenantId: 'demo' }); </script>

What am I doing wrong? And how can I get it to work. If @support or anyone else can help I’d be grateful. (Bear in mind I’m not technical, so need a cut and paste solution. Thanks.)

dino · January 27, 2023, 6:15pm

Hyvor Talk still works for me. I have it on 3 of my blogs. See this comment.

As for your script, I think, I’m not sure, I think this is what you need in your Custom JavaScript section:

// src: https://cdn.fastcomments.com/js/embed-v2.min.js
FastCommentsUI(document.getElementById('fastcomments-widget'), { 
tenantId: 'demo' });

This needs to be typed inside your blog posts, or can be added via the Signature feature.

 <div id="fastcomments-widget"></div>

The part that I think won’t work for this is this piece: // src: https://cdn.fastcomments.com/js/embed-v2.min.js. I don’t think you can import JavaScript like that. There has to be a different option from fastcomments to embed their script.

mattpedals · January 27, 2023, 8:28pm

Thanks for the reply, @dino. Hyvor is a bit pricey (I see you’ve managed to hang on to a free account).

I can’t see another code option for fastcomments. Two other options – Cusdis and Chirpy – seem to use very similar approaches.

Cusdis:

<div id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id="713cc27d-e74b-4b58-8ed1-e32f0955c3f7"
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

Chirpy:

<script defer src="https://chirpy.dev/bootstrap/comment.js" data-chirpy-domain="mattpedals.bike"></script>
<div data-chirpy-comment="true"></div>

Presumably these won’t work either?

matt · January 27, 2023, 8:40pm

Actually that’s exactly what the // src: ... code is for – importing JS like that.

So @mattpedals, the code block @dino shared should work fine. Just remember to also include the <div>... code in your posts too, as mentioned.

mattpedals · January 27, 2023, 8:47pm

Thanks @matt. I’ve done exactly that (JS in custom JS box, div in post) for this post and it’s just blank at the foot of the post where the comments box should appear.

matt · January 27, 2023, 8:53pm

Looks like the code is running before their library loads… Try this full code block instead:

// src: https://cdn.fastcomments.com/js/embed-v2.min.js
addEventListener("load", (event) => {
    FastCommentsUI(document.getElementById('fastcomments-widget'), { 
    tenantId: 'demo' });
});

mattpedals · January 27, 2023, 9:15pm

Yep, that’s it – it’s there now. Thanks.

@matt What would I need to do to the above Cusdis and Chirpy JS for these to work?

mattpedals · January 27, 2023, 10:12pm

@matt I’m particularly interested in Cusdis at the moment. It would be great if you could give me a pointer on getting that to work.

<div id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id="713cc27d-e74b-4b58-8ed1-e32f0955c3f7"
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

Thanks.

mattpedals · January 31, 2023, 12:18pm

@support Please can you help with my question above about Cusdis?

matt · February 1, 2023, 9:32pm

Similarly, you’d add this to Custom JS:

// src: https://cusdis.com/js/cusdis.es.js

And this to your posts:

<div id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id="713cc27d-e74b-4b58-8ed1-e32f0955c3f7"
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
></div>

mattpedals · February 1, 2023, 9:55pm

But this results in the same problem as above: nothing on the page. @matt?

thepoetsky · August 11, 2023, 2:58pm

It looks like the data-* attributes are being stripped out by sanitization. You can work around it with javascript, but it gets really messy.