Parece mentira que, algunas veces, con poco esfuerzo y de forma muy sencilla queden cosas con tan buen aspecto. Lo digo por el asunto de los iconos sociales con forma de banderín, algo que me piden más de lo que en principio se podría pensar (sobre todo para tiendas online) y que son bastante sencillos de crear con un par de truquitos y con un poco de CSS.

Esto es sólo una imagen, no pruebes a pasar el ratón por encima 🙂

Habrá quien diga que se pueden poner iconos sociales como imagen que ya tengan forma de banderín, pero la gracia es que puedan tener un efecto hover y que cambien el color al pasar el ratón por encima. Además, haciendo las cosas bien hechas nos ahorramos imágenes, tiempos de carga y transferencia de datos. Teniendo en cuenta que los iconos sociales suelen ir en todas y cada una de las páginas de una web, no es moco de pavo.

Vamos a ver el proceso de forma muy simple para que cada uno se los pueda hacer él mismo, y al final te dejaré también un vídeo, por si eres más de mirar que de leer (aunque, de todos modos, en el texto iré explicando algunos detalles que en vídeo no se pueden ver). ¡Vamos al lío!

Iconos sociales en un widget: Simple Social Icons

Para empezar te diré que como mejor quedan los iconos es cuando uno mismo los coloca como y donde quiere, a base de HTML y CSS, y es como suelo hacerlo yo. Pero aquí voy a poner las cosas fáciles para que todo el mundo pueda hacerlo así que para insertar los iconos de las redes sociales vamos a usar un plugin. Esto tiene dos desventajas:

• No puedes ponerlos en cualquier lugar de la web que quieras, sólo en widgets
• No puedes mostrar los iconos de las redes en el orden que quieras, el orden viene dado por el plugin

Pero a cambio el proceso es muy más fácil, sencillo y rápido, y no necesitarás saber HMTL ni CSS para colocarlos (para darles luego forma de banderín habrá que usar algo de CSS, pero te lo doy yo). Además, gracias a los widgets podrás ponerlos en la sidebar, en la cabecera (si tu theme tiene un área para widgets en ella) o en el pie de página.

Colocando los iconos de redes sociales

El plugin que vamos a utilizar es Simple Social Icons, un plugin de los chicos de StudioPress (lo autores del framework para WordPress Genesis), y eso ya lo dice todo: es útil, práctico, fácil de usar y está muy bien hecho a nivel de código. Un lujo, vamos.

En este apartado no hay dificultad alguna. Una vez instalado y activado el plugin, tendrás disponible un nuevo tipo de widget en Apariencia > Widgets llamado Simple Social Icons. Sólo tendrás que ponerlo en la zona de widgets que prefieras, ponerle un título y configurar un par de cosas muy sencillas:

• Icon size: el tamaño que tendrá el icono, dependerá de tu gusto y del diseño de la web, haz varias pruebas
• Open links in new window?: márcalo si quieres que el enlace se abra en otra pestaña
• Icon border radius: a mayor cantidad más redondeadas estarán las esquinas del icono; en 0 serán totalmente cuadradas
• Border width: el ancho del borde; es irrelevante, porque para el banderín lo queremos sin borde
• Alignment: alineación de los iconos, izquierda, derecha o centrada
• Icon font color: color del icono
• Icon font hover color: color del icono al pasar el ratón por encima
• Background color: color del fondo (del banderín en este caso)
• Background hover color: color del banderín al pasar el ratón por encima

A continuación, sólo te resta poner los enlaces a tus redes sociales en el espacio para ello. Sólo aparecerán las que rellenes, así que es muy sencillo. Como te decía más arriba, no podrás elegir el orden.

Dar forma de banderín a los iconos sociales

Ahora es cuando nos empezamos a manchar las manos. Te recuerdo que nuestro objetivo es éste (el color será el que tú hayas puesto):

Sin embargo lo que tenemos de momento es esto otro, de apariencia bastante más sosa:

La diferencia está en un triangulito blanco y un poco de magia con CSS. Porque el «truco» está en situar abajo del todo una imagen transparente con un triángulo que, evidentemente, ha de ser del mismo color que el fondo.

Como la gran mayoría de los fondos son blancos, te dejo una que te valdrá si ése es tu caso, sólo tienes que pinchar aquí para descargarla. Si el fondo de tu web es de otro color puedes cambiar el color al triángulo con Photoshop o cualquier otro programa de edición de imágenes.

Sirve para utilizarla siempre que, como digo, el fondo de tu web sea de color blanco y los iconos de las redes sociales los pongas de un tamaño menor a 70 píxels. También suele ser el caso, ya que normalmente suelen ser de aproximadamente la mitad. Un icono de 70 píxels ya es muy (muy) grande.

Aplicando los estilos

Pues una vez subido el triangulito blanco (o del color que lo hayas hecho) a tu biblioteca de medios, sólo necesitas colocar estos estilos en tus CSS personalizados:

.simple-social-icons ul li a {
	background: url('http://www.tuweb.com/wp-content/uploads/XXXX/XX/icon-social.png') no-repeat bottom;
	padding-bottom: 25px !important;
	border: 0 !important;
}

.simple-social-icons ul li a:hover {
	transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
}

Y ahora un par de aclaraciones para que no te pierdas. Lo primero, que quizá estarás pensando ¿Y qué narices tengo que hacer yo con eso? ¿Dónde se supone que tengo que ponerlo? Bueno, no te apures, es muy sencillo. Dediqué un artículo a explicar las diferentes formas de incluir tus propios CSS personalizados, puedes echarle un vistazo:

Y sólo falta ajustar un par de cosas: por supuesto, sustituir la URL de la imagen por la que te dé tu biblioteca de medios (echa un vistazo al vídeo si no sabes dónde conseguirla, es muy fácil). También puedes personalizar la altura del banderín en la línea que dice padding-bottom: 25px;, usando un número mayor.

Vídeo: iconos sociales en forma de banderín

Por si te ha quedado alguna duda, aquí va un vídeo paso a paso. Y si después de ver el vídeo aún te quedan dudas, no tienes más que consultarme, estaré encantado de echarte una mano. 🙂