Simpler AMP install - maybe :)

[maxprin]

Hi there,

Thanks for your work on making Disqus AMP-friendly. I implemented it on technicalseo.com and here are the issues/suggestions that I have:

1-- I couldn't make it work without adding an overflow child element. It seems to be required as a fall back if AMP can't automatically load the iframe: https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md#iframe-resizing
I also added frameborder=0 for design purposes.
My working code looks as follow:

<amp-iframe width=600 height=140
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
            resizable
            frameborder="0"
            src="external_html_file">
<div overflow tabindex=0 role=button aria-label="Disqus Comments">Disqus Comments</div>
</amp-iframe>

2-- As specified in your instructions, the "external_html_file" MUST be hosted on a different domain, but it also MUST be hosted on a secure (HTTPS) domain. This might be challenging for most (having access to another secure domain, buying another SLL certificate, etc.).
I am hosting the file on Github secure CDN: https://cdn.rawgit.com/maxxeight/disqusAMP/master/disqus-amp.html

3-- I tweaked the scripts within this file (also attached as a .txt) so all variables (shortname and canonical URL - where the comments live) can be passed through parameters in the iframe src URL
src="https://cdn.rawgit.com/maxxeight/disqusAMP/master/disqus-amp.html?shortname=[disqus_shortname]&url=[canonical_url]"

=> this way, the external html file can be the same ALL Disqus users. This leads to my last suggestion: could you guys host the file for all users? :) So nobody is dependant of my Github account?

Note: I did not have to "Add the new domain [cdn.rawgit.com] as a Trusted Domain" in my Disqus settings for this implementation to work.

Here is a working AMP URL with all of the above in place: https://technicalseo.com/rank-serp/duplicate-content/amp.html

Thanks again and please let me know if you have any questions!

Max

disqus-amp.txt

[CB9TOIIIA]

Nice! 👍 Can you try use https github pages?

[maxprin]

Good call! Here it is: https://cdn.rawgit.com/maxxeight/disqusAMP/master/disqus-amp.html
I also edited my comments above,

[cassianotartari]

I'm almost getting crazy trying to figure out disqus_config used by Disqus Wordpress Plugin and reproduce this for Disqus comment inside AMP pages... I've already get it working but as identifier are different the comments between AMP and normal page aren't being shared... 😢

[cassianotartari]

Job DONE 😃

The final Universal HTML:

<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize') {
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
            }, '*');
        }
    }
}
</script>
<script>
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    var disqus_config = function () {
        this.page.url = decodeURIComponent(getQueryVariable("url"));  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = decodeURIComponent(getQueryVariable("identifier")); // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

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

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

And as I'm using AMP Plugin for Wordpress I've added a call inside my functions.php of my template with:

if ( ! function_exists( 'add_disqus' ) ) {
    function add_disqus( $content ) {
         if(is_amp_endpoint()) {
            $post = get_post();
            $content .= '
                <amp-iframe width=600 height=140
                    layout="responsive"
                    sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
                    resizable
                    frameborder="0"
                    src="https://mysecondeurl/disqus-amp.html?url='.urlencode(get_permalink()).'&identifier='.urlencode($post->ID . ' ' . $post->guid).'"
                >
                    <div overflow tabindex=0 role=button aria-label="Comentários">Comentários</div>
                </amp-iframe>';
        }
        return $content;
    }
}
add_action( 'the_content', 'add_disqus' );

[KompiAjaib]

@maxxeight I still stack on blogger canonical post url

[erikdubbelboer]

@cassianotartari In your universal HTML you still seem to have myuserloginindisqus. Is that something that doesn't matter?

[Rushster]

This is almost working for me with the same setup cassianotartari . However, there is something not right with the functions part. When I use this all the content on my non-amp pages vanishes. Any ideas?

[KompiAjaib]

DONE for Blogger, thanks @maxxeight
Use this for src amp-iframe
expr:src='"https://cdn.rawgit.com/maxxeight/disqusAMP/master/disqus-amp.html?shortname=[disqus_shortname]&url=" + data:blog.canonicalUrl'

Here is working disqus amp on Blogger https://kompidesign.blogspot.co.id/2015/06/mauris-ornare-pretium-orci-faucibus.html

[CB9TOIIIA]

Example:

<amp-iframe frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&url=https://kompidesign.blogspot.com/2015/06/mauris-ornare-pretium-orci-faucibus.html' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
</amp-iframe>

[cassianotartari]

@cassianotartari In your universal HTML you still seem to have myuserloginindisqus. Is that something that doesn't matter?

@erikdubbelboer that's your Disqus username.

---

This is almost working for me with the same setup cassianotartari . However, there is something not right with the functions part. When I use this all the content on my non-amp pages vanishes. Any ideas?

@Rushster I've updated the functions.php code block. The issue was related to the return $content; position. It should be outside of if(is_amp_endpoint()) to always return the $content, even if it's not a AMP page.

[rubenalonsoes]

Thanks @cassianotartari !
I've installed this but for example in this post http://miposicionamientoweb.es/como-conseguir-suscriptores/amp/ the Disqus block is loading all time... And the Url to get the comments (http://cdn.miposicionamientoweb.es/wp-content/themes/metro-pro/disqus-amp.html?url=http%3A%2F%2Fmiposicionamientoweb.es%2Fcomo-conseguir-suscriptores%2F&identifier=17044+http%3A%2F%2Fmiposicionamientoweb.es%2F%3Fp%3D17044) works fine. What would be?
Thanks!

[cassianotartari]

Thanks @cassianotartari !
I've installed this but for example in this post http://miposicionamientoweb.es/como-conseguir-suscriptores/amp/ the Disqus block is loading all time... And the Url to get the comments (http://cdn.miposicionamientoweb.es/wp-content/themes/metro-pro/disqus-amp.html?url=http%3A%2F%2Fmiposicionamientoweb.es%2Fcomo-conseguir-suscriptores%2F&identifier=17044+http%3A%2F%2Fmiposicionamientoweb.es%2F%3Fp%3D17044) works fine. What would be?
Thanks!

Look to your console, it's throwing:

Invalid <amp-iframe> src. Must start with https://.

You should get a ssl certificate. If you own the server you can try Let's Encrypt.

As @maxxeight said:

also MUST be hosted on a secure (HTTPS) domain

[rubenalonsoes]

Thanks @cassianotartari !
I've just change the URL and uploaded the HTML code in a subdomain with SSL, but still the same problem... :(

[cassianotartari]

Pay atention @rubenalonsoes, you should use different domains:

Make sure you can host the installation code on two different domains.
https://github.com/disqus/disqus-install-examples/tree/master/google-amp

And your Universal html is running in the same domain: miposicionamientoweb.es

[rubenalonsoes]

Yes @cassianotartari but this is a subdomain and using the property 'allow-same-origin'.
Finally I've use the solution of @KompiAjaib in Blogger for my WP adding a "Read more comments" div and now is working!! 👍
Thanks!

[cassianotartari]

Nice @rubenalonsoes ! I didn't check what is this solution.

[CB9TOIIIA]

I use @KompiAjaib page amp2 - all good 👍

[ErvanKusnaidi]

Done, thanks @maxxeight,

👍 : http://tipscodeshare.blogspot.com/

[rubenalonsoes]

With the new update of AMP plugin for WordPress, the Disqus amp-iframe appears twice in the content. One just after the featured image (into

tag) and another at the end of the content...

[cassianotartari]

@rubenalonsoes better you talk about this in the proper channel: https://wordpress.org/support/topic/v0-4-whats-new-and-possible-breaking-changes/

I'm not going to update before read change log and how this could affect the content, as he is saying in this link.

[rubenalonsoes]

Thanks @cassianotartari !
For the time I've fixed it creating my own meta-comments-link.php template in a AMP folder of my theme and setting the amp-iframe code in that template. Now works! :)

[cassianotartari]

Nice @rubenalonsoes! Can you give more details here how to achieve that?

I didn't had time yet to better read AMP plugin documentation.

[rubenalonsoes]

Yes @cassianotartari !
Simply I've deleted the function and the add_action( 'the_content', 'add_disqus' ) from functions.php.
Now the AMP plugin use a meta-comments-link.php template that you can override creating a new file with the same name in your theme folder into a AMP folder (in my case, metro-pro/amp/meta-comments-link.php). In this file I've paste the amp-ifram like this:
`get( 'comments_link_url' ); ?>

<?php $post = $this->get( 'post' ); ?>
<div class="amp-wp-meta amp-wp-comments-link">
<?php
    echo '<amp-iframe width=500 height=140
                layout="responsive"
                sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
                resizable
                frameborder="0"
                src="https://ssl.miposicionamientoweb.es/disqus-amp.html?url='.urlencode(get_permalink()).'&identifier='.urlencode($post->ID . ' ' . $post->guid).'">
        <div overflow="" tabindex="0" role="button" aria-label="Más comentarios"></div>
    </amp-iframe>';
    ?>
</div>

`

That's all! :)

Update:
With the new update 0.4.1 of the AMP plugin, the code in the functions.php works again. :)

[John-Betong]

@maxxeight

Wonderful, you did a grand job:

My Test Page

The above link validates OK according to Google Chrome's AmpHtml Extension...

...also stored in Google's Cache!

Google's CDN Cache Check

I will wait until I resurrect my HTTPS domain before I implement Disqus on every page.

Thank you!

[gui-poa]

There is a way to find out how many/which comments are coming from AMP pages?

[ghost]

Hi guys. I'm currently using the following code, but I'm getting an error when the comments attempt to load in. Any idea how to resolve this?

I replace disqususername with our disqus shortname.

  
Disqus Comments

[rubenalonsoes]

I've fixed my code because I can't comment from AMP pages.

Into the sandbox property of the amp-iframe you have to add the "allow-forms". And now I can comment from AMP pages. :)

[jp26jp]

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

[KompiAjaib]

@neerajkumar Tell to disqus what the title with code this.page.title, for example the code for blogger like this:

var disqus_shortname = "shortname";
    var disqus_config = function () {
        this.page.url = &quot;<data:blog.canonicalUrl/>&quot;;
        this.page.identifier = &quot;&quot;;
        this.page.title = &quot;<data:blog.pageName/>&quot;;
    };

[prexblog]

Wow! I have already make it work on my AMP page on https://prexblog.com

It's awesome and it lazyload...

[dmhendricks]

It is amazing how frustrating it is trying to get this to work. The closest I got was with @cassianotartari's code. If I use his code exactly, it works! Of course, it also brings up his comment page because his display-name is hard-coded in the html.

No big deal, I copied and pasted the file to my own (but different from the calling page) domain and changed the display name to my own. #fatality

If I leave it as cassianotartari's display name, it works fine. If I change it to my own display name, I get the massively unhelpful "We were unable to load Disqus. If you are a moderator please see our troubleshooting guide."

Why would it work with his display name and not mine? I have both the source page domain and the amp page domain whitelisted in Disqus > Settings > Advanced. Why doesn't Disqus provide any debugging info in the console?!?! Why don't they have a link to their own damn AMP HTML??

DISQUS: You really should put some time into developing an official, well-documented and easy-to-link solution like those proposed/used here... except universally effective. 😠

[wdmbrazil]

We need help with two sites here:
https://webdigitalmarketing.com.br/
https://papelfiltroqualitativovirt.com.br/
Thanks

[ronaldoguedess]

Finally, I did it! thanks, guys.
@cassianotartari your comment help me a lot! I'm Glad!

[theplieh]

thanks thepleh

[Lordbravo]

Thanks for the guides but i have not been able to make it work on my page BravoTechArena

[Wiros9]

If I leave it as cassianotartari's display name, it works fine. If I change it to my own display name, I get the massively unhelpful "We were unable to load Disqus. If you are a moderator please see our troubleshooting guide."

Cara Download Lagu di Spotify Gratis

[Indekode]

We are very grateful to the admin

[smujib]

This error is specific to the internal amp inside your pioneer deck,either your output wires leaving the radio are touching together somewhere ...

By Squid Game Spank

[Ridlomuhammad]

thank for sharing bro, i will try

by Selembar

[smujib]

Thanks to bro Pada tanggal Sab, 18 Des 2021 04.38, Ridlomuhammad ***@***.***> menulis:

…

thank for sharing bro, i will try by Selembar <https://selembar.com> — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGHID7BQKZSG4WM6UW4M3N3UROUWPANCNFSM4CQESAKA> . You are receiving this because you commented.Message ID: ***@***.***>

[Teknisi-Blogger]

Thanks you brooooow. iam Teknisi Blogger
the guides but i have not been able to make it work on my page Domain Java

[udluthfi]

With the new update of AMP plugin for WordPress, the Disqus amp-iframe appears twice in the content. One just after the featured image (into

tag) and another at the end of the content... Toko Bangunan

[databook11]

thanks a lot saged

[emazzaky]

Thanks a lot for the information on "How to make valid disqus comments with amp"
Best regards, Zaky Space

[smujib]

You’ve picked up the perfect dog-friendly grooming kit from the local pet Tutorial Technology

[scootlandzcitygonowas]

Thanks you brooooow. iam KepoWin
the guides but i have not been able to make it work on my page Masjoox

[databook11]

work!! thank e lot, see my amp web- pacifa

[databook11]

thank you, it work in my site pooc

[smujib]

Wow, amazing block structure! How long
Have you written a blog before? Working on a blog seems easy.
The overview of your website is pretty good, not to mention what it does.
In the content!



Thank you for any other informative site. Where else could I get that kind of information written in such a perfect approach? I’ve a challenge that I’m just now working on, and I have been on the glance out for such information.

Jeparaupdate Inc. NEtwork Jpr.
Jepara Update

Tag

Topic

Category

News Jeparaupdate Inc. NEtwork Jpr.
News Jeparaupdate

Tag

Topic

Category

Inet Jeparaupdate Inc. NEtwork Jpr.
Inet Jeparaupdate

Tag

Topic

Category

Loker Jeparaupdate Inc. NEtwork Jpr.
Loker Jeparaupdate

Tag

Topic

Category

[kalimiku]

If I leave it as cassianotartari's display name, it works fine. If I change it to my own display name, I get the massively unhelpful "We were unable to load Disqus. If you are a moderator please see our troubleshooting guide." ujian blog

[kalimiku]

mangndong

[arifitworld]

Thanks for the directions but I have not been able to make it work on my The ISP Family page. Can you please help me?

[droppbuy]

Bro.. There is a way to find out how many/which comments are coming from AMP pages? I want to switch to using amp on my blog Droppbuy

[etransfermoney]

I've been following and troubleshooting https://github.com/disqus/disqus-install-examples/tree/master/google-amp over the past few days.

However, the solution is effective in my situation; there is only one problem, though.

When I hover over one Disqus Comments Page, the correct URL of the page that received the remark is displayed, even though the page's title should be displayed there instead.

Is there a way to display the eTransferMoney page title as well?

[masmaol]

Thanks for Informasi