AMP
PT
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文 Polski Tiếng việt

Include third-party content

Important: this documentation is not applicable to your currently selected format email!

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 às dimensões disponíveis, mas isto pode não resultar numa aparência muito boa. Ajuste manualmente a largura e a altura fornecidas ou use o atributo media 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 este trecho no playground

DICA – 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, primeiro 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 valor do atributo 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 este trecho no playground

DICA – 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:

DICA – 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 atributo 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 os layouts corretos para vídeos com proporção de 16:9.

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

DICA – 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.

Nenhum JavaScript fornecido por uma rede de anúncios pode ser executado dentro do documento AMP. Em vez disso, o runtime AMP carrega um iframe de uma origem diferente (através do sandbox do 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 este trecho 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 este trecho no playground

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

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