AMP by Example
Playground

Introduction
Introduction

Components
Components

Advanced
Advanced

Samples & Templates
Samples & Templates

AMP Ads
AMP Ads

Edit in Playground View Demo

Live Blog

Edit on Github

Introduction

This is a sample template for implementing live blogs in AMP.

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

Setup

All additionally used AMP components must be imported in the header. Import amp-live-list for implementing a live blog and amp-social-share for adding share buttons.

    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Show Hidden Code Hide Code
    <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
    <link rel="canonical" href="https://ampbyexample.com/samples_templates/live_blog/">
    <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>

Metadata

Live blog updates can be represented in Google Search results as carousel items of the blog page. Learn more.

      <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "LiveBlogPosting",
          "url": "https://ampbyexample.com/samples_templates/live_blog/",
          "articleBody": "This is the initial text in the blog post",
          "datePublished": "2016-09-08T23:04:28.24337",
          "about": {
            "@type": "Event",
            "description": "This is my great live blog sample",
            "startDate": "2016-07-23T13:00:00-07:00",
            "endDate": "2016-07-23T15:00:00-07:00",
            "name": "An AMP Live Blog",
            "url": "https://ampbyexample.com/samples_templates/live_blog/",
            "location": {
              "@type": "EventVenue",
              "name": "The Venue Name",
              "address" : {
                "@type": "PostalAddress",
                "streetAddress": "701 Mission St",
                "addressLocality": "San Francisco",
                "addressRegion": "CA",
                "postalCode": "94103",
                "addressCountry": "US"
              }
            }
          },
          "publisher": {
            "@type": "Organization",
            "name": "Google",
            "logo": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/favicon.png",
              "width": "512",
              "height": "512"
            }
          },
          "author": {
            "@type": "Person",
            "sameAs": "https://github.com/kul3r4",
            "name": "Chiara Chiappini"
          },
          "image": {
            "@type": "ImageObject",
            "url": "https://ampbyexample.com/img/abe_preview.png",
            "height": "1532",
            "width": "2046"
          },
          "coverageStartTime": "2016-07-23T11:30:00-07:00",
          "coverageEndTime": "2016-07-23T16:00:00-07:00",
          "headline": "An AMP Live Blog",
          "description": "A Live Blog implementation with AMP",
          "liveBlogUpdate": [
          {
            "@type": "BlogPosting",
            "headline": "Green landscape",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post1",
            "datePublished": "2017-02-25T01:01:33.554241+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_green_1280x853.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Mountains",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post2",
            "datePublished": "2017-02-25T01:01:33.554282+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_mountains_1280x657.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Road leading to a lake",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post3",
            "datePublished": "2017-02-25T01:01:33.554285+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_lake_1280x857.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Forested hills",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post4",
            "datePublished": "2017-02-25T01:01:33.554292+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_trees_1280x960.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Scattered houses",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post5",
            "datePublished": "2017-02-25T01:01:33.554303+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_village_1280x853.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Canyon",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post6",
            "datePublished": "2017-02-25T01:01:33.554306+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_canyon_1280x1700.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Desert",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post7",
            "datePublished": "2017-02-25T01:01:33.554309+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_desert_1280x853.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Houses",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post8",
            "datePublished": "2017-02-25T01:01:33.554312+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_houses_1280x803.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Blue sea",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post9",
            "datePublished": "2017-02-25T01:01:33.554315+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_sea_1280x848.jpg",
              "width": "853",
              "height": "1280"
            }
          },
          {
            "@type": "BlogPosting",
            "headline": "Sailing ship",
            "url": "https://ampbyexample.com/samples_templates/live_blog/#post10",
            "datePublished": "2017-02-25T01:01:33.554317+00:00",
            "author": {
              "@type": "Person",
              "sameAs": "https://github.com/kul3r4",
              "name": "Chiara Chiappini"
            },
            "articleBody": {
              "@type": "Text"
            },
            "publisher": {
              "@type": "Organization",
              "name": "AMP By Example",
              "logo": {
                "@type": "ImageObject",
                "url": "https://ampbyexample.com/img/favicon.png",
                "width": "512",
                "height": "512"
              }
            },
            "image": {
              "@type": "ImageObject",
              "url": "https://ampbyexample.com/img/landscape_ship_1280x853.jpg",
              "width": "853",
              "height": "1280"
            }
          }
        ]
        }
      </script>
Show Hidden Code Hide Code
      <style amp-custom>
        .carousel .slide > amp-img > img {
          object-fit: contain;
        }
        .logo {
          background-position: left 16px center;
          background-repeat: no-repeat;
          background-image: -webkit-image-set(
            url(/img/ic_menu_white_1x_web_24dp.png) 1x,
            url(/img/ic_menu_white_2x_web_24dp.png) 2x
            );
          background-color: #333;
          text-align: left;
          padding: 16px;
          padding-left: 72px;
          box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
        }
        .logo > a {
          font-size: 16px;
          font-weight: 500;
          color: white;
          text-transform: uppercase;
        }
        amp-social-share {
          margin-right: 8px;
        }
        .heading {
          padding-bottom: 8px;
        }
        .heading > #summary {
          font-weight: 500;
        }
        .heading > small {
          color: #656565;
        }
        .date {
          color: #a8a3ae;
          font-size: 12px;
        }
        .blog {
          padding: 0;
          min-width: 70%;
          background: #fff;
        }
        .blog p {
          margin: 0 16px;
        }
        .blog .text {
          color: black;
          padding-top: 0;
        }
        .blog .title {
          color: white;
          position: relative;
          top: -48px;
          margin: 0 16px;
          height: 0;
          padding-bottom: 16px;
        }
        .blog .social-share {
          line-height:36px;
          display: flex;
          padding-bottom: 16px;
          padding-top: 16px;
        }
        #live-list-update-button {
          position: fixed;
          top: 10px;
          right: 16px;
        }
        @media (max-width: 600px) {
          #live-list-update-button {
            top: 60px;
          }
        }
    .pagination {
      display: inline-block;
      padding: 0;
    }
    amp-live-list [pagination] nav {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pagination li {
      display: inline;
      padding: 10px;
      list-style-type: none;
    }
      </style>

  </head>
<body>

  <div class="logo">
    <a href="/"> AMP by Example</a>
  </div>

  <div class="heading">
    <h1>An AMP Live Blog</h1>
    <p>
      <small class="date">Fri July 22 2016</small>
    </p>
    <p>
      <small>by Chiara Chiappini</small>
    </p>
    <p id="summary">This is a sample article demonstrating how to write a live blog in AMP. It demonstrates the usage of amp-live-list component which allows to create live blogs.</p>
  </div>

An AMP Live Blog

Fri July 22 2016

by Chiara Chiappini

This is a sample article demonstrating how to write a live blog in AMP. It demonstrates the usage of amp-live-list component which allows to create live blogs.

Blog Posts

Use amp-live-list to implement a live blog. The amp-live-list component regularly polls the host document for updated content and updates the end user's browser as new items become available. This means that every time a new post needs to be added, the host document should be updated by the CMS to include the update both the body and the metadata section. Find an amp-live-list example here.

Long blogs could use pagination to improve performance by limiting the number of blog items to be displayed on a page. To implement pagination, amp-live-list allows to add the <div pagination></div> element, to then insert any markup needed for pagination, for example the page number, a link to the next and previous page.

  <amp-live-list  layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list-insert-blog">

    <button id="live-list-update-button" update on="tap:amp-live-list-insert-blog.update" class="button button-primary">You have updates</button>
    <div items>
      
      <div id="post1" data-sort-time="20170226222425">
        <div class="card blog">
          <amp-img src="/img/landscape_green_1280x853.jpg" layout="responsive" width="1280" height="853">
          </amp-img>
          <h4 class="title">Green landscape</h4>
          <p class="date">22:24:25</p>
          <p class="text">A green landscape with trees.</p>
          <p class="social-share">
            <amp-social-share type="twitter" width="45" height="33" data-param-url="AMPDOC_URL#post1"></amp-social-share>
            <amp-social-share type="facebook" width="45" height="33" data-attribution="254325784911610" data-param-url="AMPDOC_URL#post1"></amp-social-share>
            <amp-social-share type="gplus" width="45" height="33" data-param-url="AMPDOC_URL#post1"></amp-social-share>
            <amp-social-share type="email" width="45" height="33" data-param-url="AMPDOC_URL#post1"></amp-social-share>
            <amp-social-share type="pinterest" width="45" height="33" data-param-url="AMPDOC_URL#post1"></amp-social-share>
          </p>
        </div>
      </div>
      
    </div>

    <div pagination>
      <nav aria-label="amp live list pagination">
        <ul class="pagination">
          
          <li>1</li>
          
        </ul>
      </nav>
    </div>

  </amp-live-list>