/
githubmirror
/
amphtml
Обзор
Документация
Войти
/
githubmirror
/
amphtml
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2604150425000
examples/twitter.amp.html
119 строк
6 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
Не верифицирован
10 июн 2021, 17:30
2ee75c4
Код
Авторство
О чём код?
<!doctype html> <html ⚡ lang="en"> <head> <meta charset="utf-8"> <title>Twitter examples</title> <link rel="canonical" href="amps.html" > <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <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 src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h2>Twitter</h2> <amp-twitter width=375 height=472 layout="responsive" data-tweetid="638793490521001985"> <blockquote placeholder class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I only needed to change some CSS. <a href="http://t.co/LvjLbjgY9F">pic.twitter.com/LvjLbjgY9F</a></p>— Malte Ubl (@cramforce) <a href="https://twitter.com/cramforce/status/638793490521001985">September 1, 2015</a></blockquote> </amp-twitter> <amp-twitter width=390 height=330 data-tweetid="585110598171631616" data-cards="hidden"> </amp-twitter> <amp-twitter width=390 height=330 layout="responsive" data-tweetid="585110598171631616" data-cards="hidden"> </amp-twitter> <amp-twitter width=390 height=330 layout="responsive" data-tweetid="641653602164060160" data-conversation="none" data-cards="hidden"> </amp-twitter> <amp-twitter width=390 height=330 layout="responsive" data-tweetid="641653602164060160" data-cards="hidden"> </amp-twitter> <h2>Moments</h2> <amp-twitter width=486 height=1312 layout="responsive" data-momentid="1009149991452135424" data-limit="2"> </amp-twitter> <h2>Intentionally non-existing-tweet</h2> <amp-twitter width=390 height=330 layout="fixed" data-tweetid="1111111111111641653602164060160" data-cards="hidden"> <blockquote placeholder class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">A new approach to web performance.<br><br>Today we are starting the AMP Project to make mobile web content fast again.<a href="https://t.co/b091YOzo5s">https://t.co/b091YOzo5s</a></p>— Malte Ubl (@cramforce) <a href="https://twitter.com/cramforce/status/651762967147483136">October 7, 2015</a></blockquote> </amp-twitter> <h2>Deleted tweet</h2> <amp-twitter width=390 height=330 layout="fixed" data-tweetid="882818033403789316" data-cards="hidden"> <blockquote placeholder class="twitter-tweet" data-lang="en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</blockquote> </amp-twitter> <amp-twitter width=390 height=330 layout="fixed" data-tweetid="882818033403789316" data-cards="hidden"> <blockquote placeholder class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">AMP test</p>— Gharbi Wassim (@wassgha) <a href="https://twitter.com/wassgha/status/882818033403789316">July 6, 2017</a></blockquote> </amp-twitter> <h2>Deleted tweet (with fallback)</h2> <amp-twitter width=390 height=330 layout="fixed" data-tweetid="882818033403789316" data-cards="hidden"> <blockquote placeholder class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">AMP test</p>— Gharbi Wassim (@wassgha) <a href="https://twitter.com/wassgha/status/882818033403789316">July 6, 2017</a></blockquote> <div fallback> An error occurred while retrieving the tweet. It might have been deleted. </div> </amp-twitter> <amp-twitter width=390 height=330 layout="fixed" data-tweetid="882818033403789316" data-cards="hidden"> <div fallback> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </amp-twitter> <h2>Timelines</h2> <amp-twitter width=486 height=1312 layout="responsive" data-timeline-source-type="profile" data-timeline-screen-name="amphtml" data-tweet-limit="5"> </amp-twitter> <amp-twitter width=486 height=1312 layout="responsive" data-timeline-source-type="likes" data-timeline-user-id="3450662892" data-tweet-limit="5"> </amp-twitter> <!-- BIND --> <h2 on="tap:AMP.setState({tweetid: '949054860166553600'})">Change tweet</h2> <amp-state id="tweetid"> <script type="application/json">638793490521001985</script> </amp-state> <amp-twitter width=375 height=472 layout="responsive" data-tweetid="638793490521001985" [data-tweetid]="tweetid"> </amp-twitter> </body> </html>