AMP 中的 Twitter

基本範例

<amp-twitter width="375"
  height="472"
  layout="responsive"
  data-tweetid="885634330868850689">
</amp-twitter>

Twitter 的 3 種基本功能

Tweets - 推文

Moments - 即時瀏覽在 Twitter 上分享的所有最精彩的內容

不清楚的，可去玩玩 Twitter ，或是也可看看這篇

Timelines - 時間線

Required Script

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

Placeholders 與 Fallbacks

Attributes

• data-tweetid 或 data-momentid 或 data-timeline-source-type （必填） - Tweets / Moments /
  Timelines 三者之一的 id ：

  • tweet id : https://twitter.com/joemccann/status/640300967154597888 中的 640300967154597888
  • moments id : https://twitter.com/i/moments/1009149991452135424 中的 1009149991452135424
  • data-timeline-source-type: 有效的時間軸類型，包含了：profile 、 likes 、 list 、 collection 、 url 、 widget

• data-timeline-* （非必填） - 當顯示 timeline 時（使用了 data-timeline-source-type 這個 attribute 時），如果為 data-timeline-screen-name="amphtml" ，尚需要 data-timeline-source-type="profile" 。詳細要如何使用這組的 attribue ，請看 Twitter的官方文件

data-* （非必填） - Tweet 、 Moment 、 Timeline 這三類自訂的項目，不過也不是能隨便放的，請看一下 Twitter 的官方文件： Tweet 、 Moment 、 Timeline

參考來源：

• AMP官網 - amp-twitter
• AMP內網 - Placeholders & Fallbacks
• AMP by example - amp-twitter
• (https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)
• (https://developer.twitter.com/en/docs/twitter-for-websites/moments/guides/parameter-reference0)
• (https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference)