重要提示:此文档不适用于您当前选择的格式 广告!
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 在图片周围添加的“chrome”添加空间。
许多 Instagram 图片是正方形的。当您设置 layout="responsive"
时,任何 width
和 height
值相同的值都将有效。
示例
<amp-instagram data-shortcode="fBwFP" data-captioned width="400" height="400" layout="responsive" > </amp-instagram>
如果 Instagram 图片不是正方形,您需要输入图片的实际尺寸。
当使用非响应式布局时,您需要考虑为图片周围的“Instagram chrome”添加的额外空间。目前,图片上方和下方为 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 发现错误或缺少功能?AMP 项目强烈鼓励您的参与和贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对您特别热衷的问题进行一次性贡献。
转到 GitHub