Skip to content

Latest commit

 

History

History
73 lines (55 loc) · 3.21 KB

amp-twitter.md

File metadata and controls

73 lines (55 loc) · 3.21 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

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

data-nameofoption

Options for the Tweet appearance can be set using data- attributes. E.g. data-cards="hidden" deactivates Twitter cards. For documentation of the available options, see Twitter's docs.

Validation

See amp-twitter rules in the AMP validator specification.