Personalizar los iconos sociales de compartir con Font Awesome

1 de junio de 2016 | Redes sociales | Aunatec

Personalizar los iconos de las redes sociales para ponerlos en nuestra página es una tentación de gran parte de los que tenemos blogs o diseñamos páginas web. Algunos prefieren que estos botones destaquen del resto del artículo y otros que se integren con el diseño y los colores de la página.
En este artículo en vez de usar imágenes, vamos a utilizar Font Awesome, que son iconos escalables que se pueden personalizar y tienen la ventaja que los navegadores los tratan como fuentes, no como imágenes. Para poder utilizarlos los puedes descargar desde su página o bien enlazarlos en el head de tu código html poniendo:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Para compartir el artículo en primer lugar tenemos que poner en el head de nuestro código html, las cabeceras con los datos de nuestro artículo, como son la url, la imagen a compartir, el título, etc. Esta información la podeis encontrar en este enlace: compartir artículos en redes sociales.

En segundo lugar incluir en el enlace del icono, la dirección concreta de la red social en la que quieras que aparezca, ya sea facbook, twiter, google+, etc…

<a href=’http://facebook.com/sharer.php?u=Url de la entrada‘ target=’_blanK’>imagen, botón o texto</a>
<a href=’http://twitter.com/home?status=Url de la entrada‘ target=’_blanK’>imagen, botón o texto</a>
<a href=’https://plus.google.com/share?url=Url de la entrada‘ target=’_blanK’>imagen, botón o texto</a>

Para incluir los iconos de compartir en nuestra plantilla single.php de wordpress pondremos la función get_permalink($id) en el código anterior, para que nos rellene la url de la entrada que queremos compartir y en vez de una imagen o un botón, pondremos el código html del Font Awesome que queremos mostrar. Hay varios entre los que podemos elegir.

<a href=’http://facebook.com/sharer.php?u=<?php get_permalink($id); ?>’ target=’_blanK’><i class=’fa fa-facebook fa-lg fa-3x’></i></a>
<a href=’http://twitter.com/home?status=<?php get_permalink($id); ?>’ target=’_blanK’><i class=’fa fa-twitter fa-lg fa-3x’></i></a>
<a href=’https://plus.google.com/share?url=<?php get_permalink($id); ?>’ target=’_blanK’><i class=»fa fa-google-plus fa-lg fa-3x» aria-hidden=»true»></i></a>

También podemos personalizar el icono con los colores, tamaños y formas que queramos. En el ejemplo escogeremos uno de facebook y lo cambiaremos un poco. Para ello tendremos que darle estilo en nuestro archivo style.css con la clase ejemplo.

<a href=’http://facebook.com/sharer.php?u=<?php get_permalink($id); ?>’ target=’_blanK’><div class=»ejemplo«><i class=’fa fa-facebook fa-lg fa-2x’></i></div></a>

El font original es el siguiente:

Vamos a cambiarle el color y le vamos a poner un borde circular. Ponemos el siguiente código en el css.

div.ejemplo {
width: 40px;
height:40px;
text-align: center;
background-color: #ffffff;
border: 5px solid #8d33ff;
border-radius: 15%;
margin-right: 20px;
}
div.ejemplo i {
margin-top: 10px;
color: #8d33ff;
}
div.ejemplo:hover {
background-color: #8d33ff;
border: 5px solid #8d33ff
}
div.ejemplo:hover i {
color: #ffffff;
}

Y éste sería el resultado.

Si te ha gustado, compartelo.