AMP
繁
Deutsch (德語) Français (法語) العربية (阿拉伯語) Español (西班牙語) Italiano (義大利語) Indonesia (印尼語) 日本語 (日語) 한국어 (韓語) Português (葡萄牙語) Русский (俄語) Türkçe (土耳其語) 中文 (簡體中文) Polski (波蘭語) Tiếng việt (越南語)

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

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

驗證

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

需要更多協助嗎？

您已閱讀本文件十幾次，但內容似乎沒有涵蓋您的所有問題嗎？可能其他人也有同感：請在 Stack Overflow 上與他們交流。

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

AMP 專案強烈鼓勵您參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對特別感興趣的問題做出一次性的貢獻。

前往 GitHub