Google AMP - социальные виджеты

Amp поддерживает отображение виджетов социальных сетей на странице без необходимости загрузки какой-либо внешней библиотеки. В этой главе мы собираемся обсудить некоторые популярные социальные виджеты, перечисленные здесь -

  • Google AMP - Facebook

  • Google AMP - Twitter

  • Google AMP - Pinterest

Google Amp - Facebook

Используя компонент amp-facebook, мы можем подключиться к facebook и отображать сообщения, видео, комментарии на странице amp.

Чтобы использовать amp-facebook, нам нужно добавить на страницу следующий скрипт -

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

Формат тега amp-facebook

<amp-facebook 
   width = "552" 
   height = "310"
   layout = "responsive"
   data-href = "https://www.facebook.com/tutorialspointindia/
   posts/1784197988358159">
</amp-facebook>

Здесь показан рабочий пример для amp-facebook -

Пример: показ сообщения из facebook

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Facebook</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-facebook" 
         src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook</h3>
      <h2>Learn Python webscrapping</h2>
      <amp-facebook 
         width = "552" 
         height = "310"
         layout = "responsive"
         data-href = "https://www.facebook.com/tutorialspointindia/posts/1784197988358159">
      </amp-facebook>
   </body>
</html>

Вывод

Пример: показ видео из facebook

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Facebook>/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-facebook" 
         src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
      </script>
   </head>
   <body>
      <h3<Google AMP - Amp Facebook Video</h3>
      <h2<Learn Python</h2>
      <amp-facebook 
         width = "476" 
         height = "316"
         layout = "responsive"
         data-embed-as = "video"
         data-href = "https://www.facebook.com/thetutorialkings/videos/701545820223256">
      </amp-facebook>
   </body>
</html>

Вывод

Пример: отображение комментариев к публикации в Facebook

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Facebook</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-facebook" 
         src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook comment for post</h3>
      <h2>Learn Microprocessor</h2>
      <amp-facebook 
         width = "552" 
         height = "500"
         layout = "responsive"
         data-embed-type = "comment"
         data-href = "https://www.facebook.com/tutorialspointindia/posts/1744145745696717?
         comment_id=1744179789026646&include_parent=false">
      </amp-facebook>
   </body>
</html>

Вывод

Атрибуты, доступные на amp-facebook находятся

  • data-href (обязательно) - Здесь нужно указать url facebook.

  • data-embed-as- Доступные варианты: публикация, видео и комментарий. По умолчанию это сообщение.

  • data-locale (обязательно) - отображение на языке локали, вы можете изменить его по своему усмотрению.

  • data-include-comment-parent- Принимает значения true или false. По умолчанию - false. Когда вы используете опцию data-embed-as в качестве комментария, если вам нужен родительский ответ на комментарий, вы можете установить для этой опции значение true.

До сих пор мы видели, как добавить запись / видео и комментарий на страницу amp. Если нам нужно добавить страницу facebook, в amp есть компонент под названиемamp-facebook-page.

Плагин Amp Facebook Page

Компонент Amp-facebook-page предоставляет нам нужную информацию о странице facebook. Для работы с amp-facebook-page нам нужно добавить следующий скрипт -

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

Здесь показан рабочий пример с использованием amp-facebook-page -

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Facebook</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-facebook-page" 
         src = "https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook Page</h3>
      <h3>Welcome to Tutorialspoint Facebook Page</h3>
      <amp-facebook-page 
         width = "340" 
         height = "130"
         layout = "responsive"
         data-href = "https://www.facebook.com/tutorialspointindia/">
      </amp-facebook-page>
   </body>
</html>

Вывод

Amp-facebook-как

Чтобы встроить страницу facebook как плагин кнопки, мы можем использовать компонент amp-facebook-like. Для работы с amp-facebook-подобным нам нужно добавить следующий скрипт -

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

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Facebook</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-facebook-like" 
         src = "https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook Likes</h3>
      <h3>Welcome to Tutorialspoint Facebook Likes</h3>
      <amp-facebook-like 
         width = "110"
         height = "20"
         layout = "fixed"
         data-layout = "button_count"
         data-href = "https://www.facebook.com/tutorialspointindia">
      </amp-facebook-like>
   </body>
</html>

Вывод

Плагин комментариев AMP facebook

Компонент Amp-facebook-comments предоставит комментарии к данной странице.

Для работы с amp-facebook-comments нам нужно добавить следующий скрипт -

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

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Facebook</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-facebook-comments" 
         src = "https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Facebook Likes</h3>
      <amp-facebook-comments 
         width = 486 
         height = 657
         layout = "responsive"
         data-numposts = "2"
         data-href = "https://developers.facebook.com/docs/plugins/comments">
      </amp-facebook-comments>
   </body>
</html>

Вывод

Атрибут data-numpostsопределяет количество комментариев, отображаемых на экране. Если вы хотите получить все комментарии, вы можете удалить атрибут.

Google AMP - Pinterest

Amp предоставляет виджет pinterest с использованием компонента amp-pinterest. Мы можем использовать этот компонент для отображения виджета pinterest, кнопки сохранения pinterest и кнопки подписки.

Чтобы начать работу с amp-pinterest, нам нужно добавить следующий скрипт -

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

Тег amp-pinterest

<amp-pinterest width = 300 height = 450 data-do = "embedPin"
   data-url = "https://in.pinterest.com/pin/856739529089490354/">
</amp-pinterest>

Виджет Pinterest

Example

Чтобы показать виджет pinterest, нам нужно использовать атрибут data-do = "embedPin". Рабочий пример того же показан здесь -

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp Pinterest Widget</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 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-pinterest" 
         src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Pinterest Widget</h3>
      <amp-pinterest
         width = 300
         height = 450
         data-do = "embedPin"
         data-url = "https://in.pinterest.com/pin/856739529089490354/">
      </amp-pinterest>
   </body>
</html>

Output

Кнопка сохранения Pinterest

Чтобы показать кнопку сохранения для pinterest, нам нужно использовать атрибут data-do="buttonPin". Здесь показан рабочий пример кнопки сохранения pinterest -

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 - Amp Pinterest Widget</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-pinterest" 
         src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Pinterest Save Button</h3>
      <h3>TutorialsPoint - ReactJS</h3>
      <amp-img 
         src = "images/reactjs.png"
         width = "100"
         height = "100"
         alt = "blockchain image">
      </amp-img>
      <amp-pinterest 
         height = "18"
         width = "56"
         data-do = "buttonPin"
         data-url = "https://www.tutorialspoint.com/"
         data-media = "https://www.tutorialspoint.com/images/tp-logo-diamond.png"
         data-description = "amp-pinterest in action">
      </amp-pinterest>
   </body>
</html>

Output

Кнопка подписки на Pinterest

Чтобы показать кнопку сохранения подписки для Pinterest, нам нужно использовать атрибут data-do="buttonFollow". Здесь показан рабочий пример кнопки сохранения Pinterest -

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 - Amp Pinterest Widget</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-pinterest" 
         src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Pinterest Follow Button</h3>
      <amp-pinterest
         height = 50
         width = 130
         data-do = "buttonFollow"
         data-href = "https://in.pinterest.com/wedgehairstyles/"
         data-label = "wedgehairstyles">
      </amp-pinterest>
   </body>
</html>

Output

Google Amp - Twitter

В Amp есть компонент для отображения каналов Twitter с помощью amp-twitter.

Для работы с amp-twitter нам нужно добавить следующий скрипт -

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

Тег AMP-Twitter

<amp-twitter width = "375" height = "472" 
   layout = "responsive" data-tweetid = "885634330868850689">
</amp-twitter>

Здесь показан рабочий пример, показывающий твиты.

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 - Amp Twitter</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-twitter" src =
         "https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
      </script>
      <style amp-custom>
         amp-facebook-like {
            margin: 1rem
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Twitter</h3>
      <amp-twitter 
         width = "375"
         height = "472"
         layout = "responsive"
         data-tweetid = "885634330868850689">
      </amp-twitter>
   </body>
</html>

Output

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved