AMP
EN
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 中文 波蘭語 越南語

amp-twitter

實驗性
Bento

描述

顯示 Twitter 推文或 Moments。

 

必要腳本

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

支援的版面配置

行為

amp-twitter 元件可讓您嵌入推文或 Moments。

這是一個基本嵌入推文的範例

<amp-twitter
  width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689"
>
</amp-twitter>
在 playground 中開啟此程式碼片段

在有效的 AMP 文件之外獨立使用

Bento 允許您在非 AMP 頁面中使用 AMP 元件，而無需完全提交有效的 AMP。您可以採用這些元件，並將它們放置在使用不支援 AMP 的框架和 CMS 的實作中。請參閱我們的指南 在非 AMP 頁面中使用 AMP 元件 以了解更多資訊。

若要尋找 amp-twitter 的獨立版本，請參閱 bento-twitter。

外觀

Twitter 目前未提供 API，以產生嵌入推文或 Moments 的固定長寬比。目前，AMP 會自動按比例縮放推文或 Moments 以符合提供的尺寸，但這可能會產生不理想的外觀。您可能需要手動調整提供的寬度和高度。此外，您可以使用 media 屬性根據螢幕寬度選擇長寬比。

預留位置與備用方案

標記有 placeholder 屬性的元素會在載入或初始化推文或 Moments 的內容時顯示。一旦 AMP 元件的內容顯示，預留位置就會隱藏。如果瀏覽器不支援 amp-twitter，或者推文或 Moments 不存在或已刪除，則會顯示標記有 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 (必填) 推文或 Moments 的 ID，或應顯示時間軸的來源類型。在類似 https://twitter.com/joemccann/status/640300967154597888 的 URL 中，640300967154597888 是推文 ID。在類似 https://twitter.com/i/moments/1009149991452135424 的 URL 中，1009149991452135424 是 Moments 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 Factory Functions Guide 中的「Timelines」章節。
data-* (選填) 您可以透過設定 data- 屬性，指定推文、Moments 或時間軸外觀的選項。例如，data-cards="hidden" 會停用 Twitter 卡片。如需可用選項的詳細資訊，請參閱 Twitter 文件中 關於推文、關於 Moments 和 關於時間軸 的說明。
title (選填) 為元件定義 title 屬性。預設值為 Twitter。
通用屬性 此元素包含擴充至 AMP 元件的通用屬性。

驗證

請參閱 AMP 驗證器規格中的 amp-twitter 規則。

需要更多協助嗎？

您已閱讀此文件數十次，但它仍然沒有涵蓋您的所有問題嗎？或許其他人也有同樣的感受：在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

前往 GitHub