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

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

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 的網址中，640300967154597888 是推文 ID。在類似 https://twitter.com/i/moments/1009149991452135424 的網址中，1009149991452135424 是 moment 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 (Twitter JavaScript Factory Functions 指南)中的「Timelines (時間軸)」章節。
data-* (選用) 您可以透過設定 data- 屬性，指定推文、Moments 或時間軸外觀的選項。例如，data-cards="hidden" 會停用 Twitter 卡片。如要瞭解可用選項的詳細資訊，請參閱 Twitter 文件，瞭解推文、瞭解 Moments，以及瞭解時間軸。
title (選用) 為元件定義 title 屬性。預設值為 Twitter。
通用屬性 此元素包含擴充至 AMP 元件的通用屬性。

驗證

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

需要更多協助嗎？

您已閱讀本文件數十次，但內容仍未完全涵蓋您的所有疑問嗎？或許其他人也有同感：請在 Stack Overflow 上與他們交流。

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

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

前往 GitHub