Como agregar en páginas AMP botones de compartir en las redes sociales 335827
Códigos para mostrar los botones de Facebook, Google+, Twitter, Pinterest, Linkedin y para enviar por email, en las páginas aceleradas AMP. Como usar la extensión "social share". Ejemplos prácticos.
En las páginas aceleradas AMP que cada vez se vuelven más populares, necesitamos mostrar los botones de compartir en las principales redes sociales de internet, para facilitar que nuestros lectores las compartan adecuadamente.
Se hace de forma diferente que en las páginas tradicionales, debido a las restricciones del formato AMP, con el objetivo que carguen rápidamente.
En estas páginas no valen los scripts que ofrecen los sitios sociales, porque en caso de usarlos no validaran correctamente.
No obstantes es posible agregar varios botones y no es nada difícil, como mostramos en este sencillo artículo.
Como insertar botones de compartir en páginas aceleradas 2t4j2f
Para agregar los botones de compartir en las páginas aceleradas AMP debemos de usar la extensión "social share" (amp-social-share).
Para eso es necesario cargar el script insertando la siguiente línea de código, en el área del HEAD:
Después de eso debemos de insertar en el lugar exacto de la página donde deseamos que se muestren los botones, que puede ser el encabezado o el final, las etiquetas necesarias para cada red social.
Las redes sociales pre-configuradas actualmente en la extensión son las siguientes: Facebook, Google+, Twitter, Pinterest, Linkedin y la opción del Email.
Otras redes necesitan usar parámetros adicionales como se describe en la ayuda, disponible en Github.
Códigos de ejemplo 534c1n
Los siguientes códigos de ejemplo usan las opciones elementales y requeridas para mostrar los botones de las 5 redes sociales pre-configuradas.
Siempre se obtiene la dirección de la página a compartir de la etiqueta rel="canonical".
Si la página no usa esta etiqueta o se desea compartir una página diferente se puede emplear el parámetro opcional "data-param-href", para especificar la dirección URL necesaria.
Se emplean los botones oficiales de las redes sociales con un tamaño de 60 pixeles de ancho por 44 de altura, aunque este estilo se puede modificar con CSS.
Insertar el botón de compartir en Facebook en AMP 2f172g
El botón de compartir en Facebook solo necesita del siguiente código:
Es requerido el parámetro "data-param-app_id", con el número de identificación de la App de Facebook.
Es opcional el siguiente parametro:
data-param-text="Texto"
Ejemplo:
Insertar el botón de compartir en Google Plus en AMP 5m611q
El botón de Google+ solo requiere del siguiente código:
Este botón permite a los lectores enviar un correo electrónico a otra persona.
En el mensaje de forma predeterminada el asunto será el título de la página y en el cuerpo incluirá un enlace con su dirección URL.
Usa el siguiente código: