AMP
  • websites

amp-instagram

Introduction

Use the amp-instagram component to embed instagram videos and photos into your AMP HTML files.

Setup

Import the amp-instagram component in the header

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

Basic usage

Instagram photos are embedded via the instagram data-shortcode, which is found in every instagram photo URL. Many instagrams are square. When you set layout="responsive" any value where width and height are the same will work.

<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive">
</amp-instagram>

Non-square image

If the image is not square, width and height should be the actual width and height of the instagram image.

<amp-instagram data-shortcode="_hIitKIFcg" width="600" height="450" layout="responsive">
</amp-instagram>

Captions

You can include captions with the data-captioned attribute

<amp-instagram data-shortcode="BMQ8i4lBTlb" data-captioned width="1" height="1" layout="responsive">
</amp-instagram>
需要进一步说明?

如果此页面上的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例