">文档:<amp-instagram> - amp.dev - AMP 框架
AMP

amp-instagram

 
你现在可以使用此组件,使用此组件的Bento 版本在有效的 AMP 文档之外。在Bento 指南中了解更多信息。

描述

显示 Instagram 嵌入。

 

必需脚本

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.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 边框”留出的额外空间。目前在图片上方和下方是 48px,在两侧是 8px。

属性

data-shortcode Instagram data-shortcode 可以在每个 Instagram 照片 URL 中找到。
例如,在 https://instagram.com/p/fBwFP 中,fBwFP 是 data-shortcode。
data-captioned 包括 Instagram 标题。amp-instagram 将尝试调整为包括标题的正确高度。
通用属性 此元素包含 通用属性,已扩展到 AMP 组件。

验证

请参阅 AMP 验证器规范中的 amp-instagram 规则

需要更多帮助?

您已经阅读了本文档十几次,但它并没有真正涵盖您的所有问题?也许其他人也有同感:在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与和贡献!我们希望您成为我们开源社区的持续参与者,但我们也欢迎您对特别热衷的问题进行一次性贡献。

转到 GitHub