AMP Stories Code Example

The AMPHTML Portion:

<!doctype html>
<html amp lang="en">
    <head>
    <meta charset="utf-8">
    <title>Daily Search Forum Recap: February 13, 2018</title>
    <link rel="canonical" href="pets.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400" rel="stylesheet">
    <style amp-custom>
      amp-story {
        font-family: 'Oswald',sans-serif;
        color: #fff;
      }
      amp-story-page {
        background-color: #000;
      }
      h1 {
        font-weight: bold;
        font-size: 2.875em;
        font-weight: normal;
        line-height: 1.174;
      }
      p {
        font-weight: normal;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #fff;
      }
      q {
        font-weight: 300;
        font-size: 1.1em;
      }
      amp-story-grid-layer.bottom {
        align-content:end;
      }
      amp-story-grid-layer.noedge {
        padding: 0px;
      }
      amp-story-grid-layer.center-text {
        align-content: center;
      }
      .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
      }
      .banner-text {
        text-align: center;
        background-color: #000;
        line-height: 2em;
      }
    </style>
  </head>
  <body>
    <amp-story standalone bookend-config-src="bookend.json">
        <amp-story-page id="cover" auto-advance-after="2s">
            <amp-story-grid-layer template="fill">
                <amp-img src="assets/barry.jpg"
                    width="720" height="1280" 
                    layout="responsive">
                </amp-img>
            </amp-story-grid-layer>
            <amp-story-grid-layer template="vertical">
                <h1>Daily Search Forum Recap: February 13, 2018</h1>
                <p>By Barry Schwartz</p>
            </amp-story-grid-layer>
        </amp-story-page>
        <amp-story-page id="article-one">
            <amp-story-grid-layer template="vertical">
                <h1 animate-in="fly-in-top">People Also Search</h1>
                <p animate-in="fly-in-left">After Months Of Testing, Google Launches People Also Search For Box</p>
                <amp-img src="assets/answer-serp.png"
                    width="640" height="395" 
                    layout="responsive">
                </amp-img>
            </amp-story-grid-layer>
        </amp-story-page>
        <amp-story-page id="article-two">
            <amp-story-grid-layer template="vertical">
                <h1 animate-in="fly-in-top">AMP Stories</h1>
                <p animate-in="fly-in-left"> Google Launches AMP Stories & Visual Stories In Mobile Search</p>
                <amp-img src="assets/amp-stories-1518527783.jpg"
                    width="640" height="276" 
                    layout="responsive">
                </amp-img>
            </amp-story-grid-layer>
        </amp-story-page>
        <amp-story-page id="article-three">
            <amp-story-grid-layer template="vertical">
                <h1 animate-in="fly-in-top">Image Search Changes</h1>
                <p animate-in="fly-in-left">Google Launches AMP Stories & Visual Stories In Mobile Search</p>
                <amp-img src="assets/t-getty-images-google-1518527122.jpg"
                    width="640" height="506" 
                    layout="responsive">
                </amp-img>
            </amp-story-grid-layer>
        </amp-story-page>
        <amp-story-page id="article-four">
            <amp-story-grid-layer template="vertical">
                <h1>AdSense Payment Holds</h1>
                <p>Google AdSense Places Payments On Hold Until Mailing Address Verification<//p>
                <p><q>When you click through, it says you need to enter a PIN that you received via postal mail into the box. If you enter the wrong pin three times, your ad serving will be suspended.</q>--Barry Schwartz</p>
            </amp-story-grid-layer>
        </amp-story-page>
        <amp-story-page id="article-five">
            <amp-story-grid-layer template="vertical">
                <h1>Request Indexing Limits</h1>
                <p>
                <amp-img src="assets/twitter.png"
                    width="643" height="441" 
                    layout="responsive">
                </amp-img>
                </p>
                <p>Google Confirms: There Are Limits On Request Indexing Feature In Search Console</p>
            </amp-story-grid-layer>
        </amp-story-page>     
        <amp-story-page id="article-six">
            <amp-story-grid-layer template="thirds">
              <h1 grid-area="upper-third">Tiffany DaSilva</h1>
              <p grid-area="middle-third">
              <amp-img src="assets/Tiffany-DaSilva-1518443558.jpg"
                    width="640" height="316" 
                    layout="responsive">
                </amp-img>
              </p>
              <p grid-area="lower-third">
                <p>The Search Community Honors You</p>
            </amp-story-grid-layer>
        </amp-story-page>     
        <amp-story-page id="article-seven">
            <amp-story-grid-layer template="fill">
                <amp-img src="assets/no-googlers-allowed-1518524634.jpg"
                    width="640" height="640" 
                    layout="responsive">
                </amp-img>
            </amp-story-grid-layer>
            <amp-story-grid-layer template="thirds">
                <h1 grid-area="lower-third">A No Googlers Allowed Sign</h1>
            </amp-story-grid-layer>
        </amp-story-page>     
    </amp-story>
  </body>
</html>

The Bookend JSON endpoint:

{
  "share-providers": {
    "facebook": true,
    "twitter": true,
    "email": true
  },
  "related-articles": {
    "Articles": [
      {
        "title": "People Also Search",
        "url": "https://www.seroundtable.com/google-launches-people-also-search-for-box-25233.html",
        "image": "assets/barry-related.jpg"
      },
      {
        "title": "AMP Stories",
        "url": "https://www.seroundtable.com/google-amp-stories-25232.html",
        "image": "assets/barry-related.jpg"
      },
      {
        "title": "Image Search Changes",
        "url": "https://www.seroundtable.com/google-image-search-getty-images-25231.html",
        "image": "assets/barry-related.jpg" 
      },
      {
        "title": "AdSense Payment Holds",
        "url": "https://www.seroundtable.com/google-adsense-hold-payment-25230.html",
        "image": "assets/barry-related.jpg"     
      },
      {
        "title": "Request Indexing Limits",
        "url": "https://www.seroundtable.com/google-confirms-quota-limits-request-indexing-25229.html",
        "image": "assets/barry-related.jpg"     
      },
      {
        "title": "Tiffany DaSilva",
        "url": "https://www.seroundtable.com/tiffany-dasilva-25227.html",
        "image": "assets/barry-related.jpg"     
      },
      {
        "title": "A No Googlers Allowed Sign",
        "url": "https://www.seroundtable.com/photos/no-googlers-allowed-sign-25228.html",
        "image": "assets/barry-related.jpg"     
      }   
    ]
  }
}

If you’d like to check out all of this code, plus the image assets, you may download it here.

Demo

To see this code in action, check out our working demo of AMP Stories.