AMP

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

amp-instagram

實驗性
Bento

描述

顯示 Instagram 嵌入內容。

 

必要指令碼

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

行為

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

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

範例

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

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

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

在有效的 AMP 文件之外獨立使用

Bento 讓您可以在非 AMP 頁面中使用 AMP 元件,而無需完全採用有效的 AMP。您可以將這些元件放入不支援 AMP 的框架和 CMS 的實作中。請參閱我們的指南 在非 AMP 頁面中使用 AMP 元件 以了解更多資訊。

若要尋找 amp-instagram 的獨立版本,請參閱 bento-instagram

屬性

data-shortcode instagram data-shortcode 在每個 instagram 照片 URL 中都可以找到。
例如,在 https://instagram.com/p/fBwFP 中,fBwFP 是 data-shortcode。
data-captioned 包含 Instagram 標題。amp-instagram 將嘗試調整大小以符合正確的高度,包括標題。
通用屬性 此元素包含擴展到 AMP 元件的通用屬性
需要更多協助嗎?

您已經將這份文件讀了十幾遍,但它仍然沒有涵蓋您所有的問題嗎?也許其他人也有相同的感受:請在 Stack Overflow 上聯繫他們。

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

AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的持續參與者,同時我們也歡迎您針對您特別關注的問題做出一次性的貢獻。

前往 GitHub