Insertar iconos de seguimiento en redes sociales en un blog o sitio web

Si eres autor o autora de un blog o sitio web y, además, participas en distintas redes sociales (Facebook, Twitter, Flickr, YouTube, Delicious, Pinterest...) es importante que se lo hagas saber a tus visitantes para que éstos puedan encontrarte y conectar contigo en dichos espacios. De esta manera, aumentarás tu número de contactos y, potencialmente, recibirás más tráfico en tu sitio web y en tus perfiles 2.0. Una buena opción para realizar esta tarea es la inserción en tu bitácora o página de iconos sociales que actúen como botones de seguimiento.

Si te sientes inspirado, puedes crear tus propios iconos sociales con programas de dibujo y edición de imágenes como Photoshop, Gimp, Illustrator o Inkscape. Pero si el diseño gráfico no es lo tuyo, o simplemente no tienes tiempo para dedicarte a esta actividad, también puedes utilizar iconos sociales ya creados, disponibles en Internet para su descarga gratuita. Eso sí, recuerda consultar su licencia de uso para asegurarte de que no estás infringiendo los deseos de sus autores y autoras.

Para encontrar los iconos sociales que más te gusten y que mejor se adapten al diseño de tu blog o sitio web, te recomiendo leer los artículos 42 sitios web donde encontrar iconos para tus diseños y 16 herramientas para encontrar iconos en la web publicados en esta misma bitácora. Una vez localizado el pack de iconos deseado, descárgalo en tu PC. A menudo, estas colecciones vienen comprimidas en un archivo ZIP o similar; extrae los iconos con programas como WinZip (para Windows) o Gestor de Archivadores (para Ubuntu y derivados).

El siguiente paso será subir los iconos a un servicio gratuito de alojamiento de imágenes en Internet. Existen multitud de herramientas con este fin: dos de las más populares son Flickr y Photobucket. Pero si no quieres complicarte abriendo nuevas cuentas, te recomiendo que utilices los Álbumes Web de Picasa, el servicio de Google al que podrás acceder fácilmente si dispones de una cuenta ya creada en cualquiera de sus productos (Gmail, Blogger, Google+...). En este blog, además, encontrarás un completo manual de uso de Picasa Web Albums.

Una vez tengas cargados los iconos en Internet, tendrás que averiguar la URL o dirección web donde están alojados. Generalmente, la podrás obtener abriendo la página de cada icono, clicando sobre él con el botón derecho del ratón, y seleccionando la opción Copiar la ruta de la imagen (en Firefox) o Copiar URL de la imagen (en Chrome). En Picasa Web Albums, por ejemplo, también se puede conseguir haciendo click en Enlace a esta foto y marcando la casilla Sólo imagen (no enlace). Guarda todas esas URLs en un bloc de notas o similar.

Ahora, entra en tu blog o sitio web y abre el widget que tengas disponible para insertar código HTML. En Blogger, por ejemplo, ves al apartado Diseño de tu bitácora, clica sobre Añadir un gadget y selecciona HTML/Javascript. Pega el siguiente código para cada icono que quieras añadir:

<a href="URL de la red social" target="_blank" title="Texto"><img src="URL del icono" width=64px; height=64px; /></a>

• Sustituye URL de la red social por la dirección web de tu perfil. Por ejemplo: http://www.twitter.com/infoynet. Conserva las comillas.
• Target="_blank" sirve para que la página de la red social se abra en una pestaña del navegador diferente a la de tu blog. Si prefieres que se abra en la misma, borra esta propiedad.
• Sustituye Texto por el texto que quieras que se vea cuando un visitante pase el cursor del ratón por encima del icono. Por ejemplo, "Sígueme en Twitter". Conserva las comillas.
• Sustituye URL del icono por la dirección web en la que está alojado el icono (la que habremos guardado antes siguiendo el método explicado más arriba). Conserva las comillas.
• Por último, modifica el tamaño del icono a tu gusto. Está puesto para 64 píxeles de ancho (width) y de alto (height), pero podrían ser 32 si lo quieres más pequeño o 128 si lo prefieres más grande.

Si, además, deseas que los iconos se vean centrados, coloca al principio de todo el código <center>  y, al final, </center>. Guarda el widget y sitúalo en el lugar de la plantilla donde quieres que se muestren los iconos. Es recomendable que sea la parte superior de tu sitio web para facilitar que tus visitantes los vean e interaccionen con ellos. Salva esta disposición.

Y ya tienes los iconos sociales insertados en tu blog o sitio web. Recuerda que es recomendable que aludas al autor o autora de los mismos, apuntando su nombre e incluyendo un enlace hacia su propia bitácora o página web, en alguna parte de tu sitio. Normalmente los créditos se colocan al final de la página.

Artículo actualizado a 20 de septiembre de 2012