Adding comments via Utteranc.es

A thought on comments

I’ve been looking for a commenting system similar to Utteranc.es for a long time. A tool that would allow for the addition of a comment system that is somewhat managed by another service so that readers could respond and leave feedback or thoughts as they read.

Other blogging platforms have commenting systems included and they are a huge selling point. Utterances is almost my ideal system. The main drawback being that it requires a user to log in and authorize it to post for them. There is a way to circumvent this by going into the issue on GitHub itself which might not be the biggest inconvenience.

Currently I’ve created a gatsby-ssr.js file to add the Utterances script at the end of each page by calling setPostBodyComponents. I’m sure there is a nifty way to do this with components and templates, but this is working for now.

I originally had the issue-term="pathname" but this didn’t perform as I expected. Utterances treated every page as the index and therefore only had one issue for the entire site. It looks like changing this to use the issue-term="url" is working as intended.

Copy 
1import React from "react";
2export function onRenderBody({ setPostBodyComponents }) {
3  setPostBodyComponents([
4    <script
5      src="https://utteranc.es/client.js"
6      repo="stoicallytyped/blog"
7      issue-term="url"
8      label="💬 comments"
9      theme="preferred-color-scheme"
10      crossOrigin="anonymous"
11      async
12    />,
13  ]);
14}

Lastly, I need to learn more Gatsby to get the comments above the main footer. If you have any thoughts on the best way to do that please leave a comment!

Header photo by Adam Jang on Unsplash