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! :+1: 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... :cry:

[cassianotartari]

Job DONE :smiley:

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 :+1:

[ErvanKusnaidi]

Done, thanks @maxxeight,

:+1: : 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.

[codernik]

To avoid page reloading, use this simple code

<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>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    var disqus_config = function () {
    	var hash = window.location.hash.replace('#', '');
    	var hashsplit = hash.split('|');
        this.page.url = hashsplit[0];  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = hashsplit[1]; // 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 url will go like this https://website.com/post-url/#permalink|postID GUID

[PhillipHuynh]

@cassianotartari I did what you said on the html and function. The Disqus is popping up. Unfortunately, the comments are not in sync with one another.

AMP http://pdev.provideocoalition.com/Varicam_LT_NAB2016/amp/ Non-AMP http://pdev.provideocoalition.com/Varicam_LT_NAB2016