Google AMP - Timeago

Timeago will give the timestamp details by comparing it to the past, for example ‘x’ hours ago. In this chapter, let us discuss in detail about this feature.

To insert this feature in our work, we need to add the script given below to the .html page −

<script async custom-element = "amp-timeago" 
   src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
</script>

The amp-timeago tag looks as shown below −

<amp-timeago layout = "fixed" width = "160" height = "20" 
   datetime = "2018-10-01T00:37:33.809Z"
   locale = "en">Monday 01 October 2018 00.37 
</amp-timeago>

Let us understand this with the help of a working example as shown below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo</title>

      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.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 custom-element="amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example</h1>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en">Monday 01 October 2018 00.37
      </amp-timeago>
   </body>
</html>

Output

Sample Code for Timeago

By default, the locale is set to en. We can change the same and display timeago in the locale as needed. Locales which can be used with timeago tag are given in the table shown below.

Sr.No Locale & Description
1

ar

Arabic
2

be

Belarusian
3

be

Belarusian
4

bg

Bulgarian
5

ca

Catalan
6

da

Danish
7

de

German
8

el

Greek
9

en

English
10

enShort

English - short
11

es

Spanish
12

eu

Basque
13

fi

Finnish
14

fr

French
15

he

Hebrew
16

hu

Hungarian
17

inBG

Bangla
18

inHI

Hindi
19

inID

Malay
20

it

Italian
21

ja

Japanese
22

ko

Korean
23

ml

Malayalam
24

nbNO

Norwegian Bokmål
25

nl

Dutch
26

nnNO

Norwegian Nynorsk
27

pl

Polish
28

ptBR

Portuguese
29

ro

Romanian
30

ru

Russian
31

sv

Swedish
32

ta

Tamil
33

th

Thai
34

tr

Turkish
35

uk

Ukrainian
36

vi

Vietnamese
37

zhCN

Chinese
38

zhTW

Taiwanese

Let us discuss few locales using working examples as given below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo Using Locale</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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 custom-element = "amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example Using Locale</h1>

      <h3>Locale : Russian</h3>
      <amp-timeago layout = "fixed" 
         width = "160" height = "20" 
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ru">
          
         Monday 01 October 2018 00.37
      </amp-timeago>

      <h3>Locale : Korean</h3>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "ko">
            Monday 01 October 2018 00.37
      </amp-timeago>
      <h3>Locale : Hindi</h3>
      
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "inHI">
         
         Monday 01 October 2018 00.37
      </amp-timeago>
      
      <h3>Locale : Spanish</h3>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "es">
         
         Monday 01 October 2018 00.37
      </amp-timeago>
      
      <h3>Locale : French</h3>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "fr">
         
         Monday 01 October 2018 00.3
         </amp-timeago>
   </body>
</html>

Output

The output of the above code is as shown below −

Sample Code for Locale

Incase the "X time ago" display needs to be changed, we can use the “cutoff” attribute with timeago. Cutoff takes values in seconds to get rid of the ago display.

Let us understand this with the help of a working example as given below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - TimeAgo</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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 custom-element = "amp-timeago" 
         src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google AMP - TimeAgo Example</h1>
      <amp-timeago 
         layout = "fixed" 
         width = "160"
         height = "20"
         datetime = "2018-10-01T00:37:33.809Z"
         locale = "en"
         cutoff = "300">
         
         Monday 01 October 2018 00.37
      </amp-timeago>
   </body>
</html>

Output

Example locale
Advertisements