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. Básicamente Twitter y Google plus 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 me encontré con Share dialog

< 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>

Destripando este código entonces tenemos un bonito enlace con un javascript que abre una ventana flotante cuando le das click https://www.facebook.com/sharer/sharer.php?u= esta url carga la aplicación para compartir en facebok, +encodeURIComponent(location.href) este código básicamente es para decir comparte el contenido de la página en la que estás navegando actualmente, pero tu puedesponer aqui la url de lo que quieras compartir, ‘facebookshare’ es el nombre que tendrá la ventana, no olvidar que internet explorer es un poco naco y si le ponen un nombre con signos, mayúsculas o muy largo no lo abrirá, por último ‘width=540,height=480,resizable=yes’ es el tamaño que le daremos a nuestra bonita ventana flotante.
Y como somos muy decentes a este le damos una class a dicho enlace en donde le decimos con css “quiero tenga una imagen de fondo”

Y en resumen, tanto google plus (https://plus.google.com/share?url=) como twitter (http://twitter.com/share?url=)tienen sus versiones de este código y es mucho más flexible de usar para que tus usuarios compartan o le den like a tu página

Este gordo es la pura onda

Tags: CSS