Adding Disqus comments to a personal website
Introduction
I thought it would be nice to have comments on my blog. It not only serves as motivation to continue blogging by being able to see people's reactions to my posts, but also helps me to directly engage with my readers. Instead of implementing it myself, I decided to try using an external service called Disqus for now. However, I will probably remove it soon and create my own comment system. While the functionality is great, at some point ads will start appearing. Despite this, I want to try installing it to see the difference between knowing about it and actually using it. Through this experience, I plan to create my own comment system in the future.
Process
-
You need to sign up on the Disqus website to manage comments on your site.
-
Create a site within Disqus. The Website Name is a value that distinguishes it from other sites. It is not the public address, so you can choose any name.
-
When prompted to choose a payment plan, select Basic at the bottom since I will be using it for free. Ad-supported means that ads will be displayed, which is understandable as running a service for free is not sustainable.
-
Next, choose the platform. Since my blog is built with Next.js, it was not listed in the options. Therefore, I selected "I don't see my platform listed, install manually with Universal Code" at the bottom.
-
Although the installation instructions are provided on the next page, I will not be using them. Since Next.js is based on React, I can use the React library.
-
Install the disqus-react library for React. The installation instructions are clearly explained in the readme file. Just follow the steps and it should not be difficult.
-
After installation, I saw that the comment section appeared on my blog.
## Issues Encountered
Although the installation process was said to be easy, it was not without its challenges.
-
The error message "Super expression must either be null or a function" is a problem that can occur when using Next.js 13. Since comments are where user actions like clicks occur, 'use client' must be written at the top. (Next.js 13 rule)
-
I encountered an issue where the comment section did not appear at the bottom of the blog. I thought the connection was established, but instead of comments, there was only an underline and the comment section did not appear. In the console log, there was a message saying "Refused to load the script 'https://danver-blog.disqus.com/embed.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback." Since it was a CSP issue, I resolved it by adding the necessary values to the header as shown in the image below.
Conclusion
The installation of Disqus comments went well. I will stick with it for now and eventually create my own comment system when the time comes. My hope is to not only use it for myself but also offer it to other users, although I am concerned about the billing model. I need to find examples and think about how to set up a reasonable pricing model.
