Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Issues and misunderstandings with using Disqus on AMP #11
Hi I've recently installed Disqus on my AMP pages but ran into some problems. I'm not sure if they are due to my misunderstanding, documentation that could be improved, bugs or something else. Probably a bit of everything and definitely my understanding.
I'm not sure of the best way of giving this feedback either. I'm no where near confident enough in how this should work to submit pull requests, so though I'd raise and issue first. I also didn't want to inundate with multiple issues in case they were all related or due to my misunderstanding. Ultimately I've decided to group them all in this issue for now but let me know if that's not the best way.
I tried using the instructions at https://github.com/disqus/disqus-install-examples/tree/master/google-amp including the following:
And passing the page as a hash value to the page (e.g. disqus.html#/the/real/page/I/want where disqus.html includes above code).
I wanted the comments on my AMP pages to be the same as the comments on the real page.
I ran into a few problems:
First up window.location.hash includes the # value so I had to change that to this to strip it out:
After that I found this worked on some of my pages, but not others and, after some digging, I think this is perhaps due to a bug in Disqus.
To illustrate this with an example, I have the following page on my blog: https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/
It's also inconsistent. Another page https://www.tunetheweb.com/blog/ shows comments with both u and i value including the trailing slash:
All in all it's quite confusing as I cannot see how I can guess the identifier that Disqus has decided to use for each page. Eventually I decided not to use the identifier at all and just to use the page url (as that seems to consistently use the slash):
This seems to work well but took a bit of figuring out! Didn't even know it was an option, and honestly a bit confused as to why you suggest supplying two pieces of info (URL and identifier) when it appears only one is needed?
Ultimately I think the hash could be explained better in the https://github.com/disqus/disqus-install-examples/tree/master/google-amp link, and in the documentation. I didn't realise it was the page URL and assumed it was a hash value. Furthermore it took me a while to figure out it needed the full URL including the protocol and domain.
Next issue is that the example has the following:
Yet the domain (EXAMPLE.disqus.com) should be edited and changed to your own domain (I presume!), so the DON'T EDIT BELOW THIS LINE comment is wrong and confusing.
And finally I had to add
I don't know Disqus that well, as not had to as it's easy enough to plug into a normal HTML page, but have had to dig around more AMP pages and, although I eventually figured it out, I think it could be made a lot clearer for others trying to figure that out.
Either that, or I've got completely the wrong end of the stick here!
However once I got past that it seems to work quite well. So suspect it's mostly a me misunderstanding issue and a bit of extra documentation would avoid others facing same issue. Ultimately think you're undone by the fact that it's so simple to set up Disqus on normal HTML pages that having to do any sort of work for AMP suddenly seems so confusing!
I have seen talk of hosting the framable page on disqus.com which would help those people not as easily able to set up another domain a lot so definitely think that would help, but would require having one (or at most a few) standard pages and not everyone doing it slightly differently like I have done.
Anyway hope that this post is helpful and let me know if anything is unclear, if there's anything I can do to help improve this, or if there's a better way of me raising this sort of stuff.