8 componentes de AMP para la integración de redes sociales

El mayor conflicto que el estándar de web móvil de Google., Páginas Móviles Aceleradas necesita resolver es haciendo que los sitios móviles sean más rápidos, mientras manteniéndolos funcionales y ricos en contenido. En estos días, el contenido rico y atractivo difícilmente se puede imaginar sin incrustaciones de sitios de redes sociales populares: tweets, videos, audios, publicaciones, fotos..

Componentes AMP extendidos - Entre otras excelentes características, proporcionan una excelente manera de integrar AMPERIO Documentos con diferentes tipos de contenido social..

Cómo funcionan los componentes AMP extendidos

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

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

Los componentes de AMP son etiquetas HTML específicas que se puede utilizar de forma similar a las etiquetas HTML ordinarias. Algunos de ellos son construido en al tiempo de ejecución de AMP, mientras que la mayoría funciona como extensiones. Componentes que hacen posible la integración de las redes sociales en las páginas de AMP. son todos los componentes extendidos.

Los componentes AMP extendidos requieren que usted importar el script de pertenencia en el sección de su documento AMP HTML. 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 de AMP que pueden ayudarlo. con integración en redes sociales. Tenga en cuenta que las versiones de los scripts puede cambiar con el tiempo, así que siempre revise la documentación antes de incluirlos en su sitio.

1. amp-facebook

hace posible incrustar una publicación de Facebook o un video en una página AMP.

Siempre necesitas Especifique las dimensiones de la publicación incrustada., lo que significa que necesita agregar un anchura y un altura 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 se requiere que añadir la URL de la publicación dada en el datos-href atributo. 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 quieres Insertar un video sin la publicación de Facebook correspondiente., agrega el opcional data-embed-as = "video" atributo

Si quieres haz que tu incrustación sea receptiva utilizar el diseño atribuir con el "sensible" valor. También puede utilizar el opcional diseño atributo en cualquier otro componente AMP para controlar su diseño.

Ejemplo de código:

Vista previa del código:

Guión para incluir:

2. amp-twitter

Usted puede insertar tweets en páginas AMP utilizando el componente.

Para hacerlo, necesitas Especifique el ID del tweet en el tweetid de datos atributo. Puede modificar la forma en que se muestra el tweet agregando cualquiera de las opciones de visualización de la APi de Twitter como una datos-* Atributo HTML5.

Por ejemplo, en el siguiente ejemplo utilicé las API de Twitter Color de enlace opción de pantalla como color de enlace de datos (sus datos-* Formato) para cambiar el color del enlace predeterminado al color que usa Hongkiat.com en su cuenta de Twitter.

Ejemplo de código:

Vista previa del código:

los componente aún no es perfecto, docs dice Github que Actualmente, Twitter no proporciona una API que genere una relación de aspecto fija..

Esto significa que necesitas establecer manualmente el anchura y altura atributos, como 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 los tweets incrustados antes de publicar la página AMP..

Añadir un marcador de posición

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

los marcador de posición atributo se puede utilizar en cada componente de AMP. El marcador de posición es mostrado inmediatamente Si los recursos finales no están disponibles. Cuando el elemento AMP se carga, 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é la secuencia de bloque incrustable (sin la secuencia de comandos al final), y añadí marcador de posición atribuir a la

etiqueta.

Código de ejemplo con marcador de posición:

  
 
Cómo validar las páginas móviles aceleradas#AMPERIO) #google #seo https://t.co/eVOSAtr5Ax 
 - Hongkiat (@hongkiat)  15 de agosto de 2016 
  

Guión para incluir:

3. amp-instagram

Con , usted puede incrustar fotos y videos de Instagram en sus páginas AMP.

Usted está obligado a especifique las dimensiones del embed con el anchura y altura atributos, y también tienes que agrega el identificador de la foto o video de Instagram usando la código de datos atributo.

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 usar -PFt7tF8Km como valor para el código de datos atributo.

Ejemplo de código:

Vista previa del código:

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

Esto significa que puedes usar cualquier valor para anchura y altura, hasta el dos valores son iguales (Las fotos de Instagram suelen ser cuadradas), ya que el tiempo de ejecución de AMP cambiará el tamaño de la imagen según el espacio disponible.

Si la foto no es un cuadrado, debe especificar su real anchura y altura valores.

por diseños fijos, necesitas incluir el espacio extra (arriba y abajo: +48 px, izquierda y derecha: + 8px) necesario para el cromo de Instagram al calcular las dimensiones de la imagen.

Guión para incluir:

4. amp-pinterest

Te permite incrustar un widget Pin o un botón Pin It en un documento HTML AMP.

Insertar un widget de pin

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

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

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

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

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

Mostrar un botón Pin It

Tú también puedes agregar un botón Pin It a su página AMP con la ayuda de la componente. Aparte de la anchura y altura dimensiones, eres Se requiere especificar cuatro atributos. Para incrustar 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. url de datos con la URL que quieres compartir
3. medios de datos con la URL absoluta de la imagen que desea que los usuarios fijen
4. descripción de los datos con la descripción que desea que aparezca en el formulario de creación de Pin

Existen muchos tamaños diferentes de botones, para elegir, compruebe 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 anclar una imagen de esta antigua publicación de Hongkiat.com. Utilicé el botón pequeño de tamaño rectangular..

Vista previa del código:

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

También puede crear un botón Seguir de Pinterest usando el data-do = "buttonFollow" atributo, y especificando el nombre que desea mostrar dentro del botón Seguir en el etiqueta de datos y la URL de su cuenta en el datos-href atributo.

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

Guión para incluir:

5. amplificador-soundcloud

SoundCloud es una popular plataforma de distribución de audio donde los usuarios pueden compartir su música. Con la ayuda del componente que puedas reproducir pistas de SoundCloud directamente desde su página AMP HTML.

Este componente puede solo ser usado con altura fija diseño lo que significa que solo necesitas especificar el altura, y el ancho será calculado por el tiempo de ejecución de AMP. Como resultado, el reproductor de audio integrado SoundCloud Rellena todo el espacio horizontal disponible..

los componente se puede mostrar en modo clásico o visual. Puede elegir entre los dos modos configurando el valor del datos visuales atribuir a cualquiera cierto o falso (el valor predeterminado es falso).

En ambos modos, tienes que usar el datos-trackid atribuir a especifique 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 incrustación.

Modo clásico

los Modo clásico muestra una pequeña imagen en miniatura a la izquierda y el reproductor de audio a la derecha. Usted puede obtener el valor adecuado para el altura atributo del código de inserción en SoundCloud.com.

En el modo clásico, puede especificar el color del reproductor de audio si desea usar el color de datos atributo (no puedes hacer esto en modo visual).

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

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

Modo visual

En Modo visual, La imagen mostrada se extiende detrás del reproductor de audio. Aquí, también puede encontrar la adecuada altura perteneciente al modo visual en el código de inserción en SoundCloud.com.

Ejemplo de código (modo visual):

Ejemplo de código (modo visual):

Si quieres incrustar un audio privado, usar el opcional token de secreto de datos atributo.

Guión para incluir:

6. amp-vid

Vine es un sitio para compartir videos de forma corta en el que puedes compartir videos de 6 segundos de duración con tus amigos. los componente hace posible fácilmente incrustar videos de Vine en sus páginas HTML de AMP.

Este componente de AMP es bastante simple, solo necesita agregar las dimensiones y el ID del video de Vine en el datos de vid atributo. Puedes obtener el ID desde la URL de cada Vine.

Como Vines son cuadrados, si usa el diseño sensible, se aplica la misma regla que con las incrustaciones de Instagram; Usted puede agregar cualquier valor a la anchura y altura atributos, hasta que sean iguales trabajarán adecuadamente.

Ejemplo de código:

Vista previa del código:

Guión para incluir:

7. amp-youtube

Usted puede incrustar videos de YouTube en las páginas de AMP con la ayuda de la componente.

Para hacerlo, debe agregar las dimensiones, más la identificación del video en el datos de video atributo. Al especificar anchura y altura, Es importante prestar atención a la relación de aspecto.

Tú también puedes Usa los parámetros de incrustaciones de YouTube. en los documentos AMP, simplemente inserte el nombre del parámetro después de la datos-param- prefijo.

Ejemplo de código:

En este ejemplo, hice uso de la comienzo Parámetro de YouTube en el data-param-start atributo para hacer que el video comience a los 43s.

Vista previa del código:

Guión para incluir:

Otros servicios para compartir videos

AMP también tiene componentes relacionados con otros servicios para compartir videos, que trabajar de manera similar a . Puede usar los siguientes componentes AMP extendidos para incrustaciones de video de proveedores que no sean YouTube:

• para incrustaciones Vimeo
• para incrustaciones Dailymotion
• para incrustaciones Brightcove

8. amp-social-share

Además de las incrustaciones en redes sociales, también puedes mostrar botones de compartir en redes sociales en sus páginas AMP utilizando el componente.

La función de compartir en redes sociales es preconfigurado para algunos proveedores, pero con la configuración correcta puede utilizar el Componente para cualquier otro botón de compartir en redes sociales..

Botones de acción preconfigurados

Botones de acción preconfigurados no requiere demasiados ajustes; tienes que definir el anchura (por defecto es 60px) y altura (el valor predeterminado es 44px) los atributos, y el nombre del proveedor de redes sociales en el tipo atributo.

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

Ejemplo de código:

Vista previa del código:

La pre-configuración hace suposiciones 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 es el título de la página.

Si desea utilizar otra configuración, puede hacerlo con lo siguiente tres atributos opcionales:

1. texto de datos Para el texto que desea incluir en el recurso compartido.
2. url de datos para la URL que quieres compartir
3. atribución de datos para el nombre de la persona o el proveedor al que desea que se le atribuya su parte

Botones de compartir no configurados

Para mostrar los botones de compartir sociales de proveedores no configurados, como WhatsApp, necesitas Especifique el protocolo personalizado del proveedor. en el punto final de datos compartidos atributo. Consulte en la documentación cómo puede hacer esto..

Guión para incluir: