How to add comments to your blog ?

I recently added comments to my blog posts (don't hesitate to drop a comment 😉) and I want to teach you how to add comments to your own blog.

There are several options you can use, from free to not so free :

• Disqus (free)
• Utterances (free)
• GraphComment (free plan available)
• Commento (30 days trial then $10/m or $99/y)
• Facebook Comments via the react-facebook package

I tried Disqus, but the design of the comment section felt a little to "old-school" and maybe not very professional, so I decided to use Utterances.

Utterances creates a GitHub Issue for each article and stores the comments there. This means your readers need a GitHub account to be able to leave a comment. As my blog revolves around web development this option is perfect.

Creating the GitHub repository for the project

You will first need to create a public GitHub directory, I called mine "blog.comments" but you can call it any way you like.

Install the Utterances app into the repository with the "Only select repositories" option and by selecting your repository.

Creating a Comments component for your blog

Fill the configuration part on the Utterances main page and it will provide you a bit of code looking like this :

<script
  src="https://utteranc.es/client.js"
  repo="Lachouri/blog.comments"
  issue-term="pathname" //How the article and issue are mapped
  theme="github-light" //The theme of the component
  crossorigin="anonymous"
  async
></script>

You can't add this directly into your React code, so you will need to do something like this :

// Comments.jsx

import React from 'react';

const commentBox = 'comments-box';

const Comments = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://utteranc.es/client.js';
    script.setAttribute('repo', 'GITHUB_USERNAME/REPOSITORY_NAME');
    script.setAttribute('issue-term', 'pathname');
    script.setAttribute('theme', 'github-light');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    const comments = document.getElementById(commentBox);
    if (comments) {
      comments.appendChild(script);
    }
  }, []);

  return <div id={commentBox} />;
};

export default Comments;

You can now import your component and this is what it will look like :

The issue created on GitHub :

Now you know how to add comments to your blog ! Let me know if you have any question !

---

Originally posted on my blog. Check out my instagram account to learn more about web development.

Originally posted on my blog