Displays a Twitter Tweet or Moment.
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-1.0.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-twitter-1.0.css">
amp-twitter component allows you to embed a Tweet or Moment.
Here's an example of a basic embedded Tweet:
<amp-twitter width="375" height="472" layout="responsive" data-tweetid="885634330868850689" > </amp-twitter>
Standalone use outside valid AMP documents
Bento allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide Use AMP components in non-AMP pages.
To find the standalone version of
Twitter does not currently provide an API that yields fixed aspect ratio for embedded Tweets or Moments. Currently, AMP automatically proportionally scales the Tweet or Moment to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the
media attribute to select the aspect ratio based on the screen width.
Placeholders & fallbacks
An element marked with a
placeholder attribute displays while the content for the Tweet or Moment is loading or initializing. Placeholders are hidden once the AMP component's content displays. An element marked with a
fallback attribute displays if
amp-twitter isn't supported by the browser or if the Tweet or Moment doesn't exist or has been deleted.
Visit the Placeholders & fallbacks guide to learn more about how placeholders and fallbacks interact for the
Example: Specifying a placeholder
I only needed to change some CSS. pic.twitter.com/LvjLbjgY9F— Malte Ubl (@cramforce) September 1, 2015
<amp-twitter width="375" height="472" layout="responsive" data-tweetid="638793490521001985" > <blockquote placeholder> <p> 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>
Example: Specifying a placeholder and a fallback
What are 5 common misconceptions people often have about AMP? Find out on today's installment of Amplify: https://t.co/kaSvV8SQtI pic.twitter.com/Cu9VYOmiKV— AMP Project (@AMPhtml) April 20, 2017
<amp-twitter width="390" height="330" layout="responsive" data-tweetid="855178606556856320" > <blockquote placeholder> <p> What are 5 common misconceptions people often have about AMP? Find out on today's installment of Amplify: <a href="https://t.co/kaSvV8SQtI">https://t.co/kaSvV8SQtI</a> <a href="https://t.co/Cu9VYOmiKV">pic.twitter.com/Cu9VYOmiKV</a> </p> — AMP Project (@AMPhtml) <a href="https://twitter.com/AMPhtml/status/855178606556856320" >April 20, 2017</a > </blockquote> <div fallback> An error occurred while retrieving the Tweet. It might have been deleted. </div> </amp-twitter>
|data-tweetid / data-momentid / data-timeline-source-type (required)||The ID of the Tweet or Moment, or the source type if a Timeline should be displayed.
In a URL like https://twitter.com/joemccann/status/640300967154597888, |
|data-timeline-* (optional)||When displaying a timeline, further arguments need to be provided in addition to |
|data-* (optional)||You can specify options for the Tweet, Moment, or Timeline appearance by setting |
|title (optional)||Define a |
|common attributes||This element includes common attributes extended to AMP components.|
See amp-twitter rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.Go to Stack Overflow Found a bug or missing a feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Go to GitHub