Ejemplo de AMP Facebook

8 componentes AMP para la integración de redes sociales

El mayor conflicto que debe resolver el estándar web móvil de Google, Accelerated Mobile Pages , es hacer que los sitios móviles sean más rápidos y , al mismo tiempo, mantenerlos funcionales y ricos en contenido . En estos días, el contenido rico y atractivo difícilmente se puede imaginar sin las incrustaciones de sitios populares de redes sociales: tweets, videos, audios, publicaciones, fotos.

Los componentes AMP extendidos , entre otras excelentes funciones , brindan una excelente manera de integrar documentos AMP con diferentes tipos de contenido social.

Cómo funcionan los componentes AMP extendidos

En el núcleo de la filosofía de AMP se encuentran las mejores prácticas de rendimiento de Google . Para mejorar los tiempos de carga de la página, los estándares de AMP restringen cómo puede utilizar las tecnologías de front-end . Por ejemplo, no puede utilizar JavaScript personalizado, hojas de estilo externas ni ningún elemento HTML que cargue recursos externos, como la <img>etiqueta.

A cambio, obtienes un montón de Componentes AMP que puedes usar para mostrar recursos externos , como imágenes, videos, audios, anuncios, etc. en tu sitio.

Los componentes AMP son etiquetas HTML específicas que se pueden utilizar de forma similar a las etiquetas HTML normales. Algunos de ellos están integrados en el tiempo de ejecución de AMP, mientras que la mayoría funciona como extensiones . Los componentes que hacen posible la integración de las redes sociales en las páginas AMP son todos componentes ampliados .

Los componentes AMP extendidos requieren que importe el script correspondiente en la <head>sección de su documento HTML AMP. Como AMP es un proyecto de código abierto, la cantidad de componentes extendidos puede crecer en el futuro.

En esta publicación, hemos recopilado algunos componentes AMP que pueden ayudarlo con la integración de las redes sociales . Tenga en cuenta que las versiones de los scripts pueden cambiar con el tiempo , por lo que siempre consulte la documentación antes de incluirlos en su sitio.

1. amp-facebook

<amp-facebook> permite insertar una publicación o un video de Facebook en una página AMP.

Siempre debe especificar las dimensiones de la publicación incrustada , lo que significa que debe agregar widthun heightatributo y un atributo con valores en píxeles enteros. Puede encontrar las dimensiones adecuadas haciendo clic en el menú “Insertar” en la parte superior de la publicación de Facebook.

También debe agregar la URL de la publicación dada en el data-hrefatributo. Puede encontrar la URL haciendo clic en la marca de tiempo de la publicación de Facebook, y el navegador insertará la URL única en la barra de direcciones.

Si desea incrustar un video sin la publicación de Facebook correspondiente , agregue el data-embed-as="video"atributo opcional

Si desea que su inserción sea receptiva, use el layoutatributo con el "responsive"valor. También puede utilizar el layoutatributo opcional en cualquier otro componente AMP para controlar su diseño.

Ejemplo de código:

1
2
3
<amp-facebook width="500" height="485" layout="responsive"
    data-href="https://www.facebook.com/hongkiatcom/posts/10154256404668592">
</amp-facebook>

Vista previa del código:

Ejemplo de AMP Facebook

Guión para incluir:

1
2
3
<script async custom-element="amp-facebook"
    src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
</script>

2. amp-twitter

Puede incrustar tweets en páginas AMP utilizando el <amp-twitter>componente.

Para hacerlo, debe especificar el ID del tweet en el data-tweetidatributo. Puede modificar la forma en que se muestra el tweet agregando cualquiera de las opciones de visualización de la APi de Twitter como un data-*atributo HTML5 .

Por ejemplo, en el siguiente ejemplo utilicé la linkColoropción de visualización de la API de Twitter como data-link-color(su data-*formato) para cambiar el color del enlace predeterminado al color que Hongkiat.com usa en su cuenta de Twitter.

Ejemplo de código:

1
2
3
<amp-twitter width="506" height="338" layout="responsive"
    data-tweetid="765234426166915072" data-link-color="#698aba">
</amp-twitter>

Vista previa del código:

Ejemplo de Twitter de AMP

El <amp-twitter>componente no es perfecto, sin embargo, docs Github dice que Twitter no proporciona actualmente una API que los rendimientos fijos relación de aspecto Tweet incrusta .

Esto significa que debe configurar manualmente los atributos widthyheight , ya que el tiempo de ejecución de AMP a veces no muestra una parte (generalmente la parte inferior) del tweet.

Siempre es una buena idea comprobar cómo se ven sus tweets incrustados antes de publicar la página AMP.

Agregar un marcador de posición

Aunque no es obligatorio, la documentación recomienda agregar un marcador de posición en caso de que el tweet no se cargue a la vez.

El placeholderatributo se puede utilizar en cada componente de AMP. El marcador de posición se muestra inmediatamente si los recursos finales no están disponibles. Cuando se carga el elemento AMP, oculta su marcador de posición .

Eche un vistazo a cómo se ve el código de ejemplo anterior con un marcador de posición . En Twitter, simplemente hice clic en el botón Insertar Tweet , copié y pegué el blockquote incrustable (sin el script al final) y agregué el placeholderatributo a la <blockquote>etiqueta.

Ejemplo de código con marcador de posición:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<amp-twitter width="506" height="338" layout="responsive"
  data-tweetid="765234426166915072" data-link-color="#698aba">
  <blockquote placeholder class="twitter-tweet" data-lang="en">
    <p lang="en" dir="ltr">How to Validate Accelerated Mobile Pages
      (<a href="https://twitter.com/hashtag/AMP?src=hash">#AMP</a>)
      <a href="https://twitter.com/hashtag/google?src=hash">#google</a>
      <a href="https://twitter.com/hashtag/seo?src=hash">#seo</a>
      <a href="https://t.co/eVOSAtr5Ax">https://t.co/eVOSAtr5Ax</a>
    </p>
    — Hongkiat (@hongkiat)
      <a href="https://twitter.com/hongkiat/status/765234426166915072">
        August 15, 2016</a>
  </blockquote>
</amp-twitter>

Guión para incluir:

1
2
3
<script async custom-element="amp-twitter"
    src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
</script>

3. amp-instagram

Con <amp-instagram>, puede insertar fotos y videos de Instagram en sus páginas AMP.

Debe especificar las dimensiones de la inserción con los atributos widthy height, y también debe agregar el identificador de la foto o video de Instagram usando el data-shortcodeatributo.

Puede encontrar el identificador al final de la URL, para el ejemplo de la foto debajo de la URL es https://www.instagram.com/p/-PFt7tF8Km/, así que necesito usarlo -PFt7tF8Kmcomo valor para el data-shortcodeatributo.

Ejemplo de código:

1
2
3
<amp-instagram data-shortcode="-PFt7tF8Km"
    width="400" height="400" layout="responsive">
</amp-instagram>

Vista previa del código:

Ejemplo de AMP Instagram

Para diseños receptivos , AMP calcula automáticamente el espacio requerido que también incluye el “Chrome de Instagram” (nombre de cuenta, fecha, número de me gusta, etc.).

Esto significa que puede usar cualquier valor para widthy height, hasta que los dos valores sean iguales (las fotos de Instagram suelen ser cuadradas), ya que el tiempo de ejecución de AMP cambiará el tamaño de la imagen de acuerdo con el espacio disponible.

Si la foto no es un cuadrado, debe especificar su valor real widthy height.

Para diseños fijos , debe incluir el espacio adicional (superior e inferior: +48 px, izquierda y derecha: + 8 px) necesario para el Chrome de Instagram cuando calcule las dimensiones de la imagen.

Guión para incluir:

1
2
3
<script async custom-element="amp-instagram"
    src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
</script>

4. amp-pinterest

<amp-pinterest>que permite incrustar o bien un widget de un pin o Pin It botón en un documento HTML AMP.

Insertar un widget de PIN

Para incrustar un widget de Pin, debe especificar las dimensiones, la URL del pin usando el data-urlatributo, y también debe agregar el data-do="embedPin"atributo.

Ejemplo de código (tamaño predeterminado):

1
2
3
<amp-pinterest width="245" height="330" data-do="embedPin"
  data-url="https://uk.pinterest.com/pin/422986589975891640/">
</amp-pinterest>

Como el widget Pin predeterminado es bastante pequeño, también puede optar por una versión más grande utilizando el data-width="medium"atributo.

Ejemplo de código (tamaño mediano):

1
2
3
4
<amp-pinterest width="355" height="410" data-do="embedPin"
  data-width="medium"
  data-url="https://uk.pinterest.com/pin/422986589975891640/">
</amp-pinterest>

Vista previa del código (tamaño mediano):

Ejemplo de AMP Pinterest
Mostrar un Pin It Button

También puede añadir un Pin It botón a su página de AMP con la ayuda del <amp-pinterest>componente. Además de las dimensiones widthy height, debe especificar cuatro atributos para insertar el botón Pin It :

  1. data-do="buttonPin"para que el tiempo de ejecución de AMP sepa que este será un botón Pin It
  2. data-url con la URL que quieres compartir
  3. data-media con la URL absoluta de la imagen que desea que los usuarios fijen
  4. data-description con la descripción que desea que aparezca en el formulario de creación de Pin

Hay muchos tamaños de botones diferentes , para elegir, consulte los documentos para todos los tamaños disponibles .

Ejemplo de código:

En este ejemplo, creé un botón Pin It que permitiría a los usuarios fijar una imagen de esta publicación anterior de Hongkiat.com . Usé el tamaño del botón rectangular pequeño.

1
2
3
4
5
6
7
8
9
10
<figure>
  <amp-img src="image.jpg" width="640" height="385"
        alt="Image Example">
  </amp-img>
  <amp-pinterest height="28" width="56" data-do="buttonPin"
        data-url="https://1000demonios.com/best-android-twitter-clients/"
        data-media="https://assets.hongkiat.com/uploads/thumbs/640x410/best-android-twitter-clients.jpg"
        data-description="Best 5 Free Twitter Clients for Android">
   </amp-pinterest>
</figure>

Vista previa del código:

Tenga en cuenta que debe usar CSS adicional para mostrar el botón Pin It en la parte superior de la imagen.

Ejemplo de botón PIN de AMP

También puede crear un botón Seguir de Pinterest utilizando el data-do="buttonFollow"atributo y especificando el nombre que desea mostrar dentro del botón Seguir en el data-label& la URL de su cuenta en el data-hrefatributo.

Ejemplo de código (botón Seguir):

1
2
3
4
<amp-pinterest height="20" width="87" data-do="buttonFollow"
  data-href="https://www.pinterest.com/hongkiat/"
  data-label="Hongkiat">
</amp-pinterest>

Guión para incluir:

1
2
3
<script async custom-element="amp-pinterest"
    src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
</script>

5. amp-soundcloud

SoundCloud es una popular plataforma de distribución de audio donde los usuarios pueden compartir su música. Con la ayuda del <amp-soundcloud>componente, puede reproducir pistas de SoundCloud directamente desde su página HTML de AMP.

Este componente solo se puede usar con fixed-heightdiseño, lo que significa que solo debe especificar el height, y el tiempo de ejecución de AMP calculará el ancho. Como resultado, el reproductor de audio SoundCloud integrado llenará todo el espacio horizontal disponible .

El <amp-soundcloud>componente se puede mostrar en modo clásico o visual . Puede elegir entre los dos modos estableciendo el valor del data-visualatributo en trueo false(el valor predeterminado es false).

En ambos modos, debe utilizar el data-trackidatributo para especificar el identificador del audio; Puede encontrar la ID de audio haciendo clic en el botón Compartir debajo del reproductor de audio en SoundCloud.com y buscando la URL de formato largo dentro del código de inserción.

Modo clásico

Las Classic Modepantallas de una imagen en miniatura de la izquierda, y el reproductor de audio a la derecha. Puede obtener el valor adecuado para el heightatributo del código de inserción en SoundCloud.com.

En el modo clásico, puede especificar el color del reproductor de audio si desea utilizar el data-coloratributo (no puede hacer esto en el modo visual).

Ejemplo de código (modo clásico):

1
2
3
<amp-soundcloud height="166" layout="fixed-height"
      data-trackid="264419072" data-color="ff5c44">
</amp-soundcloud>

Vista previa del código (modo clásico):

Modo clásico de AMP SoundCloud
Modo visual

En Visual Mode, la imagen destacada se extiende detrás del reproductor de audio. Aquí, también puede encontrar la heightpertenencia adecuada al Modo Visual en el código Embed en SoundCloud.com.

Ejemplo de código (modo visual):

1
2
3
<amp-soundcloud height="450" layout="fixed-height"
    data-trackid="264419072" data-visual="true">
</amp-soundcloud>

Ejemplo de código (modo visual):

Ejemplo de modo visual de AMP SoundCloud

Si desea incrustar un audio privado , use el data-secret-tokenatributo opcional .

Guión para incluir:

1
2
3
<script async custom-element="amp-soundcloud"
    src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js">
</script>

6. amp-vine

Vine es un sitio para compartir videos de formato corto en el que puede compartir videos de 6 segundos de duración con sus amigos. El <amp-vine>componente permite incrustar fácilmente videos de Vine en sus páginas HTML de AMP.

Este componente AMP es bastante simple, solo necesita agregar las dimensiones y el ID del video de Vine en el data-vineidatributo. Puede obtener el ID de la URL de cada Vine.

Como Vines son cuadrados, si usa el diseño receptivo, se aplica la misma regla que con las inserciones de Instagram; puede agregar cualquier valor a los atributos widthy height, hasta que sean iguales , funcionarán correctamente.

Ejemplo de código:

1
2
3
<amp-vine width="400" height="400"
    layout="responsive" data-vineid="hKQjlJPtWKT">
</amp-vine>

Vista previa del código:

Ejemplo de AMP Vine

Guión para incluir:

1
2
3
<script async custom-element="amp-vine"
    src="https://cdn.ampproject.org/v0/amp-vine-0.1.js">
</script>

7. amp-youtube

Puede incrustar videos de YouTube en páginas AMP con la ayuda del <amp-youtube>componente.

Para hacerlo, debe agregar las dimensiones, más el ID del video en el data-videoidatributo. Al especificar widthy height, es importante prestar atención a la relación de aspecto .

También puede utilizar los parámetros de las incrustaciones de YouTube en documentos AMP, simplemente inserte el nombre del parámetro después del data-param-prefijo .

Ejemplo de código:

En este ejemplo, startutilicé el parámetro de YouTube en el data-param-startatributo para que el video comenzara en 43 segundos.

1
2
3
<amp-youtube width="480" height="270" layout="responsive"
    data-videoid="n0PVwYoKQmo" data-param-start="43">
</amp-youtube>

Vista previa del código:

Ejemplo de AMP Youtube

Guión para incluir:

1
2
3
<script async custom-element="amp-youtube"
    src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
</script>
Otros servicios para compartir videos

AMP también tiene componentes relacionados con otros servicios para compartir videos, que funcionan de manera similar a<amp-youtube> . Puede usar los siguientes componentes AMP extendidos para incrustaciones de video de proveedores distintos de YouTube:

8. amp-social-share

Además de las incrustaciones de redes sociales, también puede mostrar botones de compartir en redes sociales en sus páginas AMP utilizando el <amp-social-share>componente.

La función de compartir en redes sociales está preconfigurada para algunos proveedores , pero con la configuración correcta puede usar el <amp-social-share>componente para cualquier otro botón de compartir en redes sociales.

Botones de compartir preconfigurados

Los botones para compartir preconfigurados no requieren demasiados ajustes; debe definir los widthatributos (el valor predeterminado es 60 px) y height(el valor predeterminado es 44 px) y el nombre del proveedor de redes sociales en el typeatributo.

Con Facebook, también debe especificar el ID de la aplicación de Facebook en el data-param-app_idatributo.

Ejemplo de código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
<div>
  <!-- Facebook -->
  <amp-social-share type="facebook" width="60" height="44"
      data-param-app_id="254325784911610">
  </amp-social-share>
 
  <!-- Twitter -->
  <amp-social-share type="twitter" width="60" height="44">
  </amp-social-share>
 
  <!-- Google Plus -->
  <amp-social-share type="gplus" width="60" height="44">
  </amp-social-share>
 
  <!-- Pinterest -->
  <amp-social-share type="pinterest" width="60" height="44">
  </amp-social-share>
 
  <!-- Linkedin -->
  <amp-social-share type="linkedin" width="60" height="44">
  </amp-social-share>
 
  <!-- Email -->
  <amp-social-share type="email" width="60" height="44">
  </amp-social-share>
</div>

Vista previa del código:

Ejemplo de AMP Social Share

La preconfiguración asume que la URL que desea compartir es la URL canónica de la página actual y el texto que desea incluir en su recurso compartido es el título de la página.

Si desea utilizar otra configuración, puede hacerlo con los siguientes tres atributos opcionales :

  1. data-text para el texto que desea incluir en el recurso compartido
  2. data-url para la URL que desea compartir
  3. data-attribution para el nombre de la persona o proveedor al que desea que se atribuya su parte
Botones de compartir no configurados

Para mostrar los botones de redes sociales de proveedores no configurados , como WhatsApp, debe especificar el protocolo personalizado del proveedor en el data-share-endpointatributo. Consulte en los documentos cómo puede hacer esto.

Guión para incluir:

1
2
3
<script async custom-element="amp-social-share"
    src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js">
</script>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *