AMP

amp-twitter

Displays a Twitter Tweet or Moment.

Required Script<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Supported Layoutsfill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
ExamplesAnnotated code example for amp-twitter

Behavior

The amp-twitter component allows you to embed a Tweet or Moment for the specified Twitter ID.

Here's an example of a basic embedded Tweet:

Show full code

Appearance

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 amp-twitter component.

Example: Specifying a placeholder

Show full code

Example: Specifying a placeholder and a fallback

Show full code

Attributes

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, 640300967154597888 is the tweet id. In a URL like https://twitter.com/i/moments/1009149991452135424, 1009149991452135424 is the moment id. Valid timeline source types include profile, likes, list, collection, url, and widget.
data-timeline-* (optional)When displaying a timeline, further arguments need to be provided in addition to timeline-source-type. For example, data-timeline-screen-name="amphtml" in combination with data-timeline-source-type="profile" will display a timeline of the AMP Twitter account. For details on the available arguments, see the "Timelines" section in Twitter's JavaScript Factory Functions Guide.
data-* (optional)You can specify options for the Tweet, Moment, or Timeline appearance by setting data- attributes. For example, data-cards="hidden" deactivates Twitter cards. For details on the available options, see Twitter's docs for tweets, for moments and for timelines.
common attributesThis element includes common attributes extended to AMP components.

Validation

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