AMP教學-amp-instagram把IG照片放入文章中
BY kate │
不知道大家有沒有發現，某些部落格會引用instagram的照片進文章內容，豐富文章的照片時也藉此讓人可以點進去instagram看更多。
在一般的情況下可以用instagram提供的崁入語法放入文章或網站內，但限制外部js語法的AMP該如何讓instagram圖文放入AMP，可利用amp-instagram 套件
載入JS檔案
同樣在<head> </head> 中貼上這段
| <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script> |
在html中貼上語法
| <amp-instagram data-shortcode="B5BNBzxir2S" data-captioned width="400" height="400" layout="responsive" > </amp-instagram> |
語法解釋：
| 語法 | 說明 |
| width="400" height="400" | 寬度(width)、高度(height)必須設定，通常為正方形比例(設為1也可以) |
| data-shortcode | 指的是instagram該頁的的網址代碼 例如 https://www.instagram.com/p/B5BNBzxir2S/ |
| data-captioned | 包含標題、簡述等資訊，amp-instagram會視情況調整標題大小，假如不需要的話可以拿掉此屬性 |
呈現效果
參考教學
amp-instagram
