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

重要事項：本文件不適用於您目前選取的格式 電子郵件！

amp-twitter

 
您現在可以使用此元件於有效的 AMP 文件之外，方法是使用此元件的 Bento 版本。請參閱 Bento 指南瞭解詳情。

說明

顯示 Twitter 推文或 Moments。

 

必要指令碼

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

支援版面配置

行為

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

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

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

外觀

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 (JavaScript 工廠函式指南) 中的「Timelines (時間軸)」章節。
data-* (選填) 您可以透過設定 data- 屬性，為推文、Moments 或時間軸外觀指定選項。例如，data-cards="hidden" 會停用 Twitter 卡片。如需可用選項的詳細資訊，請參閱 Twitter 的文件，推文、Moments 和 時間軸。
title (選填) 為元件定義 title 屬性。預設值為 Twitter。
通用屬性 此元素包含擴充至 AMP 元件的通用屬性。

驗證

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

需要更多協助嗎？

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

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

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

前往 GitHub