amp-live-list AMP Blog component


We live in the dynamic world, the Internet has become maybe the most significant part of our everyday life helping us to know what's going on around. Have you noticed very often the things you've read around through the day get emitted as "breaking" on the evening news? And when that happens we think: we've been reading the same pages. So the fastest and reliable way keeping track what's going on is The Net and considering that we more and more using our mobiles to access it, comes the necessity of delivering the latest information to us in an easy, fast and convenient way.

Combine this with the efforts of the Internet giants to provide a lightweight and ultrafast framework for delivery of basically any content to the users on their mobile devices and one of the probable results you will get is the amp-live-list component which comes as a part of the Google's Accelerated Mobile Pages or AMP web builder project.

How you can put into action the amp-live-list:

What amp-live-list does is supporting the capability content which is being updated live on the master page to instantly get changed in the AMP mirror as well, so the users could use the information as it appears without having to refresh the page manually or navigate to a different page. In other words – if you got an AMP page loaded on your device upon any change in the live content you're getting a notification that there is an update available – just like in the social network apps and you get to choose to load it or not. This last approach is rather cool since it spares your bandwidth from getting additional traffic eating up the limit potential user's mobile data plan might have.

Using this component is quite easy and straightforward. Since it comes as one of the AMP additional component the very first thing you would need to do is including it in your page placing the <script> tag required <script async custom-element="amp-live-list" src=""></script> in your page's <head> tag.

The amp-live-list component supports two of the AMP's native layouts – you can use it either as a container letting the content wrapped within defining its size or as fixed-height requiring also a definition of the height attribute – in this case the amp-live-list will take the space available to it keeping its height unchanged.

The element consists of three sections referred to by the official documentation as reference points The first two of them like the update interval and the number of items are mandatory – respectively handled by the data-poll-interval (which value is in milliseconds and the minimum value is 15 000 or 15 seconds) and the maximum items permitted per page – handled by the data-max-items-per-page attribute (which value should be positive whole number). The last reference is the so called pagination functionality which comes to take place as a wrapper having the pagination attribute at the end of the amp-live-list element. Since the project claims to be focusing on the speed and performance and what this particular element actually does is rewriting the DOM, the AMP recommends narrowing down the number of live fetched items and therefore - avoiding pagination when possible. The actual updating of the live list takes place with the help of an button element having the on="tap:my-live-list.update" attribute which becomes available when the script has detected there are updates on the master page.

The actual content comes wrapped into a <div> tag carrying the items attribute. All the children elements of this one are in turn required to have defined id and data-sort-time attributes in order to be properly handled.

Supplementary questions concerning amp-live-list AMP Blog feature.

The amp-live-list feature systematically polls the host document for updated web content and modifies the end person's browser just as new elements appear. This signifies that every time a new blog post requires to be added in, the host document ought to be updated by CMS to include the update in both the body and the metadata part.

This is in what way an initial blog could appear like:

<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
 <button update on="tap:my-live-list.update">You have updates!</button>
 <div items></div>

The data-poll-interval property allows you to define tips on how often polls must take place; assuming that the host document is revised, the update should be available to the user soon after the next time period.

Each time a brand-new item is actually added to the host document, the <button update on="tap:my-live-list.update"> component presents a button that, once clicked on, will trigger the webpage to present the latest articles.

Live blogs could grow making the webpage too long, the data-max-items-per-page characteristic helps you to define how many objects can possibly be included to the live blog page. If the number of objects after an upgrade exceed data-max-items-per-page, the oldest updates exceeding this number will certainly be gotten rid of. For example, in the case that the page currently has 9 items, data-max-items-per-page is set to 10, and 3 new elements arrive in the latest update, the two earliest materials will be extracted from the page with the current update.

amp-live-list requires all the posts to be children of the tag <div items></div>. By referring to each post as an item, every item should have an unique id and a data-sort-time.

Live Blog implementation information

Since you are really familiar with the amp-live-list feature, let us identify the best ways to use a more challenging live blog.


Very long blogs could apply pagination to boost functionality simply by minimizing the number of blog elements to display on a web page. To implement pagination, add the <div pagination></div> element in the amp-live-list component, then insert any markup you need for pagination (for example, a web page number or a link to the following and earlier page).

When we're using the pagination, the ordinary code we applied before transforms into:

<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="5">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items></div>
  <div pagination>

It's your responsibility to populate the navigating items the right way by modifying the managed web page. As an example, inside of the live blog sample, we render the webpage through a server-side AMP Layout Template and we utilize a query guideline to specify what the first blog material of the page should be. We reduce the size of the webpage to 5 materials, so assuming that the web server has produced more than just 5 elements when a user arrives on the primary webpage it should show the Next element in the navigating area.

Right after the size of blog posts has exceeded the maximum variety of materials pointed out by data-max-items-per-page, the earlier blog materials are displayed in the "Next" webpages. Given that the amp-live-list polls the server at intervals to observe if there is any sort of development in the items, there is really no need to poll the web server if the user isn't really on the first web page.

You can include the disabled feature to the hosted page to stop the polling mechanism. In the live blog sample, we perform this particular practices in a server-side AMP Landing Page Template; when the requested web page is not the first one, we provide the disabled characteristic to the amp-live-list feature.


Basically, that's the way the amp-live-list component should take place in an AMP page in order to be properly functioning and the overall page markup – validated as AMP. It might be quite useful if your content is constantly updating and you would need to keep your audience aware of what's going on right now. There is a thing to note though – in some particular cases when the internet speed is extremely slow it is possible that the javascript handling the component and its styles arrives after the page has already been displayed. For such cases, it might be a good idea adding a line hiding the element until things are ready by adding this snippet to your page's amp-custom styles amp-live-list> [update] display:none;

It's nothing dangerous since once the amp-live-list becomes active it will also get assigned display:blocks and get visible on page. So in case you needed a tool displaying your live content on your AMP pages – now you know which one and have a few clues about using it. All that's left is finding a breaking news to write about.

Inspect a few video clip guide regarding AMP:

Related topics:

Amp-live-list official documents.

Amp-live-list - a number of examples.

Amp-live-list:an overview.

Best Free Website Builder Software

Create awesome websites offline!
No coding. 6000+ templates.
Edit and save locally, upload wherever.

Free download for Win, Mac, Linux!

Latest Posts

  1. Best Website Builder AIBest Free AI Website Builder - Create Website with AI
  2. Best Website Builder for Interior Designs, Digital Marketing Agencies, Travel Agencies
  3. Best Website Builder for Churches, Authors, Consultants, Magazines
  4. Website Builder for Education, Software Companies, Designers, Videos
  5. Website Builder for Beginners, Bloggers, Writers, IT Companies
  6. Website Builder for Online Stores, Restaurants, Musicians, Real Estate
  7. Podcasts and affiliate marketing Website Builder
  8. Best Website Builder For therapists and nonprofits
  9. Website Builder For SEO and portfolio
  10. Best Website Builder For Kids & Musicians
  11. Photographer & Artist Website Builder
  12. HTML Code Generator - HTML Code Generator
  13. Web Design Tool - Web Design Program
  14. Landing Page Maker - Landing Page Generator
  15. Easiest Website Builder For Beginners - No Coding Website Builder
  16. Fantastic HTML Constructor with Drag and Drop or Full Code Editor
  17. Eye-catching HTML Generator You Should Try
  18. Best QR Code Generator Free
  19. Top 11 Wix App Alternative Website Builders
  20. Top 11 Free Wordpress Alternatives Services
  21. Instagram Feed Embed
  22. Really Convenient Business Website Builder Overview
  23. AMP format overview
  24. AMP Layout & Media queries
  25. Image galleries and AMP
  26. AMP Font
  27. Using AMP with Bootstrap
  28. AMP SEO
  29. AMP and Wordpress
  30. Facebook Instant Articles vs. Google AMP
  31. AMP Form - amp-form extended examples and tricks
  32. AMP Analytics
  33. AMP Carousel, amp-carousel advanced examples and tricks
  34. AMP AD
  35. AMP HTML Advanced Examples, Codes, Tags
  36. AMP IFrame - amp-iframe examples and tricks
  37. AMP Validator - Test AMP pages
  38. What is AMP? - Overview