Bien, los iconos están completamente optimizados a mas no poder y se puede elegir de diferente tamaño. Cada icono tiene la etiqueta alt, (esta sirve para mostrar texto alterno a los buscadores si no pueden abrir la imagen) y title para mostrar el titulo de la imagen, estos iconos de redes sociales para web y blogs están muy bien hechos.
¿Porque agregar botones sociales?
El impacto social es algo crucial si quieres tener éxito en tus proyectos online, llegar a la mayor cantidad de usuarios es clave, pues, en cuanto mas gente te lea o vea mejor para ti. Un sitio web puede estar ofrecer muchas cosas, pero si no esta especializado puedes sugerir a tus visitantes o seguidores que vean tus trabajos a través de portales para tal fin, por ejemplo: puedo tener un blog y ofrecer música via soundcloud.
Otro factor es la facilidad que le ofreces a tus usuarios, puedes estar en contacto con ellos por las redes sociales, si soy alguien que pasa mucho tiempo en twitter, estaré pendiente a los mensajes que manden las paginas que sigo, puedo llegar a un nuevo articulo en una pagina mas rápido por un aviso social, que yendo de manera nativa al blog.
Generador de iconos sociales
Muy bien, vamos al grano, a continuación esta el generador de iconos, tiene los siguientes campos:
- Una lista para elegir el icono que necesites, esta organizada alfabéticamente, inicialmente tiene el icono de facebook.
- Un campo de texto donde escribirás lo que quieres que diga el icono y el texto alterno, en este caso inicial, posee por defecto el texto Sígueme en Facebook!
- La opción redondo muestra como se ve el icono de esa manera.
- Un slider con rango de 35 a 90, con este podrás ajustar el tamaño.
- Un cuadro grande de texto, aquí se ira mostrando el código pertinente al icono elegido, mas los cambios realizados:
<a href="URL" target="_blank"><img alt="Sígueme en Facebook" height="80" width="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6bniYGsMm4A3gFKRMizWZicetGYafzyW6yjJWkD1cLQM4uGxl5gPIM7iltolpK0_Wurv6x8iRncL2RYS7Vjyr70Epwv2o_QAe8rDkB8gKdzKPZ2G4TbSjyx4ls0u5nap8dYmm5rRTIg/s1600/blogger.png" title="Sígueme en Facebook"/></a>
Configurando los iconos sociales
Bien, después de tener los iconos veras que cada código generado tiene esta forma:
<a href="URL" target="_blank"><img alt="siguenos en facebook" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCwSP6xCSx44cZkp8uc-EOlKnopAdbDvIikXkCKiWTc-CHyF4l3YyIquoiau_DFKxTklKYAuvE0z59xwEXPbaPsOmlg4_jCn189EKuNFfYZWVksoDfTYP6t-MS3tMlssHsfXNfRRA7-fN/s1600/face.png" title="siguenos en facebook" width="40" /></a>
Veamos que hacen las partes marcadas mas otras que están en el código, así podrás personalizar aun mas tus iconos sociales.
- Lo que esta en rojo debes remplazarlo por la url de tu usuario o pagina en la red social o lo que sea que escogiste, por ejemplo, si tengo pagina de facebook, copiare la URL y la reemplazo por la de rojo, se hace lo mismo si elegiste twitter, google+ etc.
- Lo que esta en color azul es el texto que mostrara al pasar el cursor, en el generador podrás agregar la frase que quieras, en nuestro ejemplo pondría: ¡sígueme en facebook!.
- El color verde es el texto alternativo, este es el mismo que el del titulo, este por si la imagen por alguna razón no se pudo cargar, muestre el texto para dar a entender a que se refiere la imagen.
- El fragmento
target="_blank"se usa para abrir enlaces en otra pestaña del navegador, esto para que las personas puedan acceder a tu pagina social sin abandonar tu blog. si no quieres eso pues simplemente elimina esa parte. - Las partes height=”40″ y width=”40″ no creo que necesiten presentación, pero igual, son el ancho y alto de la imagen, en el generador puedes elegir un valor entre el 35 y 90.
¿Como poner el icono en mi blog?
Con tu icono mas que listo, solo debes seleccionar el código y, hacer lo siguiente dependiendo de la plataforma que uses.
Poner los iconos sociales en Blogger
Si usas blogger: copia el codigo -> ve a diseño -> añadir un gadget -> elige un HTML/Javascript, pega los códigos que elegiste y guarda.
Poner los iconos sociales en WordPress
si usas wordpress: copia el codigo -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pegas los códigos que elegiste.
si usas otra plataforma tu ya veras como los colocas. ¡Bien, están listos tus iconos de redes sociales para tus seguidores!
Personalizar los estilos de los iconos
Vamos ahora a darle algunos efectos, esto es totalmente opcional y si no quieres pues ignora esto. Como puedes ver en el generador esta la opcion de escoger un icono redondo, no es un icono redondo por aparte del cuadrado como tal, solo estamos aplicando estilos para personalizarlos.
Para usar estos efectos vamos a necesitar hacer uso de un contenedor, esto ara identificar las imagenes de nuestros iconos y poder aplicarles los efecto específicamente a ellos, entonces todos los códigos que elijas pégalos dentro de este código:
<div class="iconos-sociales">
... aqui van los códigos ....
</div>
La vista previa del icono no esta disponible en la versión móvil amp.
Iconos sociales redondos
En el codigo cuando se escoge la opcion: redondo, no aparece nada adicional, osea que no hay cambios extra, la opcion es mas que todo para dar un vista previa de como se verian con el efecto redondeado, si quieres el icono de esa manera entonces agregaremos un código justo debajo del contenedor que mostre arriba, el resultado final se vera así:
<div class="iconos-sociales">
... aqui van los códigos ....
</div>
<style>.iconos-sociales img{border-radius:50px;}</style>
Si no deseas los iconos totalmente redondos, puedes ajustar el valor que esta entre las etiquetas <style>, específicamente el fragmento border-radius:50px; a 30px por ejemplo, y tendran sutiles toques redondeados.
Espaciado entre los iconos
Si agregas los iconos tal cual a tu blog, lo mas probable es que aparezcan pegados uno seguido del otro, sin ningún espacio, para evitar esto solo debemos añadir un pequeño fragmento de código:
<style>.iconos-sociales img{margin:5px;}</style>El valor en margin:5px lo puedes variar, esto hará que los iconos estén mas ceca o lejos entre ellos.
Iconos con efecto giratorio
Un buen efecto es que los iconos giren al pasar el cursor, giran 360 grados y cuando se quita el cursor se devuelven, ¿como hacer esto? pues con el siguiente código, dejado de el puedes ver un ejemplo del efecto en acción:
<style>.iconos-sociales img{
transition:all 0.5s ease-out;}
.iconos-sociales img:hover{
transform: rotate(360deg);
}</style>
Aquí podemos notar la parte 0.5s, esta la puedes variar para aumentar o disminuir el tiempo en que el icono gira. El valor 360deg configura que tanto gira, osea que si lo cambiamos a 180deg solo dará media vuelva.
Este efecto queda muy bien junto al de icono redondo, para juntar ambos efectos solo unión, agregamos a este código la parte del de redondos, es decir el fragmento border-radius:50px; el resultado es el siguiente:
<style>.iconos-sociales img{
transition:all 0.5s ease-out;
border-radius:50px;}
</style>Redondear al pasar el cursor
Y un ultimo efecto pero bastante vistoso, el que al pasar el mouse el icono se torne redondo, y al dejar de pasarle el cursor, este vuelva a ser cuadrado. Utilizando el mismo codigo contenedor usaremos el siguiente para lograr dicho efecto:
<style>.iconos-sociales img{
transition:all 0.5s ease-out;}
.iconos-sociales img:hover{
border-radius:50px;}</style>Como ya sabes el valor 0.5s controla el tiempo que tarda en hacer el efecto, y el valor 50px que tanto se redondea, usamos este valor para un redondeado total, de ese valor para abajo como 20px, se nota menos lo redondo.
Si lo que queremos es exactamente lo contrario: los iconos redondos y que se vuelvan cuadrados, usaremos este fragmento en lugar del anterior:
<style>.iconos-sociales img{
border-radius:50px;
transition:all 0.5s ease-out;}
.iconos-sociales img:hover{
border-radius:0px;}</style>
