Dedica unos minutos a investigar en internet sobre los botones de redes sociales y encontrarás un montón de artículos que dicen que son una pérdida de tiempo.
Las quejas más comunes contra los botones sociales son:
- Baja interacción: Según los datos de clientes de Moovweb, el 99,8% de los usuarios móviles no usa los botones sociales y solo el 0,6% de los usuarios de escritorio se molesta en hacer clic para compartir.
- Menor rendimiento: La mayoría de los sitios usan plugins para crear sus botones sociales. Esto significa que los sitios deben cargar JavaScript y quién sabe qué más para que el plugin funcione, dejando a los visitantes esperando.
- Distracción: Los botones sociales distraen a los usuarios de las llamadas a la acción principales. Taloon.com realizó pruebas A/B en sus páginas de producto y descubrió que eliminar los botones de redes sociales aumentó la conversión en un 11,9%.
¡Vaya, acabo de dar un argumento excelente para eliminar los botones sociales por completo!
Pero no tan rápido: hay un fallo importante en estas críticas. Porque, en realidad, no se trata de los botones sociales en absoluto.
No se trata de los botones sociales, sino del contenido y el diseño
Una tasa de interacción del 0,6% suena terrible. Pero eso aún puede traducirse en muchas publicaciones compartidas si generas tráfico. Y una vez que se comparte, quién sabe hasta dónde llegará tu contenido. Más importante aún, estos datos agregados no nos demuestran que los botones sociales sean malos para el negocio.
De hecho, revelan que hay mucho contenido por ahí que simplemente no merece ser compartido. En otras palabras, se están tomando muchas malas decisiones de diseño.
Si estás distrayendo a la gente de tu llamada a la acción principal, esa es una mala decisión de diseño, no un problema con los botones sociales.
Si nadie usa tus botones sociales, pero los tienes en todas las páginas, es una mala decisión de diseño. Nadie quiere compartir tu página de términos de servicio. Céntrate en contenido que valga la pena compartir.
Si te preocupan los tiempos de carga, no uses plugins. Crea la experiencia tú mismo.
Afortunadamente, Webflow te da control total sobre tu contenido y diseño, así que puedes crear tus propios botones de redes sociales y asegurarte de que estén en los lugares correctos.
Así que vamos a ello.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Personalización de botones de redes sociales hecha fácil
Los botones de redes sociales están por todo internet, pero muchos usan servicios de terceros y scripts JS complicados que no siempre funcionan. Así que, aunque puedes usar algo como AddThis, usar el CMS de Webflow con algo de HTML y CSS sencillo para crear una experiencia totalmente personalizada puede mejorar el rendimiento. Además, es mucho más divertido.
Esto es lo que queremos construir: alguien pasa el cursor sobre un icono de Twitter, que cambia de blanco al azul de Twitter. Cuando hacen clic en el icono, se abre una nueva ventana que les da la opción de tuitear el título y el enlace del artículo.
Paso 1: Diseña tu icono
Empezaremos diseñando el icono en Webflow para probar cómo funcionarán los estilos en nuestro diseño y crear el CSS que usaremos más adelante.
Primero, añade un bloque de enlace al diseño. Yo uso Font Awesome para incorporar iconos rápidamente, y así puedo darles estilo usando los controles de tipografía de Webflow. Me resulta más fácil que usar iconos basados en imágenes que tendría que editar en Photoshop o Sketch.
Para dar estilo al icono, añadiremos una clase al bloque de enlace y la llamaremos “share-button”. Luego usaremos esta clase para definir el aspecto y el color del texto de los iconos de Font Awesome en su estado normal. Elegí un color blanco roto (#ede9e1), pero puedes usar el que mejor se adapte a tu diseño.
A continuación, en esta misma clase, añadiremos una transición para controlar cómo se verá el icono al pasar el ratón por encima. Al aplicarla a esta clase, nos aseguramos de que todos los botones sociales compartan este comportamiento. En el panel de Estilo, desplázate hasta la sección de Transiciones y Transformaciones y añade una transición que afecte al color.
A partir de aquí, crearemos una clase combinada para cada botón social, de modo que podamos personalizar el color que aparece al pasar el ratón por encima.
Así, este primer botón recibe una clase combinada llamada “twitter”. Selecciona el estado hover en el menú desplegable de estados. En la sección de Tipografía, cambia el color de la fuente al azul de Twitter: #1da1f2. Puedes repetir este paso para otras plataformas sociales creando una nueva clase combinada para cada red.
Muy bien, el CSS ya está listo.
Paso 2: Añadir y editar el código de compartir personalizado de Twitter
Ahora, un poco de código personalizado. Primero, añade un componente Embed a tu sitio donde quieras que aparezca el botón. Luego, copia y pega el siguiente código en el Embed:
<a href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"
<div>Twitter</div>
</a>
Luego, reemplaza el texto “Twitter” con el código corto de Font Awesome para un icono de Twitter:
<a href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"
<div></div>
</a>
Añade los nombres de clase que creaste en el paso 1 al elemento de enlace (es decir, “share-button twitter”) para el botón de Twitter.
<a class="share-button twitter"
href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"
<div></div>
</a>
Nota: las clases combinadas se separan con un espacio.
Si quieres, también puedes añadir un poco de JavaScript para que se abra una nueva ventana emergente en lugar de una nueva pestaña, lo cual queda mucho mejor y es menos molesto:
onclick="window.open(this.href, 'twitter-share','width=580,height=296');return false;”
(Gracias a Jason Gipson por encontrarlo).
El código actualizado queda así:
<a onclick="window.open(this.href, 'twitter-share','width=580,height=296');return false;”
class="share-button twitter"
href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"<div></div></a>
Para conseguir el código equivalente para otras redes sociales, echa un vistazo a los "Botones para compartir en HTML puro" de Gregory Schier.
Paso 3: Conecta el elemento incrustado a tu colección
El último paso es conectar los datos del CMS al enlace para compartir, sustituyendo los elementos <URL>, <TEXT> y <USERNAME> del código genérico por tus propios datos.
Para <URL>, escribe la URL raíz de todas tus entradas de blog, terminando con una barra diagonal. Luego, inserta el campo "Slug" del CMS después de esa última barra.
Normalmente, estos botones incluyen el título del artículo en el tuit. Así que sustituiremos <TEXT> por el campo "Nombre" (o el campo que utilices para los títulos, si no es el de Nombre).
Por último, pero no menos importante, sustituye <USERNAME> por tu nombre de usuario de Twitter.
Consejo pro
Si tienes un blog con varios autores, crea una colección llamada Autores e incluye sus nombres de usuario de Twitter en un campo para que puedas extraer ese dato directamente al código.
¡Y listo!
Movimiento avanzado: Crea contenido para hacer clic y tuitear
Puedes ponerte aún más creativo ofreciendo a tus visitantes contenido preescrito para compartir; diseñar un módulo atractivo para animarles a hacerlo realmente mejora la experiencia.
Para ello, añade un campo de texto a tu colección de blog y llámalo Tweet. Luego, diseña un elemento en la página que muestre el tweet como texto y repite los pasos anteriores para crear el botón.
Pero esta vez, en lugar de usar el campo Nombre para reemplazar <TEXT>, usa el campo Tweet. Así es exactamente como funciona el botón de "clic para tuitear" del blog de Webflow.
Y así es como funciona.
Para ver un tutorial detallado sobre esto, echa un vistazo a “Cómo insertar dinámicamente botones de compartir de Twitter en Webflow”.
¿Tienes alguna pregunta o ejemplos de botones sociales creativos? ¡Compártelos en los comentarios de abajo!
