Comment Section

Edit on Github
Open in Playground View Demo

Introduction

This sample showcases how to build a comment section in AMP HTML using the amp-form component after a successful login flow. Login, type a comment and press the COMMENT button; your comment will not be persisted, so reload the page if you want to start commenting again.

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>

Additionally used AMP components must be imported in the header.

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

amp-access requires the definition of 3 endpoints as documented here. This sample allows an user to login and logout: this is realized by specifying two different endpoints in the login property, sign-in and sign-out, find more here.

<script id="amp-access" type="application/json">
{
    "authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
    },
    "authorizationFallbackResponse": {
        "error": true,
        "loggedIn": false
    }
}
</script>

Add a Comment Section

Use amp-list to render existing comments to make sure that the latest comments appear if the page is loaded via AMP Cache.

Example

<amp-list class="mt1"
  width="auto"
  height="230"
  layout="fixed-height"
  src="/json/comments.json">
  <template type="amp-mustache">
    <div class="flex px1 pt1">
      <amp-img width="44"
        height="44"
        class="mr1 flex-none"
        alt="user"
        src="/img/ic_account_box_black_48dp_1x.png"></amp-img>
      <div class="ampstart-card p1 comment">
        <p>
          <span class="user">{{user}}</span>
          <span class="date">{{datetime}}</span>
        </p>
        <p>{{text}}</p>
      </div>
    </div>
  </template>
</amp-list>

In order to add comments users need to be logged in. We use amp-access to integrate login and to show and hide the login button depending on whether the user is logged in. on="tap:amp-access.login-sign-in" specifies which action should be taken when clicking on the login button: login defines the property inside the amp-access json configuration, while sign-in defines the endpoint.

Example

Please login to comment

<span amp-access="NOT loggedIn"
  role="button"
  tabindex="0"
  amp-access-hide>
  <h2 class="m1">Please login to comment</h2>
  <button on="tap:amp-access.login-sign-in"
    class="ampstart-btn mx1 mt1 caps">Login</button>
</span>

Use amp-form to submit the comment. In this sample, only a single comment can be added as comments are not persisted in the backend.

Example

<form class="px1 pt1 flex"
  amp-access="loggedIn"
  amp-access-hide
  method="post"
  action-xhr="/samples_templates/comment_section/submit-comment-xhr"
  target="_top">
  <amp-img width="44"
    height="44"
    class="flex-none mr1 mt1"
    alt="user"
    src="/img/ic_account_box_black_48dp_1x.png"></amp-img>
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      value=""
      name="text"
      id="ip1"
      class="block border-none p0 m0"
      placeholder="Your comment ...">
    <label for="ip1"
      class="absolute top-0 right-0 bottom-0 left-0">
      Your comment ...
    </label>
  </div>
  <input type="submit"
    value="Comment"
    class="ampstart-btn caps m1">
  <div submit-success>
    <template type="amp-mustache">
      <div class="flex">
        <amp-img width="44"
          class="mr1 flex-none"
          height="44"
          alt="user"
          src="{{UserImg}}"></amp-img>
        <div class="ampstart-card p1 comment">
          <p>
            <span class="user">{{User}}</span>
            <span class="date">{{Datetime}}</span>
          </p>
          <p>{{Text}}</p>
        </div>
      </div>
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Looks like something went wrong with your comment, please try to submit it again. {{error}}
    </template>
  </div>
</form>

We specify the logout via a login endpoint to be able to use the return URL environment variable.

Example

<button amp-access="loggedIn"
  amp-access-hide
  tabindex="0"
  on="tap:amp-access.login-sign-out"
  class="ampstart-btn m2 caps">Logout</button>