AMP 中的 Instagram

基本結構

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

這裡所設的 width 、 height 比較特別，會影響的是 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官網
• AMP by example - amp-instagram