AMP

重要事項:此文件不適用於您目前選擇的格式 email

amp-instagram

 
您現在可以在有效的 AMP 文件之外使用此元件,透過使用此元件的 Bento 版本。在 Bento 指南 中了解更多資訊。

描述

顯示 Instagram 嵌入內容。

 

必要腳本

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

行為

`width` 和 `height` 屬性對於 Instagram 嵌入內容是特殊的。這些應該是 Instagram 圖片的實際寬度和高度。系統會自動為 Instagram 在圖片周圍新增的「邊框」增加空間。

許多 Instagram 圖片是正方形的。當您設定 `layout="responsive"` 時,任何 `width` 和 `height` 相同的值都適用。

範例

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

如果 Instagram 圖片不是正方形,您將需要輸入圖片的實際尺寸。

當使用非反應式版面配置時,您將需要考量為圖片周圍的「Instagram 邊框」增加的額外空間。目前圖片上方和下方為 48 像素,兩側為 8 像素。

屬性

data-shortcode instagram data-shortcode 可以在每個 instagram 照片網址中找到。
例如,在 https://instagram.com/p/fBwFP 中,`fBwFP` 是 data-shortcode。
data-captioned 包含 Instagram 標題。`amp-instagram` 將嘗試調整大小以符合正確的高度,包含標題。
通用屬性 此元素包含 通用屬性,這些屬性已擴展至 AMP 元件。

驗證

請參閱 AMP 驗證器規範中的 amp-instagram 規則

需要更多協助嗎?

您已經閱讀這份文件很多次,但它仍然沒有涵蓋您的所有問題嗎?也許其他人也有相同的感受:在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow
發現錯誤或缺少功能?

AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開源社群的持續參與者,但我們也歡迎針對您特別關注的問題提供一次性的貢獻。

前往 GitHub