Live Blog

Edit on Github
Open in Playground View Demo

Introduction

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

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>

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-10-17T15:02:18.176738+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-10-17T15:02:18.176758+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-10-17T15:02:18.17676+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-10-17T15:02:18.176761+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-10-17T15:02:18.176762+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-10-17T15:02:18.176763+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-10-17T15:02:18.176765+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-10-17T15:02:18.176766+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-10-17T15:02:18.176767+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-10-17T15:02:18.176768+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>

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.

Example

Green landscape

18:40:07

A green landscape with trees.

<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="ampstart-btn caps">You have updates</button>
  <div items>
    
    <div id="post1"
      data-sort-time="20171017184007">
      <div class="ampstart-card m1 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">18:40:07</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>