f1dc078 Nov 23, 2016
@kul3r4 @sebastianbenz @dandv
138 lines (132 sloc) 6.88 KB
"preview": "default",
"default": "preview"
#### 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 ⚡>
<meta charset="utf-8">
<script async src=""></script>
Additionally used AMP components must be imported in the header.
<script async custom-template="amp-mustache" src=""></script>
<script async custom-element="amp-form" src=""></script>
<script async custom-element="amp-analytics" src=""></script>
<script async custom-element="amp-access" src=""></script>
<script async custom-element="amp-list" src=""></script>
<link rel="canonical" href="<%host%>/samples_templates/comment_section/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
form {
padding-right: 0px;
form.amp-form-submit-success [submit-success] {
width: 100%;
color: black;
form.amp-form-submit-success > div.comment-user,
form.amp-form-submit-success .button{
display: none;
form.amp-form-submit-error [submit-error] {
color: red;
.user {
color: #ff4081;
font-weight: 700;
.date {
color: #a8a3ae;
.comment {
background: #f2f2f2;
margin: 0 16px 16px 0;
width: 100%;
.button-primary {
margin: 16px
.user-avatar {
margin-right: 16px;
flex-shrink: 0;
.comments-container {
padding-left: 16px;
.comment-user {
display: flex;
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- [amp-access](/components/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": "<%host%>/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"noPingback": "true",
"login": {
"sign-in": "<%host%>/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
"sign-out": "<%host%>/samples_templates/comment_section/logout"
"authorizationFallbackResponse": {
"error": true,
"loggedIn": false
<!-- #### 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. -->
<amp-list width=auto height=200 layout=fixed-height src="<%host%>/json/comments.json">
<template type="amp-mustache">
<div class="comment-user comments-container">
<amp-img width="44" height="44" class="user-avatar" alt="user" src="/img/ic_account_box_black_48dp_1x.png"></amp-img>
<div class="card comment">
<p><span class="user">{{user}}</span> <span class="date">{{datetime}}</span></p>
<!-- 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. -->
<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
<h5>Please login to comment</h5>
<button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
<!-- We specify the logout via a login endpoint to be able to use the `return URL` environment variable. -->
<button amp-access="loggedIn" amp-access-hide tabindex="0" on="tap:amp-access.login-sign-out" class="button-primary comment-button">Logout</button>
<!-- 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. -->
<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">
<div class="comment-user">
<amp-img width="44" class="user-avatar" height="44" alt="user" src="/img/ic_account_box_black_48dp_1x.png"></amp-img>
<input type="text" class="data-input" name="text" placeholder="Your comment..." required>
<input type="submit" value="Comment" class="button button-primary comment-button">
<div submit-success>
<template type="amp-mustache">
<div class="comment-user">
<amp-img width="44" class="user-avatar" height="44" alt="user" src="{{UserImg}}"></amp-img>
<div class="card comment">
<p><span class="user">{{User}}</span> <span class="date">{{Datetime}}</span></p>
<div submit-error>
<template type="amp-mustache">
Error! Looks like something went wrong with your comment, please try to submit it again. {{error}}