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

重要事項：此文件不適用於您目前選取的格式 廣告！

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 元件互動。

範例：指定預留位置

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="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 中開啟此程式碼片段

範例：指定預留位置和後備內容

What are 5 common misconceptions people often have about AMP? Find out on today's installment of Amplify: https://127.0.0.1/kaSvV8SQtI pic.twitter.com/Cu9VYOmiKV

— AMP Project (@AMPhtml) April 20, 2017
擷取推文時發生錯誤。推文可能已遭刪除。
 
<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-source-type="profile" 使用 data-timeline-screen-name="amphtml" 將顯示 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