Google AMP amp-twitter
Опубликовано: 12 Апреля, 2022
Twitter стал современным способом передачи мыслей и новостей, и его можно легко встроить в страницу AMP HTM L с помощью amp-twitter, который включает твит Twitter.
Required Script: Importing amp-twitter component into the header.
HTML
< script async custom-element = "amp-twitter" </ script > |
Атрибут:
- data-tweetid: То же, что data-momentid или data-timeline-source-type. Это идентификатор твита в Твиттере. Например - 1009149991452135424.
- data-timeline: отобразит временную шкалу учетной записи AMP Twitter.
Example:
HTML
<!doctype html> < html > < head > < meta charset = "utf-8" > < title >Google AMP amp-twitter</ title > < script async src = </ script > <!-- Don"t forget to import the twitter component --> < script async custom-element = "amp-twitter" </ script > < link rel = "canonical" href = < 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 > </ head > < body > < amp-twitter width = "375" height = "472" layout = "responsive" data-tweetid = "1307176901916516354" > </ amp-twitter > < amp-twitter width = "390" height = "330" layout = "responsive" data-tweetid = "1307176901916516354" data-cards = "hidden" > </ amp-twitter > </ body > </ html > |
Выход: