AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

  • 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>
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub