amp-reddit

Edit on Github
Open in Playground

Introduction

The amp-reddit component allows embedding both reddit posts and comments into AMP files.

Setup

Import the amp-reddit component

<script async custom-element="amp-reddit" src="https://cdn.ampproject.org/v0/amp-reddit-0.1.js"></script>

Basic Usage

The amp-reddit component requires to be told that the embed is a post/comment as well as the source of the embed

Embedding a post

Example

<amp-reddit layout="responsive"
  width="300"
  height="400"
  data-embedtype="post"
  data-src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed">
</amp-reddit>

Embedding comments

Example

<amp-reddit layout="responsive"
  width="400"
  height="400"
  data-embedtype="comment"
  data-src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/d7n3soo/">
</amp-reddit>

Parent comments

Embed the parent comment by specifying data-embedparent="true".

Example

<amp-reddit layout="responsive"
  width="400"
  height="400"
  data-embedtype="comment"
  data-src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/d7n3soo/"
  data-embedparent="true">
</amp-reddit>

Update comments

Update comments when the original comment is updated by specifying data-embedlive="true"

Example

<amp-reddit layout="responsive"
  width="400"
  height="400"
  data-embedtype="comment"
  data-src="https://www.reddit.com/r/sports/comments/54loj1/50_cents_awful_1st_pitch_given_a_historical/d8306kw"
  data-embedlive="true">
</amp-reddit>