Diseño de blogs V: Redes Sociales. Botones

7 de noviembre de 2014




¡Qué sería de nosotr@s sin las redes sociales!

Inevitablemente forman parte de nuestro día a día y en especial de nuestros espacios y es que la interacción social es la razón de ser de todo blog. Que haya alguien al otro lado leyendo tus publicaciones, opinando, compartiendo y ojo! también criticando es el verdadero motor del blogging.

Por ello es fundamental la presencia de RRSS en nuestro blog, una presencia que sea fácilmente accesible al lector y que le permita contactar rápidamente con nuestros perfiles en la red. Cada blogger decide qué redes usar en su blog, si bien Isa de MQSB lo tiene claro (y creerme que en este campo es la jefa!): Facebook y Pinterest son las redes más destacadas en ventas online y blogs, si bien tendrás que elegir en función de tus lectores.

Personalmente comparto acceso a todas las redes en mi blog (en caso de Facebook recientemente hice mi fan page ) pero mis preferidas son Twitter e Instagram y últimamente blogovin, son con diferencia las redes en las que más interactúo con vosotr@s y en las que más seguidoras tengo. Facebook me da una pereza horrible...sus cambios constantes me desesperan y es la red que menos utilizo.

Importante es su presencia pero también su estética, que sean atractivos y coherentes con el diseño y con los colores que hemos elegido para nuestro espacio y si son originales o personalizados mejor que mejor! Elegir botones de RRSS, al igual que la gama de colores de nuestro blog o la tipografía, no es tarea fácil salvo que tengáis muy muy claro la estética que queréis en vuestros botones.

ELEGIR DISEÑO

La apuesta más segura es optar por botones sencillos y nítidos cuyos colores sean acordes a la gama escogida en nuestro blog (podéis leer el post sobre colores aquí). Para ello en la red encontraréis un sin fin de webs en las que descargar paquetes de iconos mediante la búsqueda "Social Icons free" algunas que os sugiero son:

  • Findicons Os permite personalizar forma, fondo, tamaño, color...
  • Iconfinder
  • Iconsdb También personalizables.
  • Pinterest Una red que me encanta para buscar freebies es Pinterest (soy adicta!) en ella encontraréis opciones muy originales pero ojo! no siempre son gratis!
  • Blogueras motivadas. Cómo me gustan estas chicas! sus post, sus recursos, todo! y por supuesto también sus diseños para RRSS que podéis encontrar aquí. Es más mis botones son los diseñados por Babycatface ;) #muyfan
Iconos Smuk things
Iconos de Babycatface
También podéis diseñar vuestros propios botones sociales a través de Photoshop, PowerPoint...eso ya depende de vuestra maña ;)


DÓNDE UBICARLOS

En este caso tenéis varias opciones según la plantilla de vuestro blog, lo importante es que estén visibles. Bien en una barra fija en la parte superior de vuestro espacio en la que además podéis incluir otras pestañas como Contacto o Sobre mí. Laura de Miss Lavanda os explica muy muy bien cómo instalarla en uno de sus post.

También es muy habitual en el sidebar de nuestra plantilla (mejor en una zona alta, yo como veís los tengo encabezando el sidebar) o incluso a pie de blog, esta última opción es poco visible y a mi parecer la menos recomendable. No obstante es una opción.

CÓMO INSERTARLOS CON HTML

Una vez elegidos los botones descargamos el pack y lo tenemos a mano en nuestro escritorio (lo mismo si los hemos hecho nosotros mismos). Para que todo sea más fácil os recomiendo subir todas las imágenes a un alojamiento web (yo uso Tinypic pero puede ser el que vosotr@s queráis) y el enlace a la imagen obtenido lo vamos  guardando en un documento de word, de manera que tengamos todos los enlaces a las RRSS que queremos incorporar en nuestro blog a mano.

En Blogger vamos a "Diseño", seleccionamos "Añadir un gadget" y la opción "HTML/ Javascript". Le damos un título (los más habituales son Contacta, Sígueme, Redes...) y copiamos el siguiente código en el que variaremos ciertos parámetros según la red, por ejemplo éste es el código a mi twitter:

<a href="https://twitter.com/rakelhrebolledo"><img style="border: 0pt none ;" title="Become a friend" alt="" src="http://i42.tinypic.com/148m4qd.png" width="60" height="50" /></a>


+ La parte resaltada en morado es la URL de mi twitter/red social elegida.
+ La parte resaltada en azul es el enlace dónde está colgada la imagen del icono de nuestra red social (la que habíamos preparado previamente en nuestro documento de word!)
+ Introduciremos este código personalizado con cada una de las redes que queramos incluir, simplemente con un espacio de separación entre códigos.
+ En width y height podremos modificar las medidas de nuestros iconos, pero cuidado! mantened las proporciones o vuestros iconos perderán nitidez!

Al principio puede parecer complicado pero luego es bien fácil ya veréis! solo necesitáis paciencia y tenerlo todo bien a mano, hacedme caso, lo vais a agradecer!!

Y una vez aplicados estos pasos ya tenéis listos vuestros botones sociales! en la siguiente entrada completaremos el apartado sobre Redes ;)

Estáis tardando en tener vuestros botones sociales requetebonitos!

R.

1 comentario:

  1. Muy útiles estas entradas. Me ha encantado tu blog y ahora mismo me suscribo!! Un abrazo!

    ResponderEliminar

Gracias por tu comentario!!