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 边框”留出的额外空间。目前，这个空间在图片上方和下方为 48px，在两侧为 8px。
在有效的 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 发现了一个 bug 或者缺失了一个功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎针对您特别热衷的问题进行一次性贡献。
转到 GitHub