Discourse Comment Embed to Support Google AMP?

[Winsomniak (Carl Jackson)]

It would be really nice to use Discourse for embedding comments while still supporting google AMP on my content pages.

Disqus was another option, but I really like Discourse for community building and I think you guys have a better product. Are there any plans to support an AMP friendly embed feature?

My site is relatively new and so I made the (easy) decision to support Google AMP from the start. This required only a simple server side script to replace img/iframe tags in the html and css with amp tags when rendering urls with /amp.

The problem I am having is that discourse comments require javascript to be inserted into the head of the document in order to correctly format the discussion iframe and handle requests. This does not mesh with AMP at all.

I tried using an iframe directly instead of the embed script, but none of the links worked and the sizing on the iframe was messed up. This was all handled by javascripts/embed.js it seems.

I am open to some tinkering and/or server side configuration of the iframe element but I think many people would appreciate this being supported out of the box.

Thanks,

-Winsomniak

[codinghorror (Jeff Atwood)]

Unlikely, I’m not sure AMP is even a good solution for the web at the moment.

Kill Google AMP before it kills the web

[mpalmer (Matt Palmer)]

It also sounds like the changes you need to make are on your server side, to pull in posts from Discourse and render them, rather than having them pull in dynamically. Discourse has a solid API for that kind of thing, so you’ll probably just have to do a bunch of programming on whatever generates your pages.

[sam (Sam Saffron)]

see:

How about Discourse Support Google AMP?

Hi, I think if Discourse can support Google AMP, it would be better for reader, and slow host discourse. and in the future may be help website have higher rank on Google search result. Google AMP (https://www.ampproject.org/) help pages load quickly on mobile devices.

[codinghorror (Jeff Atwood)]

This is specific to embedding so it’s a valid request but the answer is pretty much “no, impossible”. Though our embed comments are fairly simple, I don’t think we could do absolutely JS free.

[sam (Sam Saffron)]

We need more technical details on what an “AMP friendly” embed even is… you are weaving multiple sites here… how does this work?

[Winsomniak (Carl Jackson)]

AMP friendly in this case likely means a server side javascripts/embed.js such that a script does not need to be pasted into the body of the target page and appended to the head. The current functionality is very dependent on client side processes.

For example, it would solve the problem if I could include a
<iframe src="discourseurl/embed-comments?embed_url=myurl"></iframe>
I got pretty close to this functionality, but none of the links work and I am bypassing your validation.

I did read the post @sam linked before making the suggestion. This seems a lot more reasonable than the entire platform supporting AMP, though I understand the reservations.

[sam (Sam Saffron)]

So, AMP is IFRAME friendly, its able to suck in HTML from multiple domains when it feeds it into the Google cache?

[Winsomniak (Carl Jackson)]

Sort of. There are some limitations (of course) but this allows people to embed arbitrary scripts into their AMP content pages. The main thing is the scripts cannot modify the parent AMP document, so Discourse’s script being appended to the head is a no go.

Include iframes

[Winsomniak (Carl Jackson)]

Oh and I am not sure it caches the iframe contents. I’m guessing not since they don’t allow it above the fold.

[sam (Sam Saffron)]

Then wouldn’t the ideal solution be for you to read it via the API and then render it with the page? Or is that too heavy on your end?

[Winsomniak (Carl Jackson)]

I was hoping to avoid any heavy integrations via API as @mpalmer suggested, but with the current functionality this is the only option I see aside from using another 3rd party solution for comments.

Putting the entire comment embed block into an additional iframe almost does the job, but fails validation in javascripts/embed.js. This was probably not a good solution anyway, but worth mentioning.

[sam (Sam Saffron)]

I just feel like heavy integration is far more in the spirit of what they want at Google, further more it gives you a significant sell internally over disqus which is another win

Our open API is a huge asset

[Winsomniak (Carl Jackson)]

Yeah its great you guys offer an API. I’ll need to look over it and decide how much work is required to get it up and running. I’ll post my results if I end up doing it.

I do think a self-contained iframe would be better, though, so I’m going to dig a little deeper on that.

Iframe method would offer:

• No stale comments in AMP cache (presumably)
• Future improvements to Discourse embed functionality automatically supported
• Easy integration without use of API for those that want to support AMP on pages with Discourse comments. Just change iframe tag to amp-iframe

[sam (Sam Saffron)]

An API could provide rendered HTML, then its just as simple to have an IFRAME as it is to render inline.

[simon]

This won’t help you unless you’re using WordPress for your site. After reading this topic I tried out the WP Discourse plugin combined with the Automattic amp-wp plugin. I’ve only tried this on a development site, but it seems it can be made to work by adding a function to WP Discourse that appends the comments template directly to the post content when a request is made for an AMP page.

Here’s the output after making a few css changes for AMP pages (this could be improved.)

The publishing template that’s used to publish posts to Discourse can be customized to include a link back to the AMP version of the post.

I’m not very familiar with AMP, so there could be issues that I’m not taking into account.

[Winsomniak (Carl Jackson)]

I’m not using Wordpress for this but I did look over that plugin for ideas. Cool that you got it working on your site @simon !

@sam I just got the embed working by bypassing the javascripts/embed.js logic completely. I still need to handle the iframe sizing issue but all of the functionality seems to be good. Basically I used the output from javascripts/embed.js with some additional sandbox settings.

<iframe id="discourse-embed-frame"
        height="200"
        width="300"
        src="discourseurl.tld/embed/comments?embed_url={{canonical}}&discourse_username={{username}}"
        frameborder="0"
        sandbox="allow-scripts allow-same-origin allow-popups"
        scrolling="no"
        layout="responsive">
</iframe>

I just swap this out with amp-iframe for amp pages.

The main question in my mind is “Should I be doing this?” Looking over javascripts/embed.js again, I am mostly missing out on the iframe sizing and url normalization, but if that script changes I’ll be none the wiser.

[sam (Sam Saffron)]

Feel free to create a plugin for AMP support.