Incluir conteúdo de terceiros
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 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>
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>
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:
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>
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>
Se compatível com a rede de anúncios,
inclua um placeholder
para ser mostrado quando nenhum anúncio estiver disponível:
<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>
A AMP é compatível com uma ampla gama de redes de anúncios. Consulte as referências para ver a lista completa.
