Cómo poner iconos de redes sociales en el blog (WordPress)

Iconos sociales para el blog

Una de las primeras preguntas del blogger nuevo (novato, pero sin sentido despectivo) una vez ha elegido la plantilla es ¿’Y ahora qué le pongo y cómo lo hago’? Por suerte, las plataformas de alojamiento facilitan la tarea sin necesidad de que el blogger tenga conocimientos específicos de lenguaje HTML. En WordPress, y gracias a los Widgets, amueblar ese espacio en blanco es como hacer un puzzle, simplemente has de colocar cada pieza en el menú que tú quieras. Sin embargo, hay elementos imprescindibles que de entrada requieren una acción más complicada que la del simple arrastre. Estoy hablando de los iconos sociales.

Los iconos sociales (o social media icons) son casi tan importantes en el blog como lo es la propia cabecera. El blogger con presencia en redes sociales (me cuesta creer lo contrario) debe facilitar la interconexión entre los contenidos y los diferentes perfiles 2.0, y no sólo con la opción ‘compartir’ en cada post, sino dando enlace a cada uno de esos perfiles como parte de un menú. Me refiero a esto:

Pieza útil además de estética, ya que las opciones de diseño son infinitas, dando una imagen más personalizada al blog. Pues bien, lo que os cuento en este post es cómo incluir estos necesarios iconos con link a vuestras redes sociales. Cuando di mis primeros pasos en la blogosfera me supusieron un importante quebradero de cabeza, y hubiese agradecido una explicación clara de cómo hacerlo. Espero que os sea útil lo que ahora os cuento.

1. Lo primero y esencial es hacernos con los iconos. Una rápida búsqueda en Google te dará infinidad de posibilidades, colores, diseños, temas… entre los que escoger. Ojo: asegúrate de que el pack que eliges tiene todos los iconos que necesitas. Lo más habitual es que te ofrezcan las imágenes en un documento .Zip que has de descargar a tu ordenador. Sabrás que existe una opción alternativa, que es la de utilizar directamente la URL de la propia imagen del icono, sin tener que descargarla, pero no la recomiendo, porque además de molestar al dueño del archivo (sobrecargas su sistema cada vez que se visualiza) corres el riesgo de que un día esa imagen sea borrada y desaparezca también de tu página. Realizando la descarga, tú tienes el control.
2. Subir los iconos al blog. Una vez ya tienes las imágenes guardadas, necesitamos subirlas a la galería multimedia de nuestro blog. En mis primeros ensayos blogueros, este era un paso que no acababa de comprender. WordPress me exigía una URL de la imagen para poder mostrarla en el menú, y claro, yo no encontraba otra opción que acudir a alguna página que tuviese iconos sociales para copiar la URL de alguno de ellos (vía botón derecho). No tardé en descubrir la opción de ‘añadir multimedia’. Allí nos vamos. Escogemos cada uno de los archivos de los iconos sociales que incluiremos en el blog y los guardamos en la galería.
3. Añadir el menú personalizado. Añadidos los iconos a la colección multimedia de nuestro blog, sólo queda crear el menú que nos permitirá mostrar los enlaces a redes sociales. Para eso, nos vamos a Apariencia >Widgets y añadimos un Widget de ‘Texto’ al espacio que escojamos para colocarlos (menú, footer…). Necesitaremos un código HTML específico para que se muestren correctamente. Os dejo aquí el que he utilizado en mi blog, que os puede servir como plantilla. La parte que destaco en rojo es la que debéis rellenar con vuestros enlaces personalizados. Para conseguir la URL de la imagen, accede a ‘editar’ y la verás en la parte derecha de la página:
   –
   link a tu perfil personal de red social« TARGET=»_blank»>URL de la imagen del icono social» alt=»nombre de la red social, aparecerá cuando pases el cursor por encima (texto ALT)» width=»tamaño, ejemplo: 28px» />
   –
   en mi caso queda así:

Añade la misma secuencia (copia y pega) con cada uno de los iconos que quieras incluir. Si los has conseguido en un mismo pack, no tendrás problema, pero si son de diferentes fuentes es posible que varíen en tamaño, por lo que has de jugar con el valor ‘width‘, modificando los píxeles hasta que queden igualados. Ten abierta la portada de tu blog en una segunda ventana para actualizar e ir viendo los cambios a medida que los realizas, te será mucho más cómodo controlar lo que vas haciendo.

Esto es todo. Os dejo aquí debajo una galería con los diferentes pasos a dar, ya sabéis que una imagen vale más que mil palabras. Espero que os haya sido útil, y sobre todo que haya quedado claro. Si tenéis alguna duda hacédmelo saber en los comentarios!!

–> lee también: Cómo poner los iconos de redes sociales para compartir cada post

#LCBlog
foto| Webtreats

El pase de diapositivas requiere JavaScript.