Back to Posts

Disqus comments

By: Daniel Jimenez | Published on: Jun 30 2020




I wanted to add the ability for users to add comments to my post and i was recommended Discuss. Disqus has a free tier that allows users to add comments and reply to others users. The set up was not too complicated and i will try my best to break it down.

I am using Ghost as my CMS on a GatsbyJS site. You will need an account to Discuss. Follow the link below...

https://disqus.com/

Once you are going to need to get and store your "Short name" which is located in the admin portal > Settings > General

Shortname

This is it for the Discus set up, now let move to the Terminal and we have to run a few commands.

On your project run the command to install the react-disqus-comments library:

npm install react-disqus-comments

Then start your Gatsby site:

gatsby develop

In your project i created a file titled comments.js which is going to handle the different id's that are going to be passed down depending on which article is selected.

comment.js component

This is where you will need the short code that we got in the first step. I am using props in order to get the ID, Title, and tags of the post that will be selected by the user. You can also directly add this code to the blog post template and pass properties directly.

Once this is done, on my blog template file i just import the file and pass down the properties that i selected on my comment.js component.  

blog-post-template.js

The last step is to add the component where you would want it on the page. (Most commonly at the bottom of the page.)

Once this is complete you can build your Gatsby site and you will have working comments on your blog post.

There are many ways to build this this is how i did it. If you have any questions or comment drop a comment below!


Share:





2022 © Copyright, Daniel Jimenez