">文档：<amp-twitter> - amp.dev - AMP 框架
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-twitter

实验性
Bento

说明

显示 Twitter 推文或精彩瞬间。

 

必需的脚本

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

支持的布局

行为

amp-twitter 组件允许您嵌入推文或精彩瞬间。

以下是基本嵌入推文的示例

<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689"
>
</amp-twitter>
在游乐场打开此代码段

在有效的 AMP 文档之外独立使用

借助 Bento，您可以在非 AMP 页面中使用 AMP 组件，而无需完全采用有效的 AMP。您可以使用这些组件并将其置于不支持 AMP 的框架和 CMS 中的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多信息。

要查找 amp-twitter 的独立版本，请参阅 bento-twitter。

外观

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="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>
在游乐场打开此代码段

示例：指定占位符和后备

人们对 AMP 经常有的 5 个常见误解是什么？在今天的 Amplify 中了解：https://t.co/kaSvV8SQtI pic.twitter.com/Cu9VYOmiKV

— AMP 项目 (@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://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>
在游乐场打开此代码段

属性

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
发现了一个 bug 或缺少某个功能？

AMP 项目强烈鼓励您参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对您特别热衷的问题进行一次性贡献。

转到 GitHub