Blog Post Comments with Disqus

Disqus is a comment system that enables discussion on websites and connects conversations across the web. Blog post comments have been ingrained in our web experiences, and there are several moving parts involved in creating your own. In staying true to our serverless ecosystem, Disqus provides all the moving parts and more without needing to spin up a server you might have to manage. They have done all the hard work and will continue to iterate and improve the product providing, as they bill themselves, “The #1 way to build an audience on your website”.

We will be adding Disqus to the blog posts in the Scrivito Example App. You will need a running Example App and an account with Disqus. When you sign up, you will need your website “shortname” from the Disqus settings.  

Let’s get started

We are going to use an npm package to help keep things clean and integration faster. npm disqus-react is a React component for embedding Disqus which we will use within the Scrivito BlogPost component in the Example App.

Copy
npm install --save disqus-react

Update the BlogPost Component

Next, we update the BlogPost Component from the Scrivito Example App. We will import the disqus-react library, define the information Disqus needs as constants and include the Disqus component in a <div> container.

src/Objs/BlogPost/BlogPostComponent
Copy
import * as React from "react";
import * as Scrivito from "scrivito";
import BlogPostAuthor from "../../Components/BlogPost/BlogPostAuthor";
import BlogPostMorePosts from "../../Components/BlogPost/BlogPostMorePosts";
import BlogPostNavigation from "../../Components/BlogPost/BlogPostNavigation";
import BlogPostTagList from "../../Components/BlogPost/BlogPostTagList";
import SchemaDotOrg from "../../Components/SchemaDotOrg";
import Disqus from "disqus-react";

Scrivito.provideComponent("BlogPost", ({ page }) => {
  const disqusShortname = "YOUR_DISQUS_SHORTNAME";
  const disqusConfig = {
    url: Scrivito.urlFor(page),
    identifier: page.id(),
    title: page.get("title")
  };

  return (
    <div>
      <BlogPostNavigation currentPost={page} />
      <section className="bg-white">
        <div className="container">
          <Scrivito.ContentTag
            tag="h1"
            className="h2"
            content={page}
            attribute="title"
          />
          <Scrivito.ContentTag
            tag="h2"
            className="h4"
            content={page}
            attribute="subtitle"
          />
        </div>
      </section>
      <Scrivito.ContentTag tag="div" content={page} attribute="body" />
      <div className="container">
        <Disqus.DiscussionEmbed
          shortname={disqusShortname}
          config={disqusConfig}
        />
      </div>
      <BlogPostAuthor style="width: 18rem;" author={page.get("author")} />
      <BlogPostTagList tags={page.get("tags")} />
      <BlogPostMorePosts author={page.get("author")} />
      <SchemaDotOrg content={page} />
    </div>
  );
});

The important parts here are the disqusShortname and disqusConfig constants. The disqusConfig gets the URL for the page from Scrivito’s urlFor helper. The disqusConfig needs a unique identifier, which is just what the object id Scrivito creates for the page is, so we can use that. Finally, the title can be set using the BlogPost's title attribute.

Some other alternative, here, would be to make the “shortname” an environment variable or a website setting as we did in our Snipcart tutorial. Another alternative would be to create a completely separate Disqus component – you decide what works for you.

Update the Content Security Policy

Lastly, you will need to add “https://jcdemo.disqus.com/embed” to the script-src in the Content Security Policy at "public/_headers".

That's all, folks!

We hope you enjoy building your community! Remember, there are many options and settings available in your Disqus account.