Add comments to a Gatsby site

1. Load the script

Create gatsby-ssr.js in the root of your site, or add to it if you have one. Gatsby puts these elements at the end of the <body> of every page it builds:

import * as React from "react";

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script key="disfora" src="https://disfora.com/public/disfora.js" async />,
  ]);
};

Restart gatsby develop after creating the file. Gatsby only reads it on startup.

2. Add the container

Open the template that renders a single post. In the official blog starter it's src/templates/blog-post.js. Add the container after the post:

<article className="blog-post">
  <header>…</header>
  <section dangerouslySetInnerHTML={{ __html: post.html }} itemProp="articleBody" />
  <footer>…</footer>
</article>
<div data-disfora-comments />

For a star rating as well, add <div data-disfora-ratings /> where it should appear, such as under the title.

Moving between posts

Gatsby's <Link> loads the next page in the browser. Disfora notices the new address and the new container, and loads that post's comments. The script stays loaded between pages, and the comments code only downloads once a reader reaches a page with a container.

Check it on your site

Disfora only loads on the domain in your project, so localhost:8000 won't show it. Deploy, then verify your domain if you haven't yet, and open a post on your live site.

Ask a question

Something missing or unclear? Ask here and we'll answer in the thread.