Simpler AMP install - maybe :) #3

maxprin · 2016-09-20T01:45:10Z

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

The text was updated successfully, but these errors were encountered:

CB9TOIIIA · 2016-09-20T11:59:24Z

Nice! 👍 Can you try use https github pages?

maxprin · 2016-09-20T15:20:40Z

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

cassianotartari · 2016-09-22T17:56:45Z

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 · 2016-09-22T18:33:01Z

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 · 2016-09-24T01:51:33Z

@maxxeight I still stack on blogger canonical post url

erikdubbelboer · 2016-09-24T04:21:55Z

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

Rushster · 2016-09-24T16:35:20Z

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 · 2016-09-25T07:47:09Z

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 · 2016-09-25T08:28:12Z

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 · 2016-09-26T12:58:45Z

@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 · 2016-09-28T11:25:02Z

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 · 2016-09-28T11:44:25Z

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 · 2016-09-28T16:09:20Z

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

cassianotartari · 2016-09-28T16:18:47Z

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 · 2016-09-28T16:25:28Z

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 · 2016-09-28T16:28:54Z

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

CB9TOIIIA · 2016-10-03T10:59:25Z

I use @KompiAjaib page amp2 - all good 👍

ErvanKusnaidi · 2016-10-04T06:41:48Z

Done, thanks @maxxeight,

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

rubenalonsoes · 2016-10-10T08:59:01Z

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 · 2016-10-10T10:32:14Z

@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 · 2016-10-10T18:37:16Z

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 · 2016-10-10T18:55:48Z

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 · 2016-10-10T19:12:55Z

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 · 2016-10-27T09:25:33Z

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

disqus/disqus-install-examples#3

gui-poa · 2016-11-01T12:31:36Z

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

ghost · 2016-11-07T10:24:00Z

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 · 2016-11-24T18:36:24Z

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 · 2016-12-06T03:47:01Z

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

KompiAjaib · 2018-03-21T09:56:03Z

@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 · 2018-06-22T05:42:18Z

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

It's awesome and it lazyload...

dmhendricks · 2018-12-30T19:49:02Z

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 · 2020-08-13T13:24:40Z

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

ronaldoguedess · 2020-11-24T15:26:22Z

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

theplieh · 2021-04-25T17:51:14Z

thanks thepleh

Lordbravo · 2021-08-08T19:35:26Z

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

Wiros9 · 2021-10-10T14:02:03Z

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 · 2021-10-28T13:05:37Z

We are very grateful to the admin

smujib · 2021-11-13T07:20:02Z

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 · 2021-12-17T21:38:33Z

thank for sharing bro, i will try

by Selembar

smujib · 2021-12-18T04:22:28Z

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 · 2021-12-19T04:01:55Z

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

udluthfi · 2021-12-29T08:49:11Z

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 · 2022-02-14T04:39:06Z

thanks a lot saged

emazzaky · 2022-02-18T08:52:16Z

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

smujib · 2022-02-27T01:15:15Z

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

scootlandzcitygonowas · 2022-04-25T23:16:57Z

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

databook11 · 2022-05-17T03:24:25Z

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

databook11 · 2022-05-17T03:26:29Z

thank you, it work in my site pooc

smujib · 2022-07-02T04:44:54Z

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 · 2022-10-01T18:13:23Z

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 · 2022-10-04T15:51:59Z

mangndong

arifitworld · 2022-10-07T20:55:34Z

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 · 2022-10-14T05:57:02Z

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 · 2022-10-16T07:00:52Z

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 · 2023-02-18T03:56:20Z

Thanks for Informasi

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

revamped disqus page

779054f

disqus/disqus-install-examples#3

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

revamped disqus page

cbc1f89

disqus/disqus-install-examples#3

disqus deleted a comment from databook11 May 10, 2022

disqus deleted a comment from droppbuy Oct 12, 2022

disqus deleted a comment from etransfermoney Oct 12, 2022

Simpler AMP install - maybe :) #3

Simpler AMP install - maybe :) #3

Comments

maxprin commented Sep 20, 2016 • edited

CB9TOIIIA commented Sep 20, 2016

maxprin commented Sep 20, 2016 • edited

cassianotartari commented Sep 22, 2016

cassianotartari commented Sep 22, 2016 • edited

KompiAjaib commented Sep 24, 2016 • edited

erikdubbelboer commented Sep 24, 2016

Rushster commented Sep 24, 2016 • edited

KompiAjaib commented Sep 25, 2016

CB9TOIIIA commented Sep 25, 2016 • edited

cassianotartari commented Sep 26, 2016

rubenalonsoes commented Sep 28, 2016

cassianotartari commented Sep 28, 2016

rubenalonsoes commented Sep 28, 2016

cassianotartari commented Sep 28, 2016

rubenalonsoes commented Sep 28, 2016

cassianotartari commented Sep 28, 2016

CB9TOIIIA commented Oct 3, 2016

ErvanKusnaidi commented Oct 4, 2016 • edited

rubenalonsoes commented Oct 10, 2016

cassianotartari commented Oct 10, 2016

rubenalonsoes commented Oct 10, 2016

cassianotartari commented Oct 10, 2016

rubenalonsoes commented Oct 10, 2016 • edited

John-Betong commented Oct 27, 2016 • edited

gui-poa commented Nov 1, 2016

ghost commented Nov 7, 2016 • edited by ghost

rubenalonsoes commented Nov 24, 2016

jp26jp commented Dec 6, 2016

KompiAjaib commented Mar 21, 2018 • edited

prexblog commented Jun 22, 2018

dmhendricks commented Dec 30, 2018

wdmbrazil commented Aug 13, 2020

ronaldoguedess commented Nov 24, 2020

theplieh commented Apr 25, 2021

Lordbravo commented Aug 8, 2021 • edited

Wiros9 commented Oct 10, 2021

Indekode commented Oct 28, 2021

smujib commented Nov 13, 2021 • edited

Ridlomuhammad commented Dec 17, 2021

smujib commented Dec 18, 2021 via email

Teknisi-Blogger commented Dec 19, 2021

udluthfi commented Dec 29, 2021

databook11 commented Feb 14, 2022

emazzaky commented Feb 18, 2022

smujib commented Feb 27, 2022

scootlandzcitygonowas commented Apr 25, 2022

databook11 commented May 17, 2022 • edited

databook11 commented May 17, 2022 • edited

smujib commented Jul 2, 2022

kalimiku commented Oct 1, 2022

kalimiku commented Oct 4, 2022

arifitworld commented Oct 7, 2022

droppbuy commented Oct 14, 2022

etransfermoney commented Oct 16, 2022

masmaol commented Feb 18, 2023

maxprin commented Sep 20, 2016 •

edited

maxprin commented Sep 20, 2016 •

edited

cassianotartari commented Sep 22, 2016 •

edited

KompiAjaib commented Sep 24, 2016 •

edited

Rushster commented Sep 24, 2016 •

edited

CB9TOIIIA commented Sep 25, 2016 •

edited

ErvanKusnaidi commented Oct 4, 2016 •

edited

rubenalonsoes commented Oct 10, 2016 •

edited

John-Betong commented Oct 27, 2016 •

edited

ghost commented Nov 7, 2016 •

edited by ghost

KompiAjaib commented Mar 21, 2018 •

edited

Lordbravo commented Aug 8, 2021 •

edited

smujib commented Nov 13, 2021 •

edited

databook11 commented May 17, 2022 •

edited

databook11 commented May 17, 2022 •

edited