En esta entrada veremos como crear botones para compartir contenido mediante redes sociales e incorporarlos en nuestra web; cabe recordar que existen muchos servicios que ofrecen este tipo de soluciones como AddThis o ShareThis que permite generar botones para compartir contenido que podemos incorporar a nuestra web con un simple copia y pega:
Sin embargo, al emplear soluciones existentes siempre nos vemos limitados de cierta manera, como la posibilidad de cambiar la interfaz a gusto, iconos personalizados, distribución y además que tenemos que depender directamente de un tercero (ya que los fuentes apuntan a otro servidor) y la carga de nuestro site puede verse afectada por lo comentado anteriormente entre otras cosas que a la final terminan odiando aunque cada cosa tiene sus ventajas y sus desventajas.
Creando nuestros propios botones sociales para compartir
Aquí es donde entra la magia del desarrollo personalizado o creados por nosotros mismos; como verás el desarrollo es muy sencillo y en esta entrada veremos las principales redes sociales para que su funcionamiento sea parecido al clasico AddThis (clic en un icono se abre una ventana emergente pop-up con el contenido a compartir por la red social correspondiente).
Formatos de las URL de redes sociales para compartir contenido
Prácticamente todas las redes sociales que se respeten ofrecen un formato que permite compartir enlaces mediante un título y la URL que la acompaña vía GET; por ejemplo:
Microblogging: Twitter
En Twitter empleamos el parámetro url y text para indicar el contenido que queremos compartir y aparezca la característica ventana para compartir como la mostrada anteriormente.
https://twitter.com/share?url=[URL]&text=[TITLE]"
Red social: Facebook
Facebook emplea un esquema similar, en este caso los parámetros se llaman u y title como mostramos a continuación:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Red social: Google+
En el caso de Google+ (supongo que alguien la usara), el parámetro empleado es el de la url:
https://plus.google.com/share?url=[URL]
Red de trabajo: Linkedin
En Linkedin es un poco más de lo mismo y los parámetros se llaman url y title http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]
Aunque Pinterest no es una red social como tal, también es muy empleada y la usamos para subir imágenes con algo de contenido, el parámetro empleado es el de la url:
https://www.pinterest.com/pin/find/?url=[URL]
Entre otros formatos a redes sociales que puedes ver en los siguientes enlaces:
Creando nuestros propios botones sociales para compartir
Una vez explicado lo anterior, lo que nos resta es crear tantos los enlaces sociales con algún ícono representativos a estas red social de nuestra preferencia; el siguiente HTML y CSS hacen lo anterior comentado:
<style>
#share-buttons {
width: 400px;
display:block;
margin: 0 auto;
-ms-transform: scale(.8,.8);
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
}
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
display: inline;
}
#share-buttons a{
width: 50px;
height: 50px;
display: inline-block;
}
#share-buttons i{
width: 50px;
height: 50px;
display: inline-block;
background-image: url("/public/images/icons.png");
}
</style>
<html>
<div id="share-buttons">
<!-- Facebook -->
<a class="social-button" href="http://www.facebook.com/sharer.php?u=http://sh.st/UPQTP&t=Cargas asíncronas de imágenes con jQuery en una web">
<i class="fb_50_black"></i>
</a>
<!-- Google+ -->
<a class="social-button" href="https://plus.google.com/share?url=http://sh.st/UPQTP">
<i class="gmail_50_color"></i>
</a>
<!-- LinkedIn -->
<a class="social-button" href="http://www.linkedin.com/shareArticle?mini=true&url=http://sh.st/UPQTP&title=Cargas asíncronas de imágenes con jQuery en una web">
<i class="in_50_color"></i>
</a>
<!-- Tumblr-->
<a class="social-button" href="http://www.tumblr.com/share/link?url=http://sh.st/UPQTP&title=Cargas asíncronas de imágenes con jQuery en una web">
<i class="tb_50_color"></i>
</a>
<!-- Twitter -->
<a class="social-button" href="https://twitter.com/share?url=http://sh.st/UPQTP&text=Cargas asíncronas de imágenes con jQuery en una web">
<i class="twitter_50_black"></i>
</a>
<h5>Ayúdanos a seguir creciendo#60;/h5>
</div>
</html>Obtenemos algunos botones sociales como los siguientes:
Por supuesto, ahora con ventajas como la posibilidad de configurar todo lo que queramos como los iconos de las redes sociales, HTML, CSS, optimización, funcionamiento en general.
Pop-up social
Si queremos que habrá un pop-up para mostrar el dialog de la red social, podemos incorporar el siguiente JavaScript:
var lba = document.getElementsByClassName("social-button")
function myPopup() {
window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
event.preventDefault();
return false;
}
for (var i = 0; i < lba.length; i++) {
lba[i].addEventListener("click", myPopup, false);
}Quedando todo nuestro experimento social de la siguiente manera:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter