AMP

重要提示:此文档不适用于您当前选择的格式 故事

amp-instagram

实验性
Bento

描述

显示一个 Instagram 嵌入。

 

必需脚本

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.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。

在有效 AMP 文档之外的独立使用

Bento 允许您在非 AMP 页面中使用 AMP 组件,而无需完全提交到有效的 AMP。您可以将这些组件放置在不支持 AMP 的框架和 CMS 的实现中。在我们的指南在非 AMP 页面中使用 AMP 组件中了解更多信息。

要查找 amp-instagram 的独立版本,请参阅bento-instagram

属性

data-shortcode Instagram 数据短代码在每个 Instagram 照片 URL 中都可以找到。
例如,在 https://instagram.com/p/fBwFP 中,fBwFP 是数据短代码。
data-captioned 包含 Instagram 标题。 amp-instagram 将尝试调整到包括标题在内的正确高度。
通用属性 此元素包含扩展到 AMP 组件的通用属性
需要更多帮助?

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

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

AMP 项目强烈鼓励您的参与和贡献! 我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您为自己特别关注的问题做出一次性贡献。

转到 GitHub