disqus
url and identifier not making a difference, all comment boxes are the same
On my page, I render a list of posts with a "SHOW COMMENTS" button that reveals the DiscussionEmbed element:
const postObjects = posts.map((p,index)=>{
return (
<div className="Post">
<ReactMarkdown children={p.md}/>
<button
onClick={()=>{
showComments(p.filename);
}}
>
SHOW COMMENTS
</button>
{ currentPost == p.filename &&
<DiscussionEmbed
shortname={MY_DISQUS_SHORTNAME}
config={
{
url: `${MY_URL}#!${p.filename}`,
identifier: p.filename,
title: p.filename,
}
}
/>
}
</div>
)
});
here is the showComments function, which fires when the button is pressed, reset DISQUS from its window object and sets currentPost which then shows the DiscussionEmbed component that matches:
const showComments = (filename) => {
if (window.DISQUS) window.DISQUS.reset({
reload: true,
config: function () {
console.log(this);
this.page.identifier = filename;
this.page.url = `${MY_URL}#!${p.filename}`;
}
});
setCurrentPost(filename);
}
Anyway, all the comment blocks are the same / have the same comments. If I click the links to the comments contained in they have:
MY_URL
instead of
`MY_URL#!filename
What am I doing wrong?
I solved it, and it doesn't really make sense why. Looks like a disqus problem:
This does not work:
<DiscussionEmbed
shortname={'https-allthetime-github-io'}
config={
{
url: MY_URL+p.filename,
identifier: p.filename,
title: p.filename,
}
}
/>
But this does:
<DiscussionEmbed
shortname={'https-allthetime-github-io'}
config={
{
url: MY_URL+p.filename,
identifier: p.filename+"_0",
title: p.filename,
}
}
/>
All I did was add "_0" to the end of the identifier and now it works.
This doesn't make any sense to me.
@allthetime Do you have an example repo that I can use to reproduce this issue?
I had this same problem but with reactions (didn't have any comments yet)--adding a reaction on one page added it to all pages. I added the fix from @allthetime and now it works. It's kind of strange because before that fix I was setting the identifier as either ${_id}_prod or ${_id}_dev depending on my environment, which is kind of similar to the current "fix".
My code, without the fix, was exactly as is below, except for the shortName, obviously.
import { DiscussionEmbed } from 'disqus-react'
import PropTypes from 'prop-types'
import styles from './Disqus.module.css'
const Disqus = ({ article, url }) => {
const disqusShortname = 'myShortname'
const env = url.includes('localhost') ? 'dev' : 'prod'
const disqusConfig = {
url,
identifier: `${article._id}_${env}`,
title: article.name,
}
return (
<div className={styles.commentsSection}>
<DiscussionEmbed
shortname={disqusShortname}
config={disqusConfig}
/>
</div>
)
}
Disqus.propTypes = {
article: PropTypes.object,
url: PropTypes.string,
}
export default Disqus
This is a common issue and is usually an indication of a problem with the individual implementation, but I'm unable to help troubleshoot the issue without a sample repository to reproduce the issue. Though, I can confirm that this is not an issue on the Disqus side.
@squillen If the reactions are being shared across multiple pages then the comment threads would have the same issue. From the snippet you provided, I would advise you to try using your production URL as mentioned in the FAQ and seeing if that resolves your issue.
Clue: test_post_0 works, but test-post_0 does not. It appears these strings are character restricted.
I had the same problem using the DiscussionEmbed example. The fix mentioned earlier didn't work, but I was able to get it working by using setState and useEffect, and a loading prop.
const [disqusConfig, setDisqusConfig] = useState({});
...
setDisqusConfig({ url: "https://mywebsite.com/" + post.slug, identifier: post.id, title: post.title });
...
<DiscussionEmbed shortname="my-web-site" config={disqusConfig} />
tl;dr: Ran into something similar. My solution was to replace all dashes in the identifier with an underscore, then it magically worked.
const disqusPostId = postId.split('-').join('_');
On my page, different comment threads are loaded without refreshing/navigating (I am still providing a unique URL for each Disqus thread). So I also give the containing div a key that includes the identifier, just to make sure it's being updated in the DOM, like so:
<div key={`disqus-container-${disqusPostId}`}>
<DiscussionEmbed ... />
</div>
Ensuring each thread had a unique key was not enough. Replacing - with _ was the only thing that consistently worked for me.
Browsed the following Disqus resources, I don't see anything about dashes being illegal. In fact one of the examples shown in the docs actually HAS dashes. But for whatever reason, replacing the dashes in my identifier with underscores seems to "fix" it.
- JavaScript configuration variables
- What is a Disqus identifier?
- Why are the same comments showing up on multiple pages?
Still the same issue in 2023.
In my case my identifier is a hash string 727987336aa2fbc73f39aa2584953207f4b7f4e6. Appending _0 works for me.
Not sure if these steps help reproduce the issue without creating a new repo:
- Load the
DiscussionEmbedcomponent once with a newurland a newidentifierspecified. Grab theidentifiervalue from my comment (the 4b7f4e6 one) or previous comment (test-post-1). Make sure a new thread is created inadmin/discussions/ - Leave a comment in this thread in the rendered disqus widget.
- Append
abcto the BEGINNING of theidentifierfield, and load theDiscussionEmbedcomponent again. - The same thread shows with the comment we just left
Adding _0 seems to be working for me, my identifier was a string with underscores.
