diseña en WordPress tu propio compartir en redes sociales

Hola, hoy vamos a hablar de como añadir tus propios iconos para compartir en las redes sociales.

Muchas veces he querido añadir mis propios iconos de redes sociales para no romper la estética de la web, no digo que sean feos los que nos entregan, pero ahora muchos de nosotros trabajamos con con los iconos como fuentes, ya que nos permiten manejarlos como si fuera un texto y poder darles tamaños y colores según el cliente y el diseño de la web en particular. Creo que no seré el único al que un cliente le cambia el diseño de la web unas cuantas veces y con ello los cambios de los iconos, pero gracias a trabajar con este tipo de herramientas únicamente hay que cambiar el color y el tamaño, con si de un texto se tratara.

Unos ejemplos de estos paquetes de iconos pueden ser Pictos o los que yo he utilizado en mi web we love icon font pero hay muchos mas.

Para añadir los iconos debemos ir a la web de we love icon font elegir los iconos que queremos importar y automaticamente nos genera una url como esta, que debemos de añadir al inicio de nuestro archivo style.css


@import url(http://weloveiconfonts.com/api/?family=brandico|zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}


Una vez tengamos el css terminado tendremos que generar nuestros enlaces, para ello hacemos esto…

Para compartir en twitter sería algo así


<a class="zocial-twitter" target="_blank" href="javascript:var dir=window.document.URL;var tit=window.document.title='<?php the_title(); ?>';var tit2=encodeURIComponent(tit);window.location.href=('http://twitter.com/?status='+tit2+'%20'+dir+'');">

Para Facebook


<a class="zocial-facebook" target="_blank" href="https://www.facebook.com/share.php?u=<?php echo urlencode(the_permalink());?>&t=<?php echo urlencode(the_title());?>"></a>

Y Para Google+


<a class="zocial-google" target="_blank" href="https://plus.google.com/share?url=<?php echo urlencode(the_permalink());?>"></a>

Muy importante: la clase que añadimos al enlace, class=”zocial-xxx”, ya que si no la añadimos no nos mostrara el icono

Para terminar deciros que también se pueden descargar un archivo y añadirlo a nuestra carpeta fonts donde podremos tratarlo directamente como una @font-face.