Do you build things with AMP? Fill out the new AMP Developer Survey!
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>
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub