New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simpler AMP install - maybe :) #3

Open
maxprin opened this Issue Sep 20, 2016 · 39 comments

Comments

Projects
None yet
@maxprin

maxprin commented Sep 20, 2016

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

This comment has been minimized.

Show comment
Hide comment
@CB9TOIIIA

CB9TOIIIA Sep 20, 2016

Nice! 👍 Can you try use https github pages?

CB9TOIIIA commented Sep 20, 2016

Nice! 👍 Can you try use https github pages?

@maxprin

This comment has been minimized.

Show comment
Hide comment
@maxprin

maxprin Sep 20, 2016

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

maxprin commented Sep 20, 2016

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

@cassianotartari

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Sep 22, 2016

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 commented Sep 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Sep 22, 2016

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' );

cassianotartari commented Sep 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@KompiAjaib

KompiAjaib Sep 24, 2016

@maxxeight I still stack on blogger canonical post url

KompiAjaib commented Sep 24, 2016

@maxxeight I still stack on blogger canonical post url

@erikdubbelboer

This comment has been minimized.

Show comment
Hide comment
@erikdubbelboer

erikdubbelboer Sep 24, 2016

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

erikdubbelboer commented Sep 24, 2016

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

@Rushster

This comment has been minimized.

Show comment
Hide comment
@Rushster

Rushster Sep 24, 2016

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 commented Sep 24, 2016

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

This comment has been minimized.

Show comment
Hide comment
@KompiAjaib

KompiAjaib Sep 25, 2016

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

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

KompiAjaib commented Sep 25, 2016

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

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

@CB9TOIIIA

This comment has been minimized.

Show comment
Hide comment
@CB9TOIIIA

CB9TOIIIA Sep 25, 2016

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>

CB9TOIIIA commented Sep 25, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Sep 26, 2016

@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.

cassianotartari commented Sep 26, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Sep 28, 2016

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

cassianotartari commented Sep 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rubenalonsoes

rubenalonsoes Sep 28, 2016

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

rubenalonsoes commented Sep 28, 2016

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

@cassianotartari

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Sep 28, 2016

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

cassianotartari commented Sep 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rubenalonsoes

rubenalonsoes Sep 28, 2016

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!

rubenalonsoes commented Sep 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Sep 28, 2016

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

cassianotartari commented Sep 28, 2016

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

@CB9TOIIIA

This comment has been minimized.

Show comment
Hide comment
@CB9TOIIIA

CB9TOIIIA Oct 3, 2016

I use @KompiAjaib page amp2 - all good 👍

CB9TOIIIA commented Oct 3, 2016

I use @KompiAjaib page amp2 - all good 👍

@ErvanKusnaidi

This comment has been minimized.

Show comment
Hide comment
@ErvanKusnaidi

ErvanKusnaidi commented Oct 4, 2016

Done, thanks @maxxeight,

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

@rubenalonsoes

This comment has been minimized.

Show comment
Hide comment
@rubenalonsoes

rubenalonsoes Oct 10, 2016

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...

rubenalonsoes commented Oct 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Oct 10, 2016

@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.

cassianotartari commented Oct 10, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@rubenalonsoes

rubenalonsoes Oct 10, 2016

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! :)

rubenalonsoes commented Oct 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Oct 10, 2016

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

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

cassianotartari commented Oct 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rubenalonsoes

rubenalonsoes Oct 10, 2016

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. :)

rubenalonsoes commented Oct 10, 2016

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

This comment has been minimized.

Show comment
Hide comment
@John-Betong

John-Betong Oct 27, 2016

@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!

John-Betong commented Oct 27, 2016

@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!

edm00se added a commit to edm00se/about that referenced this issue Oct 27, 2016

edm00se added a commit to edm00se/about that referenced this issue Oct 27, 2016

@gui-poa

This comment has been minimized.

Show comment
Hide comment
@gui-poa

gui-poa Nov 1, 2016

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

gui-poa commented Nov 1, 2016

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 7, 2016

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

ghost commented Nov 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rubenalonsoes

rubenalonsoes Nov 24, 2016

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. :)

rubenalonsoes commented Nov 24, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jp26jp
Contributor

jp26jp commented Dec 6, 2016

@coderNik

This comment has been minimized.

Show comment
Hide comment
@coderNik

coderNik Dec 14, 2016

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

coderNik commented Dec 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@PhillipHuynh

PhillipHuynh Jan 20, 2017

@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

PhillipHuynh commented Jan 20, 2017

@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

@cassianotartari

This comment has been minimized.

Show comment
Hide comment
@cassianotartari

cassianotartari Jan 23, 2017

Hi @PhillipHuynh! After your comment I check it out and realize that for some obscure reason the comments stop to sync. The php urlencode was adding and + instead of a %20. So I added the identifier as

<?php echo $post->ID . '%20'.urlencode($post->guid) ?>

I've changed before the way I add the code to amp template and forget to comment here.

Now I have a folder amp inside my themes folder and inside this folder a the footer.php like this:

<?php
	$post = get_post();
?>
<div class="amp-wp-article-content">
<h4>Comentários</h4>
<div class="amp-wp-meta amp-wp-comments-link cassianoteste">
<amp-iframe width="500" height="300"
	layout="responsive"
	sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
	resizable
	frameborder="0"
	src="https://cdn.rawgit.com/cassianotartari/modaquerima/master/disqus-amp3.html?url=<?php echo urlencode(get_permalink()) ?>&identifier=<?php echo $post->ID . '%20'.urlencode($post->guid) ?>"
>
	<div overflow tabindex=0 role=button aria-label="Comentários"></div>
</amp-iframe>
</div>
</div>

I hope it helps you.

cassianotartari commented Jan 23, 2017

Hi @PhillipHuynh! After your comment I check it out and realize that for some obscure reason the comments stop to sync. The php urlencode was adding and + instead of a %20. So I added the identifier as

<?php echo $post->ID . '%20'.urlencode($post->guid) ?>

I've changed before the way I add the code to amp template and forget to comment here.

Now I have a folder amp inside my themes folder and inside this folder a the footer.php like this:

<?php
	$post = get_post();
?>
<div class="amp-wp-article-content">
<h4>Comentários</h4>
<div class="amp-wp-meta amp-wp-comments-link cassianoteste">
<amp-iframe width="500" height="300"
	layout="responsive"
	sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
	resizable
	frameborder="0"
	src="https://cdn.rawgit.com/cassianotartari/modaquerima/master/disqus-amp3.html?url=<?php echo urlencode(get_permalink()) ?>&identifier=<?php echo $post->ID . '%20'.urlencode($post->guid) ?>"
>
	<div overflow tabindex=0 role=button aria-label="Comentários"></div>
</amp-iframe>
</div>
</div>

I hope it helps you.

@PhillipHuynh

This comment has been minimized.

Show comment
Hide comment
@PhillipHuynh

PhillipHuynh Jan 23, 2017

@cassianotartari Thanks for replying! Unfortunately, this new bit of code is not working either.

I'm wondering if the fact that this is on a dev server it will affect the results as well since production on a different server.

UPDATE

I found the issue! Thanks!

PhillipHuynh commented Jan 23, 2017

@cassianotartari Thanks for replying! Unfortunately, this new bit of code is not working either.

I'm wondering if the fact that this is on a dev server it will affect the results as well since production on a different server.

UPDATE

I found the issue! Thanks!

@PhillipHuynh

This comment has been minimized.

Show comment
Hide comment
@PhillipHuynh

PhillipHuynh Jan 25, 2017

@cassianotartari Sorry for the trouble again! But I have a different problem now. There are some articles that are getting the Disqus comments while others are not:

Working: http://pdev.provideocoalition.com/Varicam_LT_NAB2016/amp/
Non-Working: http://pdev.provideocoalition.com/creative-cloud-trial-reduction/amp/

I am checking for errors but I do not see any unfortunately. When I follow the src for the Disqus thread, it is displaying the correct thread linked with the article.

Any insights would totally help me out, thanks!

PhillipHuynh commented Jan 25, 2017

@cassianotartari Sorry for the trouble again! But I have a different problem now. There are some articles that are getting the Disqus comments while others are not:

Working: http://pdev.provideocoalition.com/Varicam_LT_NAB2016/amp/
Non-Working: http://pdev.provideocoalition.com/creative-cloud-trial-reduction/amp/

I am checking for errors but I do not see any unfortunately. When I follow the src for the Disqus thread, it is displaying the correct thread linked with the article.

Any insights would totally help me out, thanks!

@KompiAjaib

This comment has been minimized.

Show comment
Hide comment
@KompiAjaib

KompiAjaib Jan 25, 2017

@PhillipHuynh maybe you can follow this post to put the disqus comments on WP AMP.

Sorry, the post with Indonesian. You use translate the page.

KompiAjaib commented Jan 25, 2017

@PhillipHuynh maybe you can follow this post to put the disqus comments on WP AMP.

Sorry, the post with Indonesian. You use translate the page.

@PhillipHuynh

This comment has been minimized.

Show comment
Hide comment
@PhillipHuynh

PhillipHuynh Jan 25, 2017

@KompiAjaib I actually didn't have to go that far with your guide. I noticed that after putting this line of code:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
The comments started working on that article, which is odd since AMP WP should be interjecting the script automatically in the head.

I did a search on the page source and it found it twice on the AMP page that is working properly. Now I just got to figure out why its not interjecting it on the non-working page initially.

PhillipHuynh commented Jan 25, 2017

@KompiAjaib I actually didn't have to go that far with your guide. I noticed that after putting this line of code:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
The comments started working on that article, which is odd since AMP WP should be interjecting the script automatically in the head.

I did a search on the page source and it found it twice on the AMP page that is working properly. Now I just got to figure out why its not interjecting it on the non-working page initially.

@KompiAjaib

This comment has been minimized.

Show comment
Hide comment
@KompiAjaib

KompiAjaib Jan 27, 2017

@PhillipHuynh I did'n found the amp-iframe js placed twice on my blog's source page.
Did you use the amp wp by automattic?

KompiAjaib commented Jan 27, 2017

@PhillipHuynh I did'n found the amp-iframe js placed twice on my blog's source page.
Did you use the amp wp by automattic?

@neerajkumar

This comment has been minimized.

Show comment
Hide comment
@neerajkumar

neerajkumar Mar 21, 2018

I was just following https://github.com/disqus/disqus-install-examples/tree/master/google-amp and trouble shooting since last many days.
However the solution is working in my case, but there is only one issue -

one Disqus Comments Page, its not displaying the title of the page, while at the place of title, its showing Untitled, and whenever I am hovering on it, its showing me the correct URL of the page which got the comment. Is there any way, we can display the title of the page too?

neerajkumar commented Mar 21, 2018

I was just following https://github.com/disqus/disqus-install-examples/tree/master/google-amp and trouble shooting since last many days.
However the solution is working in my case, but there is only one issue -

one Disqus Comments Page, its not displaying the title of the page, while at the place of title, its showing Untitled, and whenever I am hovering on it, its showing me the correct URL of the page which got the comment. Is there any way, we can display the title of the page too?

@KompiAjaib

This comment has been minimized.

Show comment
Hide comment
@KompiAjaib

KompiAjaib Mar 21, 2018

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

var disqus_shortname = &quot;shortname&quot;;
    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;;
    };

KompiAjaib commented Mar 21, 2018

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

var disqus_shortname = &quot;shortname&quot;;
    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

This comment has been minimized.

Show comment
Hide comment
@prexblog

prexblog Jun 22, 2018

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

It's awesome and it lazyload...

prexblog commented Jun 22, 2018

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

It's awesome and it lazyload...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment