|Description||Displays a Twitter Tweet.|
|Supported Layouts||fill, fixed, fixed-height, flex-item, nodisplay, responsive|
|Examples||Annotated code example for amp-twitter|
Twitter does not currently provide an API that yields fixed aspect ratio Tweet embeds. We currently automatically proportionally scale the Tweet to fit the provided size, but this may yield less than ideal appearance. Authors may need to manually tweak the provided width and height. You may also use the
media attribute to select the aspect ratio based on screen width. We are looking for feedback how feasible this approach is in practice.
<amp-twitter width=486 height=657 layout="responsive" data-tweetid="585110598171631616" data-cards="hidden"> <blockquote placeholder class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The story how I became what some people would call a frontend engineer and an exploration into what that even means<a href="https://t.co/HrVz4cGMWG">https://t.co/HrVz4cGMWG</a></p>— Malte Ubl (@cramforce) <a href="https://twitter.com/cramforce/status/585110598171631616">April 6, 2015</a></blockquote> </amp-twitter>
Copy the placeholder from Twitter's embed dialog, but remove the
script. Then add the
placeholder attribute to the
The ID of the tweet. In a URL like https://twitter.com/joemccann/status/640300967154597888,
640300967154597888 is the tweetID.
You can specify options for the Tweet appearance by setting
data- attributes. For example,
data-cards="hidden" deactivates Twitter cards. For details on the available options, see Twitter's docs.
This element includes common attributes extended to AMP components.
See amp-twitter rules in the AMP validator specification.