AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format ads!

amp-twitter

Experimental
Bento

Description

Displays a Twitter Tweet or Moment.

 

Required Scripts

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-1.0.js"></script>

Supported Layouts

Behavior

The 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>
このスニペットを Playground で開く

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 amp-twitter, see bento-twitter.

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

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>
    &mdash; Malte Ubl (@cramforce)
    <a href="https://twitter.com/cramforce/status/638793490521001985"
      >September 1, 2015</a
    >
  </blockquote>
</amp-twitter>
このスニペットを Playground で開く

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
An error occurred while retrieving the Tweet. It might have been deleted. 
<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&#39;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>
    &mdash; 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>
このスニペットを Playground で開く

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.
title (optional) Define a title attribute for the component. The default is Twitter.
common attributes This element includes common attributes extended to AMP components.

Validation

See amp-twitter rules in the AMP validator specification.

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする