Skip to content

Latest commit

 

History

History
77 lines (57 loc) · 3.38 KB

amp-twitter.md

File metadata and controls

77 lines (57 loc) · 3.38 KB
Raw

amp-twitter

Description Displays a Twitter Tweet.
Availability Stable
Required Script <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Supported Layouts fill, fixed, fixed-height, flex-item, nodisplay, responsive
Examples Annotated code example for amp-twitter

Behavior

CAVEAT

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.

Example:

<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>&mdash; 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 blockquote tag.

Attributes

data-tweetid (required)

The ID of the tweet. In a URL like https://twitter.com/joemccann/status/640300967154597888, 640300967154597888 is the tweetID.

data-* (optional)

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.

common attributes

This element includes common attributes extended to AMP components.

Validation

See amp-twitter rules in the AMP validator specification.