Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Incluir conteúdo de terceiros

Saiba como incluir componentes de terceiros em suas páginas.

Incorporar um tweet

Incorpore um tweet na sua página usando o elemento amp-twitter.

Para incluir um tweet em sua página, em primeiro lugar inclua o seguinte script no <head>:

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

Atualmente, os tweets são dimensionados automaticamente de acordo com sua proporção para se ajustarem ao tamanho fornecido, mas isso pode gerar uma aparência não muito boa. Ajuste manualmente a largura e a altura fornecidas ou use o atributo de mídia para selecionar a proporção com base na largura da tela.

<amp-twitter width="500"
  height="583"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>
Abrir esse snippet no playground

Veja mais exemplos de amp-twitter na página AMP By Example.

Incorporar uma imagem do Instagram

Incorpore uma imagem do Instagram em sua página usando o elemento amp-instagram.

Para incluir uma imagem do Instagram, em primeiro lugar inclua o seguinte script no <head>:

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

Inclua o data-shortcode do Instagram encontrado no URL da foto no Instagram. Por exemplo, em https://instagram.com/p/fBwFP, fBwFP é o data-shortcode. Além disso, o Instagram usa uma proporção fixa para os layouts responsivos, de modo que os valores de largura e altura são universais.

<amp-instagram data-shortcode="fBwFP"
  width="320"
  height="392"
  layout="responsive">
</amp-instagram>
Abrir esse snippet no playground

Veja mais exemplos de amp-instagram na página AMP By Example.

Exibir postagem ou vídeo do Facebook

Exiba uma postagem ou um vídeo do Facebook na sua página usando o elemento amp-facebook.

Você precisa incluir o seguinte script no <head>:

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Exemplo - Incorporação de uma postagem:

Source:

<amp-facebook width="486" height="657"
    layout="responsive"
    data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

Preview:

Exemplo - Incorporação de um vídeo:

Source:

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

Preview:

Veja mais exemplos de amp-facebook na página AMP By Example.

Incluir um vídeo do YouTube

Inclua um vídeo do YouTube em sua página usando o elemento amp-youtube.

Você precisa incluir o seguinte script no <head>:

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

O data-videoid do YouTube pode ser encontrado em qualquer URL de uma página de vídeos do YouTube. Por exemplo, em https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM é o ID do vídeo.

Use layout="responsive" para gerar layouts de forma correta para vídeos com proporção de 16:9.

<amp-youtube data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315">
</amp-youtube>
Abrir esse snippet no playground

Veja mais exemplos de amp-youtube na página AMP By Example.

Exibir um anúncio

Exiba um anúncio em sua página usando o elemento amp-ad. Somente anúncios veiculados via HTTPS são compatíveis.

Nenhuma rede de anúncios que forneça JavaScript pode ser executada dentro do documento de AMP. Em vez disso, o tempo de execução da AMP carrega um iframe de uma origem diferente (por meio de uma sandbox de iframe) e executa o JS da rede de anúncios dentro da sandbox desse iframe.

Você precisa especificar a largura e a altura do anúncio e o tipo de rede de anúncios. O type identifica o modelo da rede de anúncios. Diferentes tipos de anúncios exigem diferentes atributos data-*.

<amp-ad width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
</amp-ad>
Abrir esse snippet no playground

Se compatível com a rede de anúncios, inclua um placeholder para ser mostrado quando nenhum anúncio estiver disponível:

Have a great day!
<amp-ad width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
  <div placeholder>Have a great day!</div>
</amp-ad>
Abrir esse snippet no playground

A AMP é compatível com uma ampla gama de redes de anúncios. Consulte as referências para ver a lista completa.

Saiba mais sobre anúncios no guia Como veicular anúncios em AMP.