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>
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>
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 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>
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>
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>
O AMP é compatível com uma ampla gama de redes de anúncios. Consulte as referências para uma lista completa.