iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

AMP系列 第 18

AMP(Lession 18) - AMP 中的 Twitter

  • 分享至 

  • xImage
  •  

AMP 中的 Twitter

https://ithelp.ithome.com.tw/upload/images/20181007/200783361Dzr922Lr3.png

基本範例

<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: 有效的時間軸類型,包含了:profilelikeslistcollectionurlwidget
  • data-timeline-* (非必填) - 當顯示 timeline 時(使用了 data-timeline-source-type 這個 attribute 時),如果為 data-timeline-screen-name="amphtml" ,尚需要 data-timeline-source-type="profile" 。詳細要如何使用這組的 attribue ,請看 Twitter的官方文件

data-* (非必填) - TweetMomentTimeline 這三類自訂的項目,不過也不是能隨便放的,請看一下 Twitter 的官方文件: TweetMomentTimeline


參考來源:


上一篇
AMP(Lession 17) - AMP 中的 Instagram
下一篇
AMP(Lession 19) - 在 AMP 頁面裡獲取數據 〈基本觀念篇〉
系列文
AMP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言