重要提示：此文档不适用于您当前选择的格式电子邮件！

amp-twitter

您现在可以使用此组件在有效的 AMP 文档之外使用此组件的 Bento 版本。在 Bento 指南中了解更多信息。

描述

显示 Twitter 推文或时刻。

必需的脚本

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

支持的布局

填充固定固定高度弹性项固有无显示响应式

行为

amp-twitter 组件允许您嵌入推文或时刻。

这是一个基本的嵌入式推文示例

<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689"
>
</amp-twitter>

在 Playground 中打开此代码片段

外观

Twitter 目前不提供为嵌入式推文或时刻产生固定纵横比的 API。目前，AMP 会自动按比例缩放推文或时刻以适应提供的尺寸，但这可能会产生不太理想的外观。您可能需要手动调整提供的宽度和高度。此外，您可以使用 media 属性根据屏幕宽度选择纵横比。

占位符和回退

当推文或时刻的内容正在加载或初始化时，会显示带有 placeholder 属性的元素。一旦 AMP 组件的内容显示，占位符就会被隐藏。如果浏览器不支持 amp-twitter，或者推文或时刻不存在或已被删除，则会显示带有 fallback 属性的元素。

请访问占位符和回退指南，以了解有关 amp-twitter 组件的占位符和回退如何交互的更多信息。

示例：指定占位符

我只需要更改一些 CSS。pic.twitter.com/LvjLbjgY9F
— Malte Ubl (@cramforce) 2015 年 9 月 1 日

<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="638793490521001985"
>
  <blockquote placeholder>
    <p>
      I only needed to change some CSS.
      <a href="https://127.0.0.1/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 中打开此代码片段

示例：指定占位符和回退

人们通常对 AMP 有哪些 5 个常见误解？在今天的 Amplify 中了解：https://127.0.0.1/kaSvV8SQtI pic.twitter.com/Cu9VYOmiKV
— AMP Project (@AMPhtml) 2017 年 4 月 20 日

检索推文时发生错误。它可能已被删除。

<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://127.0.0.1/kaSvV8SQtI">https://127.0.0.1/kaSvV8SQtI</a>
      <a href="https://127.0.0.1/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 中打开此代码片段

属性

data-tweetid / data-momentid / data-timeline-source-type (必填)	推文或时刻的 ID，或者如果要显示时间线，则为源类型。在类似 https://twitter.com/joemccann/status/640300967154597888 的 URL 中，`640300967154597888` 是推文 ID。在类似 https://twitter.com/i/moments/1009149991452135424 的 URL 中，`1009149991452135424` 是时刻 ID。有效的时间线源类型包括 `profile`、`likes`、`list`、`collection`、`url` 和 `widget`。
*data-timeline-（可选）**	在显示时间线时，除了 `timeline-source-type` 之外，还需要提供其他参数。例如，`data-timeline-screen-name="amphtml"` 与 `data-timeline-source-type="profile"` 结合使用将显示 AMP Twitter 帐户的时间线。有关可用参数的详细信息，请参阅Twitter 的 JavaScript 工厂函数指南中的“时间线”部分。
*data-（可选）**	您可以通过设置 `data-` 属性来指定推文、时刻或时间线外观的选项。例如，`data-cards="hidden"` 会停用 Twitter 卡片。有关可用选项的详细信息，请参阅 Twitter 的文档，推文、时刻和时间线。
title（可选）	为组件定义 `title` 属性。默认值为 `Twitter`。
常用属性	此元素包括扩展到 AMP 组件的常用属性。

验证

请参阅 AMP 验证器规范中的 amp-twitter 规则。

需要更多帮助？

您已阅读本文档十几次，但它并没有真正涵盖您的所有问题？也许其他人也有同感：请在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但也欢迎您为自己特别热衷的问题做出一次性贡献。

前往 GitHub

amp-twitter 1.0 0.1

描述

必需的脚本

支持的布局

行为

外观

占位符和回退

属性

验证

amp-twitter