iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
Modern Web

AMP系列 第 17

AMP(Lession 17) - AMP 中的 Instagram

AMP 中的 Instagram

https://ithelp.ithome.com.tw/upload/images/20181007/20078336uxncU4JxJ2.png

基本結構

<amp-instagram
    data-shortcode="fBwFP"
    data-captioned
    width="400"
    height="400"
    layout="responsive">
</amp-instagram>

這裡所設的 widthheight 比較特別,會影響的是 Instagram 的圖片。如果 Instagram 不是方形,則需要輸入圖片的實際尺寸。

使用非 responsive 佈局時,需要考慮為圖片周圍的 instagram chrome 加上額外的空間。目前這空間在圖片上方為 48px ,側面為 8px 。

Required Script

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

Attributes

  • data-shortcode - 可從圖片上找到;舉例來說: https://instagram.com/p/fBwFP 的話就是 fBwFP

  • data-captioned - 包含了 Instagram 本身的標題。 amp-instagram 會調整正確的高度,包含了標題。

  • common attributes - 詳參


參考來源:


上一篇
AMP(Lession 16) - Facebook Comment 嵌入留言
下一篇
AMP(Lession 18) - AMP 中的 Twitter
系列文
AMP30

尚未有邦友留言

立即登入留言