Con una función de Wordpress y un poco de CSS conseguimos iconos personalizados
La mayoría de los usuarios de WordPress no tienen problemas para agregar a su blog los botones de redes sociales a partir de una de la multitud de plugins disponibles que hacen precisamente eso. Si bien este es un enfoque perfectamente válido para la mayoría de los usuarios, siempre estoy buscando formas de reducir el número de plugins instalados y probar métodos alternativos para el desempeño de sus funciones; menos plugins significa menos conflictos y menos cambios de los que preocuparse.
En este artículo voy a mostrar cómo se pueden agregar botones de redes sociales a nuestro sitio sin necesidad de utilizar un plug-in, y proporcionar un poco de comentario sobre lo que está haciendo el código.
Una función para agregar los botones de Facebook, Twitter y Google+
Esta es una función simple y flexible que debe trabajar cómodamente con cualquier tema. Es una gran solución, y ligera, si no estás interesado en las funciones de medios sociales ampliadas que muchos plugins traen consigo. Para utilizar esta función, tendrás que añadir este fragmento de código en el archivo functions.php de tu tema:
function gk_social_buttons($content) {
global $post;
$permalink = get_permalink($post->ID);
$title = get_the_title();
if(!is_feed() && !is_home() && !is_page()) {
$content = $content . '<div class="gk-social-buttons">
<a class="icon-twitter" href="http://twitter.com/share?text='.$title.'&url='.$permalink.'"
onclick="window.open(this.href, \'twitter-share\', \'width=550,height=235\');return false;">
<span>Twitter</span>
</a>
<a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
onclick="window.open(this.href, \'facebook-share\',\'width=580,height=296\');return false;">
<span>Facebook</span>
</a>
<a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
onclick="window.open(this.href, \'google-plus-share\', \'width=490,height=530\');return false;">
<span>Google+</span>
</a>
</div>';
}
return $content;
}
add_filter('the_content', 'gk_social_buttons');
Entonces, ¿qué está pasando aquí? Al principio del código (líneas 3-4) definimos dos variables que vamos a utilizar para almacenar la URL y el título del post - esta función se ejecutará dentro del bucle gracias al filtro the_content; debido a esto, el título y la URL serán renovados y adecuados para cada post.
La línea 5 es una condición, o declaración, que comprueba lo que está siendo ejecutado en la página y decide si debe o no mostrar los botones. En este ejemplo, se ha usado como condiciones is_feed, is_home y is_page; estas se refieren respectivamente a los canales RSS, la página de inicio y las páginas. De esta manera, podemos evitar que por defecto nuestra página de inicio y RSS muestren los iconos de redes sociales inútiles cuando no hay mucho contenido relevante para compartir. Estas condiciones pueden ser modificadas fácilmente; por ejemplo, si queremos mostrar los botones de social media en las páginas, así como los mensajes, simplemente eliminamos la condición !is_page().
Lo siguiente necesario es definir $content. En este sentido, definimos cada botón de forma individual; por ejemplo, para el botón de Facebook se coloca el código en las líneas 13-16.
Una vez que hemos añadido esta función en nuestro archivo functions.php, nuestra entrada debería ser algo como esto:
Pero dudo que estés satisfecho con sólo un enlace de texto que tiene un aspecto un poco amateur. Vamos a tener que añadir un poco de estilo CSS a los botones para que se vean más atractivos. En este caso, se ha usado el conjunto de iconos de Font Awesome, una fuente impresionante que ofrece agradables iconos escalables para una gran cantidad de redes sociales. Echa un vistazo a este artículo si quieres saber cómo añadir este juego de iconos para tu tema de WordPress. Realmente vale la pena, incluso si no estás interesado en los iconos sociales ya que abarca una amplia gama de necesidades y temas. Ahora añadimos un poco de estilo con el siguiente código CSS:
.gk-social-buttons a {
background: #ccc;
border-radius: 50%;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 2px 4px;
overflow: hidden;
width: 30px;
}
.gk-social-buttons a:hover {
background: #ddd;
text-decoration: none;
}
.gk-social-buttons a:before {
color: #fff;
font-family: FontAwesome;
content: "\f099";
padding: 12px 9px;
}
.gk-social-buttons .icon-fb:before {
content: "\f09a";
}
.gk-social-buttons .icon-gplus:before {
content: "\f0d5";
}
.gk-social-buttons a:hover:before {
color: #000;
}
... El efecto debería tener este aspecto:
Este método no es el mejor para todo el mundo, pero si eres prudente acerca de los plugins y quieres evitarlos siempre que sea posible, vemos que conseguir esos iconos sociales en funcionamiento no es tan difícil como puede parecer.
Recuerda también que la flexibilidad de CSS nos permite realizar toda una serie de modificaciones en los iconos para obtener una amplia gama de efectos y colorearlos, para que el estilo quede acorde con tu sitio.