Be social my friend… No importa lo valioso que sea tu contenido si nadie lo ve. Por este motivo, ayudar al usuario que nos visita a difundir nuestro valioso tesoro es primordial en este mundo 3.0 en el que vivimos.
Antiguamente, nos resultaba muy dificultoso darnos a conocer al mundo. Contratábamos a nuestro mejor sobrino, éste nos hacía una web, la publicábamos en un FTP y nos sentábamos a esperar visitas… las cuales no llegaban así de fácil, vamos a reconocer.
Gracias a la vida -si tengo que invocar a algún dios, éste sería Thor-, esto ha ido evolucionando y, junto a esa evolución aparecieron las numerosas (sí, numerosas) redes sociales que nos rodean. Estas, además de hacernos perder un tiempo valiosísimo -porque muchos estamos por eso, porque tenemos que estar-, también tienen su lado bueno y nos ayudan en la ardua tarea de difundir nuestros servicios, ofertas, productos o contenidos de nuestro blog.
Una forma muy eficaz de conseguir visitas es poner a la gente a trabajar por ti y qué quiero decir con que la gente trabaje para ti… pues que si tu contenido es original, de calidad y genera interés en la gente que lo lee, es esta misma gente la que se ocupará de difundirlo y hacerlo llegar a todos sus contactos.
Uno de los principales canales para difundir es Facebook, todos los sabemos, el problema es que Facebook se ha puesto un poco problemático a la hora de personalizarle el contenido que la gente comparte y ha marcado como obsoletos (o deprecated) algunos elementos pero vamos a dar la vuelta para hacerlo funcionar.
Otros canales (como LinkedIn, Whatsapp, Google+ o Twitter), son más sencillos y no ponen tanta traba a personalizarle el contenido a compartir.
En el caso de este pequeño tutorial, lo que vamos a presentar es una página con una serie de párrafos y vamos a ofrecerle al usuario la opción de compartir el contenido que ha seleccionado en Twitter, Whatsapp, Linkedin, Facebook y Google+.
Vamos a ello.
No perdamos más tiempo presentándonos que ya nos conocemos y empecemos a generar las opciones para compartir.
Si tenemos que destacar una ventaja de este sistema, es que puede aplicarse a cualquier sitio web sea cuál sea el CMS que estés usando… Si tenemos que nombrar alguna desventaja, pues, se me ocurre que seguramente el código sea muy mejorable - como siempre.
En orden de aparición de los iconos vamos a comentar qué tenemos que hacer para que funcione la función de compartir el texto.
Como primer requisito fundamental, deberemos seleccionar el texto a compartir. Debemos tener en cuenta que según el servicio que utilicemos para compartir, la cantidad de texto puede ser superior a los caracteres permitidos y la opción de compartir puede no completarse (especialmente Twitter y sus 140 caracteres).
Entonces bien, una vez seleccionado el texto veremos cómo aparecen los iconos de las redes sociales para completar la acción y empezamos con:
Pulsando sobre este enlace abriremos en un popup la dirección del “sharer” de Twitter que, al no requerir nada en especial, nos permitirá indicarle:
- via: @macadiaweb (la cuenta original, la tuya, para que el tweet te mencione).
- text: el texto del tweet
- referer: lo añadirá Twitter automáticamente y será el enlace de la página que se está compartiendo.
Si tenemos la sesión iniciada (en caso contrario podemos hacerlo en ese momento) y los caracteres no superan el límite, tendremos el botón para tuitear disponible y listo 🙂
Este servicio también ha puesto a nuestra disposición el servicio api.whatsapp. En este caso los parámetros son:
- text: el texto a compartir/enviar vía Whatsapp
Si tenemos la app de Whatsapp para Windows, éste intentará utilizarla, si lo hacemos desde un teléfono, se abrirá Whatsapp.
En ambos casos, deberemos seleccionar el contacto al que queremos enviarle el mensaje y listo. Whatsapp no agregará el enlace referer por lo que deberíamos añadirlo a mano dentro de la variable text.
Funciona de un modo similar a Twitter. El enlace nos abrirá el popup del sharer de LinkedIn que nos permitirá compartir el contenido seleccionado y además tenemos las siguientes opciones:
- title: podemos decidir que el texto seleccionado sea el título o texto del elemento a compartirlo
- text: similar al anterior.
- url: la dirección que estamos compartiendo.
- mini: true/false (si queremos que haga miniatura de esa url)
Y luego ya en el popup, veremos opciones como compartir en grupos, públicamente, etc.
Google+
Vamos con el último de los servicios “fáciles” de implementar, aquí, abriremos el popup del sharer de Google+ donde enviaremos:
- url: la dirección de la página que estamos compartiendo.
- text: el texto personalizado seleccionado.
Si la url es válida, Google+ intentará crear una vista previa.
Dejamos para el final la red social que debiera, a priori, ser la más fácil de usar pero que, por el contrario, es la más compleja de todas a la hora de compartirle elementos.
Antiguamente, Facebook ponía a disposición nuestra su “sharer.php” donde podíamos personalizar el contenido que compartía el usuario pero, con el paso del tiempo lo ha ido matando poco a poco, quitándole propiedades hasta reemplazarlo del todo por el “dialog” que es el que vamos a utilizar en este ejemplo.
Otra cosa importante a tener en cuenta es que el enlace a compartir debe ser válido de lo contrario el dialog de Facebook siempre devolverá error (si lo pruebas en localhost, por ejemplo).
Dicho esto, los parámetros que pasaremos al share/dialog de Facebook serán:
- loc: la url a compartir
- quote: el texto seleccionado
Facebook se ocupará, según la url, de traer la vista previa en base a los metatags.
El código
Ahora que ya sabemos lo que hace cada elemento, vamos a destripar un poco el código que vamos a utilizar.
En primer lugar, vamos a insertarle a nuestro documento los botones. Este paso es totalmente prescindible si agregamos los botones en nuestro HTML directamente.
En este caso tenemos, 2 divs calc1 y calc2 que tendrán su función en calcular dónde está el cursor, dónde empezamos a luego crearemos los botones de cada red social. De más está decir que si no quieres algún elemento, simplemente, quitas el botón.
En el caso del ejemplo, me estoy basando en FontAwesome para los iconos de las redes sociales pero puedes utilizar cualquier método, icono, estilo, etc.
Luego, lo que haremos será comprobar que el usuario ha seleccionado un trozo de texto y lo haremos en el evento “mouse up” llamando a la función obtenerSeleccion() que básicamente hace:
if (window.getSelection) {
pos=window.getSelection();
text = window.getSelection().toString();
}
else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
Resumiendo esta función, obtendremos la selección del usuario y la convertiremos en una cadena “string” para obtener su texto sin ninguna clase de agregado.
Si la selección obtenida es mayor a 0 entonces, buscaremos su posición para mostrar los iconos:
var rel1= document.createRange();
rel1.selectNode(document.getElementById('calc1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('calc2'));
var sel=window.getSelection();
var r = sel.getRangeAt(0).getBoundingClientRect();
var rb1 = rel1.getBoundingClientRect();
var rb2 = rel2.getBoundingClientRect();
var alto = (r.bottom) + 'px';
var izquierda = (r.left) + 'px';
console.log(alto);
console.log(izquierda);
$(".shareit").css({"top":alto,"left":izquierda,"display":"block"});
}
else $(".shareit").css({"display":"none"});
Una vez que tenemos botones visibles, contenido elegido y todo listo para compartir, para esto, buscaremos sobre qué enlace hizo click el usuario:
if ($(this).hasClass("tweetit")) window.open("https://twitter.com/share?text="+seltext+"&via="+via, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=400');
else if ($(this).hasClass("whatsappit")) window.open("https://api.whatsapp.com/send?text="+seltext, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=400');
else if ($(this).hasClass("linkedinit")) window.open("https://www.linkedin.com/shareArticle?mini=true&url="+loc+"&title="+seltext+"&text=hola", '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=400');
else if ($(this).hasClass("facebookit")) window.open("https://www.facebook.com/dialog/share?app_id=155994287915018&href="+loc+"&quote="+seltext, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=400');
else if ($(this).hasClass("googleit")) window.open("https://plus.google.com/share?url="+loc+"&text="+seltext, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=400');
return false;
});
Básicamente, según el enlace que pinche el usuario, el código buscará si este enlace contiene la clase CSS indicada para saber en qué red social debe compartir el contenido.
Pues esto es todo amigos, espero que este pequeño código que podéis ver en esta demo les sirva para implementar en vuestra web y os ayude a difundir vuestro contenido.
Cierro diciendo que es un placer participar por cuarto año consecutivo en este maravilloso blog, agradezco a Félix por tenerme siempre en cuenta y pedirme colaboración.