重要提示:此文档不适用于您当前选择的格式 故事!
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 数据短代码可以在每个 Instagram 照片 URL 中找到。 例如,在 https://instagram.com/p/fBwFP 中, fBwFP 是数据短代码。 |
data-captioned | 包含 Instagram 标题。amp-instagram 将尝试调整大小以达到正确的高度,包括标题。 |
通用属性 | 此元素包括扩展到 AMP 组件的通用属性。 |
验证
请参阅 AMP 验证器规范中的amp-instagram 规则。
需要更多帮助?
您已经阅读过这篇文档十几次了,但它并没有真正涵盖您所有的问题?也许其他人也有同样的感觉:请在 Stack Overflow 上与他们联系。
转到 Stack Overflow 发现错误或缺少功能?AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的长期参与者,但我们也欢迎您为自己特别关注的问题做出一次性贡献。
转到 GitHub