Include third-party content
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.