Inclusión de contenido de terceros
Obtenga información sobre cómo incluir componentes de terceros en sus páginas.
Inserción de un tuit
Inserte un tuit de Twitter en su página con el elemento amp-twitter.
Para incluir un tuit en su página, incluya en primer lugar la siguiente secuencia de comandos en <head>:
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Actualmente, los tuits se adaptan de forma automática y a una escala proporcional para encajar en el tamaño indicado, pero es posible que la apariencia resultante no sea la ideal. Ajuste el ancho y la altura de forma manual o utilice el atributo de medios para seleccionar la relación de aspecto según el ancho de la pantalla.
<amp-twitter
width="500"
height="583"
layout="responsive"
data-tweetid="638793490521001985"
>
</amp-twitter>
amp-twitter en Ejemplos de AMP. Inserción en Instagram
Inserte un Instagram en su página mediante el elemento amp-instagram.
Para incluir un Instagram, primero incluya la siguiente secuencia de comandos en el <head>:
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
Incluya el código abreviado de datos de Instagram que se encuentra en la URL del Instagram. Por ejemplo, en https://instagram.com/p/fBwFP, el código abreviado de datos es fBwFP. Además, Instagram utiliza una relación de aspecto fija para los diseños adaptables, por lo que los valores de ancho y alto deben ser universales
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive"
>
</amp-instagram>
amp-instagram en Ejemplos de AMP. Cómo mostrar entradas o videos de Facebook
Muestre una entrada o un video de Facebook en su página con el elemento amp-facebook.
Debe incluir la siguiente secuencia de comandos en el <head>:
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Ejemplo: Inserción de una entrada
Fuente:
<amp-facebook
width="486"
height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791"
>
</amp-facebook>
Vista previa: {amp-facebook0} {/amp-facebook0}
Ejemplo: Inserción de un video
Fuente:
<amp-facebook
width="476"
height="316"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139"
>
</amp-facebook>
Vista previa: {amp-facebook0} {/amp-facebook0}
amp-facebook en Ejemplos de AMP. Cómo insertar un video de YouTube
Inserte un video de YouTube en su página con el elemento amp-youtube.
Debe incluir la siguiente secuencia de comandos en el <head>:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
El atributo data-videoid de YouTube puede encontrarse en todas las URL de las páginas de videos de YouTube. Por ejemplo, en https://www.youtube.com/watch?v=Z1q71gFeRqM, el ID del video es Z1q71gFeRqM.
Utilice layout="responsive" para producir diseños correctos para los videos con una relación de aspecto de 16:9:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="560"
height="315"
>
</amp-youtube>
amp-youtube en Ejemplos de AMP. Mostrar un anuncio
Muestre un anuncio en su página utilizando el elemento amp-ad. Únicamente son compatibles los anuncios que se publiquen mediante HTTPS.
No se puede ejecutar ningún JavaScript proporcionado por una red publicitaria en el documento de AMP. En cambio, en tiempo de ejecución de AMP se carga un iframe desde un origen diferente (a través de la zona de pruebas de iframe) y se ejecuta el JS de la red publicitaria dentro de esa zona.
Debe especificar el ancho y el alto del anuncio y el tipo de red publicitaria. El atributo type identifica la plantilla de la red publicitaria. Los diferentes tipos de anuncios requieren 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>
Si la red publicitaria lo permite, incluya un placeholder para que se muestre si no hay anuncios disponibles:
<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>
AMP es compatible con una amplia variedad de redes publicitarias. Consulte amp-ad para obtener una lista completa.