AMP

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>
Abrir este fragmento en Playground

CONSEJO: Puede encontrar más ejemplos de 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>
Abrir este fragmento en Playground

CONSEJO: Puede encontrar más ejemplos de 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}

CONSEJO: Puede encontrar más ejemplos de 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>
Abrir este fragmento en Playground

CONSEJO: Puede encontrar más ejemplos de 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>
Abrir este fragmento en Playground

Si la red publicitaria lo permite, incluya un placeholder para que se muestre si no hay anuncios disponibles:

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 fragmento en Playground

AMP es compatible con una amplia variedad de redes publicitarias. Consulte amp-ad para obtener una lista completa.

MÁS INFORMACIÓN: Obtenga más información sobre los anuncios en la guía Cómo publicar anuncios en AMP.