Issues and misunderstandings with using Disqus on AMP

[tunetheweb]

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:

this.page.url = window.location;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable

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:

this.page.identifier= "https://www.tunetheweb.com/" + window.location.hash.substring(1);

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.

If you set the this.page.identifier then the Disqus javascript eventually calls https://disqus.com/embed/comments/? and passes the page your want the comments for in either the i parameter (for identifier as set by this.page.identifier) or the u parameter (the page_url as set by this.page.url). The problem is that seems to strip out the final trailing slash... sometimes.

To illustrate this with an example, I have the following page on my blog: https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/
The comments are available by calling the above URL passing the page in the u paramter:
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_u=https%3A%2F%2Fwww.tunetheweb.com%2Fblog%2Fimplementing-accelerated-mobile-pages%2F&t_d=&t_t=&s_o=default
It should also be available passing the same page in the i value:
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_i=https%3A%2F%2Fwww.tunetheweb.com%2Fblog%2Fimplementing-accelerated-mobile-pages%2F&t_d=&t_t=&s_o=default
However this fails! And I needed to strip out the last / (url encoded as %2F) to see the comments:
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_i=https%3A%2F%2Fwww.tunetheweb.com%2Fblog%2Fimplementing-accelerated-mobile-pages&t_d=&t_t=&s_o=default
Why?

It's also inconsistent. Another page https://www.tunetheweb.com/blog/ shows comments with both u and i value including the trailing slash:
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_u=https%3A%2F%2Fwww.tunetheweb.com%2Fblog%2F&t_d=&t_t=&s_o=default
or
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_i=https%3A%2F%2Fwww.tunetheweb.com%2Fblog%2F&t_d=&t_t=&s_o=default
And if you try without the trailing slash both calls fail to load the comments:
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_u=https%3A%2F%2Fwww.tunetheweb.com%2Fblog&t_d=&t_t=&s_o=default
or
https://disqus.com/embed/comments/?base=default&version=d4b3e2d0ceebca09f9dc70ce8c96b0fe&f=tunetheweb&t_i=https%3A%2F%2Fwww.tunetheweb.com%2Fblog&t_d=&t_t=&s_o=default

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.page.url = window.location; // Replace PAGE_URL with your page's canonical URL variable
//this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
this.page.url = "https://www.tunetheweb.com/" + window.location.hash.substring(1);

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:

    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = '//EXAMPLE.disqus.com/embed.js';

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 allow-forms to the amp-iframe to allow you to post comments, and an overflow div as well:

<amp-iframe width=600 height=140
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
            resizable
            src="https://example.com/amp#hash">
            <div overflow tabindex=0 role=button aria-label="Read more">Load more comments!</div>
</amp-iframe>

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.

[jp26jp]

Hello! I made a guide that's probably a little easier to follow.