Skip to content
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 · 42 comments
Open

Simpler AMP install - maybe :) #3

maxprin opened this issue Sep 20, 2016 · 42 comments

Comments

@maxprin
Copy link

@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
Copy link

@CB9TOIIIA CB9TOIIIA commented Sep 20, 2016

Nice! 👍 Can you try use https github pages?

@maxprin
Copy link
Author

@maxprin 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
Copy link

@cassianotartari 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
Copy link

@cassianotartari 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
Copy link

@KompiAjaib KompiAjaib commented Sep 24, 2016

@maxxeight I still stack on blogger canonical post url

@erikdubbelboer
Copy link

@erikdubbelboer erikdubbelboer commented Sep 24, 2016

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

@Rushster
Copy link

@Rushster 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
Copy link

@KompiAjaib 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
Copy link

@CB9TOIIIA 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
Copy link

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

@cassianotartari
Copy link

@cassianotartari 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
Copy link

@rubenalonsoes 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
Copy link

@cassianotartari 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
Copy link

@rubenalonsoes 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
Copy link

@cassianotartari cassianotartari commented Sep 28, 2016

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

@CB9TOIIIA
Copy link

@CB9TOIIIA CB9TOIIIA commented Oct 3, 2016

I use @KompiAjaib page amp2 - all good 👍

@ErvanKusnaidi
Copy link

@ErvanKusnaidi ErvanKusnaidi commented Oct 4, 2016

Done, thanks @maxxeight,

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

@rubenalonsoes
Copy link

@rubenalonsoes 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
Copy link

@cassianotartari 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
Copy link

@rubenalonsoes 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
Copy link

@cassianotartari 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
Copy link

@rubenalonsoes 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
Copy link

@John-Betong 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
Copy link

@gui-poa gui-poa commented Nov 1, 2016

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

@ghost
Copy link

@ghost 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
Copy link

@rubenalonsoes 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
Copy link
Contributor

@jp26jp jp26jp commented Dec 6, 2016

@coderNik
Copy link

@coderNik 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
Copy link

@PhillipHuynh 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
Copy link

@cassianotartari 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
Copy link

@PhillipHuynh 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
Copy link

@PhillipHuynh 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
Copy link

@KompiAjaib 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
Copy link

@PhillipHuynh 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
Copy link

@KompiAjaib 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
Copy link

@neerajkumar 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
Copy link

@KompiAjaib 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
Copy link

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

@dmhendricks
Copy link

@dmhendricks dmhendricks commented Dec 30, 2018

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
Copy link

@wdmbrazil wdmbrazil commented Aug 13, 2020

@ronaldoguedess
Copy link

@ronaldoguedess ronaldoguedess commented Nov 24, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.