Paraíso Para Los Diseñadores Y Desarrolladores

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

El conflicto más grande que el estándar web móvil de Google, Accelerated Mobile Pages necesita resolver, hace que los sitios móviles sean más rápidos, a la vez que los mantiene funcionales y ricos en contenido . En estos días, difícilmente se puede imaginar un contenido rico y atractivo sin incrustaciones de sitios de redes sociales populares: tweets, videos, audios, publicaciones, fotos.

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

Cómo funcionan los componentes ampliados de AMP

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, las normas de AMP restringen la forma en que puede usar las tecnologías de front-end . Por ejemplo, no puede usar JavaScript personalizado, hojas de estilo externas ni ningún elemento HTML que cargue recursos externos, como etiqueta.

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

Los componentes AMP son etiquetas HTML específicas que se pueden usar de manera 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 posibilitan la integración de las redes sociales en las páginas de AMP son todos componentes ampliados .

Los componentes ampliados de AMP requieren que importe la secuencia de comandos correspondiente en el sección de su documento AMP HTML. Como AMP es un proyecto de código abierto, la cantidad de componentes ampliados puede crecer en el futuro.

En esta publicación, hemos recopilado un puñado de componentes de 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 tanto, siempre revise la documentación antes de incluirla en su sitio.

1. `amp-facebook`

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

Siempre debe especificar las dimensiones de la publicación incrustada, lo que significa que debe agregar un width y un atributo de height 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 en el atributo data-href . 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 atributo opcional data-embed-as="video"

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

Ejemplo de código:

Vista previa del código:

Script para incluir:

2. `amp-twitter`

Puede incrustar tweets en páginas AMP utilizando el componente.

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

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

Ejemplo de código:

Vista previa del código:

los el componente aún no es perfecto, los documentos de Github dicen que Twitter no proporciona actualmente una API que produzca incrustaciones de Tweet de relación de aspecto fija .

Esto significa que debe configurar manualmente los atributos de width y height, 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 integrados antes de publicar la página de AMP.

Añadir 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 atributo de placeholder se puede usar 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 .

Observe 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 incrustado (sin el script al final) y agregué el atributo placeholder al

etiqueta.
Ejemplo de código con marcador de posición:
 Cómo validar páginas móviles aceleradas ( )
- Hongkiat (@hongkiat) 
Script para incluir:
3. amp-instagram
Con , puede insertar fotos y videos de Instagram en sus páginas de AMP.
Debe especificar las dimensiones de la inserción con los atributos de width y height, y también debe agregar el identificador de la foto o video de Instagram utilizando el atributo de data-shortcode .
Puede encontrar el identificador al final de la URL, para el ejemplo de la foto a continuación, la URL es https://www.instagram.com/p/-PFt7tF8Km/, así que necesito usar -PFt7tF8Km como valor para los data-shortcode atributo de data-shortcode .
Ejemplo de código:
Vista previa del código:
Para diseños receptivos, AMP calcula automáticamente el espacio requerido que también incluye el "Instagram chrome" (nombre de la cuenta, fecha, número de me gusta, etc.).
Esto significa que puede usar cualquier valor para width y height, hasta que los dos valores sean iguales (las fotos de Instagram usualmente son 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 sus valores reales de width y height .
Para diseños fijos, debe incluir el espacio adicional (arriba y abajo: +48 px, izquierda y derecha: + 8px) necesarios para el cromo de Instagram cuando calcule las dimensiones de la imagen.
Script para incluir:
4. amp-pinterest
le permite incrustar un widget Pin o un botón Pin It en un documento HTML de AMP.
Insertar un widget de PIN
Para incrustar un widget Pin, debe especificar las dimensiones, la URL del pin usando el atributo data-url, y también debe agregar el atributo data-do="embedPin" .
Ejemplo de código (tamaño predeterminado):
Como el widget Pin predeterminado es bastante pequeño, también puede optar por una versión más grande utilizando el atributo data-width="medium" .
Ejemplo de código (tamaño mediano):
Vista previa del código (tamaño mediano):
Mostrar un botón Pin It
También puede agregar un botón Pin It a su página AMP con la ayuda de componente. Además de las dimensiones de width y height, debe especificar cuatro atributos para incrustar el botón Pin It:
data-do="buttonPin" para que el tiempo de ejecución de AMP sepa que este será un botón Pin It
data-url con la URL que desea compartir
data-media con la URL absoluta de la imagen que desea que los usuarios anoten
data-description con la descripción que desea que aparezca en el Pin crear formulario
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 antigua publicación de Hongkiat.com. Usé el pequeño tamaño de botón rectangular.
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.
También puede crear un botón Follow de Pinterest utilizando el atributo data-do="buttonFollow" y especificando el nombre que desea mostrar dentro del botón Seguir en la data-label y la URL de su cuenta en el atributo data-href .
Ejemplo de código (botón Seguir):
Script para incluir:
5. amp-soundcloud
SoundCloud es una popular plataforma de distribución de audio donde los usuarios pueden compartir su música. Con la ayuda de la componente puede reproducir pistas SoundCloud directamente desde su página AMP HTML.
Este componente solo se puede usar con fixed-height diseño de fixed-height que significa que solo necesita especificar la height, y el ancho será calculado por el tiempo de ejecución de AMP. Como resultado, el reproductor de audio SoundCloud integrado llenará todo el espacio horizontal disponible .
los componente se puede mostrar en modo clásico o visual . Puede elegir entre los dos modos estableciendo el valor del atributo de data-visual en true o false (el valor predeterminado es false ).
En ambos modos, debe usar el atributo data-trackid 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 larga en el código de Incrustar.
Modo clásico
El Classic Mode muestra una pequeña imagen en miniatura a la izquierda y el reproductor de audio a la derecha. Puede obtener el valor correcto para el atributo de height del código de inserción en SoundCloud.com.
En el modo clásico, puede especificar el color del reproductor de audio si lo desea utilizando el atributo de data-color (no puede hacer esto en el modo Visual).
Ejemplo de código (modo clásico):
Vista previa del código (modo clásico):
Modo Visual
En el Visual Mode, la imagen mostrada se extiende detrás del reproductor de audio. Aquí, también puede encontrar la height adecuada que pertenece al modo Visual en el código de incrustación en SoundCloud.com.
Ejemplo de código (modo visual):
Ejemplo de código (modo visual):
Si desea incrustar un audio privado, use el atributo opcional data-secret-token .
Script para incluir:
6. amp-vine
Vine es un sitio de intercambio de videos cortos en el que puedes compartir videos largos de 6 segundos con tus amigos. los componente hace posible 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 Vine en el atributo data-vineid . Puedes obtener la ID de la URL de cada Vine.
Como Viñas son cuadrados, si usa el diseño receptivo, se aplica la misma regla que con las incrustaciones de Instagram; puede agregar cualquier valor a los atributos de width y height, hasta que sean iguales, funcionarán correctamente.
Ejemplo de código:
Vista previa del código:
Script para incluir:
7. amp-youtube
Puede incrustar videos de YouTube en páginas AMP con la ayuda de componente.
Para hacerlo, debe agregar las dimensiones, más el ID del video en el atributo data-videoid . Al especificar el width y la height, es importante prestar atención a la relación de aspecto .
También puede usar los parámetros de las incrustaciones de YouTube en documentos AMP, solo inserte el nombre del parámetro después del prefijo data-param- .
Ejemplo de código:
En este ejemplo, utilicé el parámetro start YouTube en el atributo data-param-start para hacer que el video comience en 43s.
Vista previa del código:
Script para incluir:
Otros servicios de intercambio de videos
AMP también tiene componentes relacionados con otros servicios de intercambio de videos, que funcionan de manera similar a . Puede utilizar los siguientes componentes ampliados de AMP para incrustaciones de video de proveedores que no sean YouTube:
para las incrustaciones de Vimeo
para las incrustaciones Dailymotion
para Brightcove embeds
8. amp-social-share
Además de las incrustaciones de medios sociales, también puede mostrar los botones sociales para compartir en sus páginas AMP utilizando el componente.
La característica de compartir social está preconfigurada para algunos proveedores, pero con la configuración correcta puede usar componente para cualquier otro botón de compartir social.
Botones de compartir preconfigurados
Los botones de acciones preconfigurados no requieren demasiadas configuraciones; debe definir los atributos de width (predeterminado es 60px) y height (predeterminado es 44px) y el nombre del proveedor de medios sociales en el atributo de type .
Con Facebook, también debe especificar el ID de la aplicación de Facebook en el atributo data-param-app_id .
Ejemplo de código:
Vista previa del código:
La preconfiguración hace suposiciones de 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 :
data-text para el texto que desea incluir en el recurso compartido
data-url de data-url para la URL que desea compartir
data-attribution de data-attribution para el nombre de la persona o proveedor al que desea que se le atribuya su parte
Botones de compartir desconfigurados
Para mostrar los botones de compartir redes sociales de proveedores no configurados, como WhatsApp, debe especificar el protocolo personalizado del proveedor en el atributo de data-share-endpoint . Consulte en los documentos cómo puede hacer esto.
Script para incluir:
Marcas más valiosas de 2017 en un país [Infografía]

¿Alguna vez te has preguntado cuál es la marca más grande del mundo ? Si lo hace, entonces esta infografía hecha por Howmuch.net le interesará, ya que es un mapa que muestra las marcas más valiosas de 2017, así como la fuerza de su marca, en una serie de países de todo el mundo. Si bien el mapa no enumera las marcas más valiosas de todos los países, el mapa resalta algunas de las marcas más importantes del mundo. Google se

(Consejos de tecnología y diseño)

40 excelentes juegos de mini iconos

Cuando vas en busca de iconos para tus diseños, puedes terminar con diferentes tipos de íconos, algunos íconos muti-fineses y otros muy específicos del nicho. Sin embargo, cuando diseña aplicaciones móviles o web, necesita un conjunto de mini iconos .Por lo tanto, para todos aquellos que buscan diseñar pantallas móviles, aquí hay 40 conjuntos de iconos mini de alta calidad y creativos . Puede d

(Consejos de tecnología y diseño)