重要事項：本文件不適用於您目前選取的格式 stories！
amp-instagram
描述
顯示 Instagram 嵌入內容。
必要腳本
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script>
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-instagram-1.0.css">
支援的版面配置
行為
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 像素。
在有效的 AMP 文件之外獨立使用
Bento 允許您在非 AMP 頁面中使用 AMP 元件，而無需完全提交到有效的 AMP。您可以取得這些元件，並將它們放置在使用不支援 AMP 的框架和 CMS 的實作中。請參閱我們的指南 在非 AMP 頁面中使用 AMP 元件 以了解更多資訊。
若要尋找 amp-instagram 的獨立版本，請參閱 bento-instagram。
屬性
| data-shortcode | instagram data-shortcode 在每個 instagram 照片網址中都可找到。 例如，在 https://instagram.com/p/fBwFP 中， fBwFP 是 data-shortcode。 |
| data-captioned | 包含 Instagram 標題。amp-instagram 將嘗試調整大小以符合正確的高度，包括標題。 |
| 通用屬性 | 此元素包含 擴展到 AMP 元件的通用屬性。 |
需要更多協助嗎？
您已經閱讀本文件十幾次了，但它仍然沒有真正涵蓋您的所有問題？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。
前往 Stack Overflow 發現錯誤或缺少功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。
前往 GitHub