Usar una imagen como botón para compartir en redes sociales

Llegar a esta solución fue un proceso frustrante y agotador que empezó por una búsqueda para quitarle la burbuja con cantidad de likes al botón de compartir de Facebook.Basicamente Twitter y Gmail te dan una solución rápida cuando configuras el código a través de sus sitios web peeeeero jodidamente Facebook no te da esta opción.


La única manera que encontré para quitar dicho globo es poner el botón en un contenedor con un overflow hidden y contar los pixeles para que no aparezca el puto globo ese, esto resultó en algo que nadie te cuenta en stackoverflow: la ventana de diálogo que aparece cuando le das like a algo aparece dentro de el contenedor que habías creado para ocultar la burbuja, después de que perdiste tanto tiempo te dan ganas de estrangular a Mark.


Derrotado y de capa caída me dije a mi mismo…entonces si no puedo ocultar este botón qué hago, y me dije a mi mismo….y sí pongo una imagen, esto lo eh visto en montón de sitios y no debe ser complicado, pero lo fue: básicamente porque yo lo que hacía era intentar cambiar con css los estilos de los botones de Facebook y oh desilusión cuando tampoco triunfé (por no decir que fracasé like a boss) pero después dije a ver marge vamos a copiar, me metí a awwwards y empecé a indagar como estos galanes lo hacían.


La solución


Después de toquetear un poco los share buttons de awwwards me di cuenta que ellos no estaban usando ninguno de los botones de Facebook, básicamente estaban abriendo una ventana emergente donde cargaban una URL para compartir seguida por el contenido que quieres compartir…booom



< href="#" onclick="window.open
('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebookshare','width=540,height=480,resizable=yes'); return false;"
class="facebook-btn-share" > Facebook < /a>






via Diseño Gráfico y La Pura Variedad