# Discourse Comment Embed to Support Google AMP?

**URL:** https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721
**Category:** Feature
**Created:** [June 18, 2017, 11:47pm UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721 "2017-06-18T23:47:13Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 18, 2017, 11:47pm UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/1 "2017-06-18T23:47:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 19, 2017, 12:19am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/2 "2017-06-19T00:19:16Z")

</div>

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](https://www.theregister.com/software/2017/05/19/kill-google-amp-before-it-kills-the-web/720192)**
>
> Trust, independence, credibility – we've heard of those

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [June 19, 2017, 12:34am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/3 "2017-06-19T00:34:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2017, 12:38am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/4 "2017-06-19T00:38:22Z")

</div>

see:

> [@How about Discourse Support Google AMP?](https://meta.discourse.org/t/how-about-discourse-support-google-amp/53697):
>
> 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/](https://www.ampproject.org/)) help pages load quickly on mobile devices.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 19, 2017, 12:42am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/5 "2017-06-19T00:42:40Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2017, 12:55am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/6 "2017-06-19T00:55:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 19, 2017, 1:09am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/7 "2017-06-19T01:09:59Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2017, 1:15am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/8 "2017-06-19T01:15:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 19, 2017, 1:19am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/9 "2017-06-19T01:19:37Z")

</div>

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](https://amp.dev/documentation/guides-and-tutorials/develop/media_iframes_3p/iframes?referrer=ampproject.org)**
>
> Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

---

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 19, 2017, 1:21am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/10 "2017-06-19T01:21:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2017, 1:22am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/11 "2017-06-19T01:22:20Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 19, 2017, 1:29am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/12 "2017-06-19T01:29:39Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2017, 1:32am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/13 "2017-06-19T01:32:42Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 19, 2017, 2:15am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/14 "2017-06-19T02:15:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2017, 2:44am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/15 "2017-06-19T02:44:49Z")

</div>

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

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [June 19, 2017, 3:25am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/16 "2017-06-19T03:25:37Z")

</div>

This won’t help you unless you’re using WordPress for your site. After reading this topic I tried out the [WP Discourse](https://github.com/discourse/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](https://github.com/discourse/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.)

 ![](https://global.discourse-cdn.com/meta/original/3X/6/e/6e503e5f6936c17e83deb7f09bad188318a5402c.png)

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.

 ![](https://global.discourse-cdn.com/meta/original/3X/5/6/567a664ccc23f05bab93b9e02b9ca0fc8904dc03.png)

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

---

<div class="post-metadata">

### Author: ![Winsomniak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/winsomniak/32/74182_2.png) [@Winsomniak](https://meta.discourse.org/u/Winsomniak)
#### Post date: [June 19, 2017, 4:10am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/17 "2017-06-19T04:10:27Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 8, 2019, 8:14am UTC](https://meta.discourse.org/t/discourse-comment-embed-to-support-google-amp/64721/19 "2019-09-08T08:14:23Z")

</div>

Feel free to create a plugin for AMP support.
