Disqus email notifications open localhost instead of the real website

Question

I am using Gastbyjs with Disqus plugin for commenting function. I followed the instruction here

I received emails about comments in my blog, but when I clicked the button "Reply to XXX" it opens.

https://localhost:8000/blogs/article-name

I think I missed some configuration for this.

Update 1

Here is the code where I use the config:

export const BlogPostTemplate = ({
  content,
  contentComponent,
  description,
  tags,
  title,
  helmet,
}) => {
  const PostContent = contentComponent || Content;

  const disqusConfig = {
    shortname: process.env.GATSBY_DISQUS_NAME,
    config: { identifier: title },
  };

Update 2

I managed to use Reach/Router to access Location

I installed reach/router and I updated my code:

import { Location } from "@reach/router";

export const BlogPostTemplate = ({
  content,
  contentComponent,
  description,
  tags,
  title,
  helmet,
  location
}) => {
  const PostContent = contentComponent || Content;
  console.log('--------------location---------');
  console.log(location);
  const disqusConfig = {
    url: location.href,
    shortname: process.env.GATSBY_DISQUS_NAME,
    config: { identifier: title },
  };

  return (
    <section className="section">
      {helmet || ""}
      <div className="container content">
        <div className="columns">
          <div className="column is-10 is-offset-1">
            <h1 className="title is-size-2 has-text-weight-bold is-bold-light">
              {title}
            </h1>
            <p>{description}Cool</p>
            <PostContent content={content} />
            {tags && tags.length ? (
              <div style={{ marginTop: `4rem` }}>
                <h4>Tags</h4>
                <ul className="taglist">
                  {tags.map((tag) => (
                    <li key={tag + `tag`}>
                      <Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
            <DiscussionEmbed {...disqusConfig} />
          </div>
        </div>
      </div>
    </section>
  );
};



const BlogPost = ({ data }) => {
  const { markdownRemark: post } = data;

  return (
    <Layout>
      <Location>
        {({ location }) => (
          <BlogPostTemplate
            content={post.html}
            contentComponent={HTMLContent}
            description={post.frontmatter.description}
            helmet={
              <Helmet titleTemplate="%s | Blog">
                <title>{`${post.frontmatter.title}`}</title>
                <meta
                  name="description"
                  content={`${post.frontmatter.description}`}
                />
              </Helmet>
            }
            tags={post.frontmatter.tags}
            title={post.frontmatter.title}
            location={location}
          />
        )}
      </Location>
    </Layout>
  );
};

However, when someone left a comment and I click the "Reply to {somebody}" button in the notification email, it still opens the localhost, rather than the real website link.

Answer 1

I finally figured it out. I'd like to break the answer into 4 parts:

1. How does the localhost url sneak into the comment's url?

The localhost url sneaked into the comment's url when I was commenting my article in a localhost development environment. So to prevent this from happening again, only posting a comment in the production environment. If you did it in localhost environment, how to fix it? Please look at point 3.

2. What does localhost url is called?

The comment url is called Discussion Url.

3. Why do we need to know it?

Because this will be the key words for searching any related questions/answers. Without knowing this, I have wasted days for searching this configuration in Disqus. So in short, it saves you tremendous time.

4. How and where to solve it?

As you can see there, the 2nd blog Link was using localhost, after I updated to the real website url, the problem was solved.

Hope my answer is helpful.

Answer 2

You need to pass the url to the disqusConfig of the current page disqus is located. In Gatsby, you can expect the location prop to be available to you on every page thanks to its use of @reach/router.

In your component:

import {Disqus} from "gatsby-plugin-disqus";

const Article = (props) => {

  let disqusConfig = {
    url: props.location.href,
    identifier: props.your.identifier.source,
    title: props.your.title.source,
  };

  return (
    <div className="article">
      <h1>Article title</h1>
      <div>Article text</div>
      <Disqus config={disqusConfig} />
    </div>
  )
}

Plugin config:

  {
    resolve: `gatsby-plugin-disqus`,
    options: {
      shortname: `your-short-name`
    }
  }

Note: you can't use something like window.location because there is no window during build time (there is no browser server side).