Una de las tareas pendientes en el blog era mejorar el aspecto visual de los botones para compartir los artículos en redes sociales. Anteriormente utilizaba los botones por defecto que ofrece cada red social, los cuales me habían dado terribles dolores de cabeza para alinearlos entre sí, y no tenían una vista uniforme. Cada uno utilizaba la fuente, colores y estilo de cada red social. Pero además, cada botón cargaba scripts y hojas de estilo desde sitios externos de manera "render blocking", lo cual estaba retrasando notablemente el tiempo de carga de las páginas. Algo muy perjudicial para la experiencia de los usuarios (ustedes) y para el posicionamiento (Google sabe que a los usuarios les gusta que las páginas carguen rápido, por ello quiere ofrecerles, en las primeras posiciones de la páginas de resultados, páginas de sitios que carguen rápido, algo comprensible claro está).

Ya sea utilicemos Wordpress, Joomla! y otros CMS, existen infinidades de plugins "sociales" para resolver esta cuestión. Sin embargo no soy un gran fanático del uso de plugins de terceros, no tanto por NIH Syndrome, sino por seguridad, actualizaciones y compatibilidad. Intento reducir al mínimo la cantidad de plugins, componentes y módulos de mi instalación de Joomla! para mejorar la seguridad del sitio. Por ello decidí optar por una solución genérica que sirva para cualquier página, no sólo para gestores de contenido.



Buscando en Internet encontré una excelente página que recopila las URLs necesarias para compartir artículos (enlaces) en la mayoría de las redes sociales:

How to create social share buttons with custom icons

Mi idea fue, a partir de estas URLs, crear enlaces de manera dinámica (con un poco de ayuda de Javascript) tomando la URL y título de la página actual de manera automática. La parte estética se las dejo a ustedes, pero lo más importante está resuelto: tomar la URL y título y armar automáticamente el link necesario.

Google Plus

En el caso de Google Plus, sólo es posible enviar la URL como parámetro.

Ejemplo:

Compartir en G+

Código fuente HTML:

<a title="Compartir en Google Plus" id="googleplus-share-button-linuxito.com">Compartir en G+</a>
<script>
var googleplusShareButton = document.getElementById('googleplus-share-button-linuxito.com');
var googleplusShareButtonHref='https://plus.google.com/share?';
googleplusShareButtonHref += 'url='+document.URL;
googleplusShareButton.href = googleplusShareButtonHref;
</script>

Facebook

El script para compartir en Facebook permite enviar el título de la página además de la URL.

Ejemplo:

Compartir en Facebook

Código fuente:

<a title="Compartir en Facebook" id="facebook-share-button-linuxito.com">Compartir en Facebook</a>
<script>
var facebookShareButton = document.getElementById('facebook-share-button-linuxito.com');
var facebookShareButtonHref='http://www.facebook.com/sharer/sharer.php?';
facebookShareButtonHref += 'u='+document.URL;
facebookShareButtonHref += '&title='+document.title;
facebookShareButton.href = facebookShareButtonHref;
</script>

LinkedIn

LinkedIn permite agregar un parámetro source, que puede ser un autor o dominio, aunque creo que actualmente lo ignora.

Ejemplo:

Compartir en LinkedIn

Código fuente:

<a title="Compartir en LinkedIn" id="linkedin-share-button-linuxito.com">Compartir en LinkedIn</a>
<script>
var linkedinShareButton = document.getElementById('linkedin-share-button-linuxito.com');
var linkedinShareButtonHref='http://www.linkedin.com/shareArticle?mini=true&';
linkedinShareButtonHref += 'url='+document.URL;
linkedinShareButtonHref += '&title='+document.title;
linkedinShareButtonHref += '&source=linuxito.com';
linkedinShareButton.href = linkedinShareButtonHref;
</script>

Twitter

Twitter permite indicar la cuenta de Twitter asociada al sitio o contenido (el clásico "vía @"). Se especifica a través del parámetro GET via. El título del artículo se debe enviar en la variable text.

Actualizar la variable via indicando el nombre de usuario de Twitter deseado. En este ejemplo se utiliza @linuxitux. Notar que no se debe agregar el '@' en el parámetro de la URL.

Ejemplo:

Twittear

Código fuente:

<a title="Twittear" id="twitter-share-button-linuxito.com">Twittear</a>
<script>
var twitterShareButton = document.getElementById('twitter-share-button-linuxito.com');
var twitterShareButtonHref='https://twitter.com/share?';
twitterShareButtonHref += 'url='+document.URL;
twitterShareButtonHref += '&via=linuxitux';
twitterShareButtonHref += '&text='+document.title;
twitterShareButton.href = twitterShareButtonHref;
</script>

Notar que el código fuente HTML es siempre el mismo, sólo se debe cambiar la URL y adaptar los parámetros acorde al formato de cada red social. Para el resto de las redes sociales, acceder al enlace presente en el comienzo de este artículo, tomar la URL en cuestión y repetir estos pasos.

Una vez más, al ser HTML puro con Javascript, el código sirve para cualquier sitio, ya sea un blog Wordpress, un sitio Joomla!, un desarrollo a medida, o cualquier otra plataforma o CMS. Lo mejor de todo es haber reducido los tiempos de carga de página, evitando la descarga de recursos externos.


Tal vez pueda interesarte


Compartí este artículo