AMP教學-amp-instagram把IG照片放入文章中

AMP教學-amp-instagram把IG照片放入文章中

不知道大家有沒有發現,某些部落格會引用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

文章關鍵字:AMP AMP教學 網頁技術 AMP網頁

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播