Cada botón de compartir en su red social no es otra cosa que una llamada a un programa en el servidor de la red social que permite publicar algo. Todo ello rodeado de un logo y un buen trozo de javascript, que hacen opaco el proceso, dificultando por ejemplo personalizar el aspecto del botón o modificar la petición.
Por otro lado, los códigos ofrecidos por cada red social que construyen los botones de compartir, solicitan el logo y algo más de información a los servidores de la red social, así que muchas veces tardan en cargarse en exceso o dan otros problemas en función de la disponibilidad del servidor remoto de la red social.
La llamada al programa para compartir de cada red social se realiza mediante URL, así que si conocemos la URL podemos ejecutarlo mediante un simple enlace, al que daremos el aspecto que queramos. Con parámetros en la URL podemos personalizar la petición como queramos.
Por ejemplo, para esta entrada, la siguiente URL llamaría al programa de compartir de Twitter :
http://twitter.com/home?status=Botones+de+compartir+en+redes+sociales+personalizados+y+sin+javascript%20http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263%20v/%20@skotperez
Para Facebook, la URL sería:
http://facebook.com/sharer.php?u=http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263
Para Google Plus:
https://plus.google.com/share?url=http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263
Para Tumblr:
http://www.tumblr.com/share/link?url=http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263&name=Botones+de+compartir+en+redes+sociales+personalizados+y+sin+javascript&description=Cada+botón+de+compartir+en+su+red+social+no+es+otra+cosa+que+una+llamada+a+un+programa+en+el+servidor+de+la+red+social+que+permite+publicar+algo...
Para Linkedin:
https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263&title=Botones+de+compartir+en+redes+sociales+personalizados+y+sin+javascript&summary=Cada+botón+de+compartir+en+su+red+social+no+es+otra+cosa+que+una+llamada+a+un+programa+en+el+servidor+de+la+red+social+que+permite+publicar+algo...&source=Autonomía+digital+y+tecnológica
Y para Pinterest, aunque no tiene mucho sentido en este blog porque no suele haber imágenes (por eso el parámetro media queda vacío), sería algo así:
http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263&media=&description=Botones+de+compartir+en+redes+sociales+personalizados+y+sin+javascript
Y así con todas las redes sociales. Lo único que hay que cuidar es que los valores que pasamos mediante los parámetros en la URL tengan el formato adecuado. Para asegurarnos, podemos usar la función urlencode() de PHP.
$permalink = urlencode("https://voragine.net/weblogs/botones-en-compartir-en-redes-sociales-personalizados-y-sin-javascript");
$titulo = urlencode("Botones de compartir en redes sociales personalizados y sin javascript");
14 comentarios
Muy buen post, fue de gran ayuda!!
Saludos
Buenas!
Muy buena la explicación, pero como hago para que aparezca el titulo y el texto en la página de facebook que se abre al clickar el botón? Yo he seguido tus instrucciones y lo unico que me aparece es mi dominio.
Saludos y gracias
Hola Sandra,
para que te aparezca el título, un pequeño texto e incluso una imagen en Facebook y en Twitter tienes que añadir unas líneas en la sección head de tu página. Puedes seguir este otro tutorial.
Muchas gracias por la explicación y pasarme el tutorial, seguiré las indicaciones y espero lograrlo, ;-)
Muchas gracias! Muy interesante y fácil!
Por otro lado, ¿sabes si hay alguna manera de añadir el contador de veces compartido a estos botones personalizados?
Hola Fernando,
Al igual que el enlace para compartir, el contador es diferente para cada red social y depende de las reglas que cada una defina en su API.
En la mayoría de los casos no es posible obtener el contador sin usar el botón javascript que ofrece cada red social.
Así que no, si quieres usar botones sin javascript no tendrás contador.
Buen tutorial amigo, disculpa te quisiera pregunta, como se podría hacer para que la llamada al sitio web de la red social, tome automáticamente la url actual desde la que se le llamó? y coloque también el título de la entrada?. Actualmente me encuentro creando una plantilla para «Blogger» y al no poder hacer uso de php no tengo idea de como podría lograrlo. Espero puedas ayudarme. Saludos
Hola Pedro,
no hace falta PHP para hacer lo que se explica en este artículo. Sencillamente tienes que crear un enlace con la URL que se especifica en el artículo para cada red social.
Por ejemplo, para Twitter: http://twitter.com/home?status=Botones+de+compartir+en+redes+sociales+personalizados+y+sin+javascript%20http%3A%2F%2Fvoragine.net%2F%3Fp%3D1263%20v/%20@skotperez
Verás que esta URL incluye ya el título, y la URL de la página que se quiere compartir.
Exacto eso lo he comprendido, pero lo que pregunto, es si existe alguna forma de rellenar el área en donde va el link automáticamente y no colocarlo de forma manual en cada página en donde quiera colocar el botón de share. Me explico:
Si estoy en mipagina.com/entrada-de-prueba.html que al darle clic al enlace de compartir, automáticamente se rellene de la forma: http://twitter.com/home?status=mipagina.com/entrada-de-prueba.html y que yo no tenga que pegarlo manualmente, ya que en un blog tengo cientos de entradas y hacerlo manual sería una tarea titánica.
No había entendido. En efecto, sin PHP no es evidente automatizar este tipo de cosas.
Sin embargo, las herramientas que pone a disposición cada red social para incrustar sus botones en cualquier web detecta la URL de la página automáticamente. Mira por ejemplo twitter.
Si lo quieres hacer con este tipo de botones sin javascript que cuento en el artículo, se me ocurre que puedes exportar los contenidos en un formato XML o JSON para poder editar automáticamente e insertar en cada entrada el enlace, con un editor como vim o emacs que te permita manejar expresiones regulares y variables. Luego importar el contenido modificado.
Perfecto, probaré hacerlo de la manera que se te a ocurrido a ver si logro dar en el clavo. Muchas gracias por la ayuda!. Un saludo
Estoy haciendo un diseño de una página web para un cliente. Y me he topado con la necesidad de hacer un botón que al hacer clic sobre él, abra la página de Facebook del cliente. He utilizado los códigos de facebook que da en su página para desarrolladores pero lo que sucede es que dicho código abré la página de facebook del cliente pero lo abre en el navegador y para el caso de móviles, lo que busco es que abra la página del cliente pero en la aplicación de facebook en android. No se como hacerlo, la verdad. No se si tu sabes como hacerlo? Te agradezco de antemano… Slds.
Hola,
no conozco una manera limpia de hacerlo. En este hilo de stackoverflow hay algunas ideas.
Gracias voy a ver el hilo este hilo de stackoverflow para ver q encuentro…slds.