Twitter has become a modern way of communicating thoughts and news and can easily be embedded into an AMP HTML page using amp-twitter which embeds a Twitter tweet.
Required Script: Importing amp-twitter component into the header.
HTML
<script async custom-element="amp-twitter" </script>
|
Attribute:
- data-tweetid: Same as data-momentid or data-timeline-source-type. This is the id of a Twitter tweet. For Example – 1009149991452135424.
- data-timeline: Will display the timeline the AMP Twitter account.
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>
|
Output:
output of first amp-twitter component
output of second amp-twitter component
Article Tags :