31 julio 2009

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

Cómo 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

18 comentarios:

  1. Muy bien explicado... Muchísimas gracias. Además subrayar el detalle de indicar a pie de página los creadores de los diseños utilizados en el blog... Felicitaciones!

    ResponderEliminar
  2. Excelente explicación. Muy útil. Muchas gracias :D

    ResponderEliminar
  3. Me alegro de que os sirviera. Gracias por visitar mi blog!

    ResponderEliminar
  4. Hola Patricia, felicitarte por tu blog en primer lugar. Luego quería comentarte que desde hace unos días me ha surgido un problema con los iconos que añadí hace tiempo de forma manual a través de otro tutorial no recuerdo donde,concretamente el problema es con el icono de facebook, y no se como solucionarlo pues no tengo muchas nociones de de html. Este es mi blog y verás lo que pasa:
    http://enjaboname.blogspot.com/
    los iconos están al final del post y quisiera quitarlos todos.
    Un abrazo
    Sergio

    ResponderEliminar
  5. Hola Sergio,

    Yo tampoco soy una experta en HTML pero, en relación con el icono de Facebook, se me ocurre que debes haber perdido la imagen o haberte equivocado de dirección al enlazarla. El resto de iconos los tienes alojados en Image Schack, mientras que el de FB aparece en Picasa/Blogger. Para solucionar esto, tendrías que volver a subir el icono de FB al servicio que mejor te parezca, copiar la ruta de la imagen una vez cargada, y pegarla sustituyendo la URL actual, que tienes en tu código aquí:

    img class="rsociales-sobre" src="http://lh3.ggpht.com/_Go-jnwB2e7w/SaHSRY-AvsI/AAAAAAAABFw/SmkojETqA8U/facebook.png"

    Si quieres borrar todos los iconos (piensa que perderás la funcionalidad de compartir en redes sociales), entonces deberás buscar y borrar todo el código, desde la referencia a Menéame, que es el primero de la lista, hasta la de Twitter. Para encontrarlo, puedes probar a buscar dentro de tu plantilla el mismo código de FB que te he mencionado antes. A su alrededor, deberías ver los códigos del resto de iconos y las funciones asociadas a los mismos.

    Recuerdo que, en Blogger, esto se hace yendo a Diseño > Edición de HTML > Editar plantilla. Puede que tengas que expandir la plantilla de artilugios marcando la casilla correspondiente. Para buscar el código con facilidad utiliza la opción de búsqueda de tu navegador (en Firefox, Editar > Buscar, o Ctrl+F).

    Te recomiendo que, antes de hacer ningún cambio, descargues tu plantilla (se hace desde la misma página), para tener una copia de seguridad por si sale algo mal. Y que utilices la Vista Previa antes de guardar los cambios para comprobar que el resultado es el esperado.

    Siento no poder ser más específica... Espero que ésto te ayude en algo.

    Gracias por visitar mi blog,
    Patricia

    ResponderEliminar
  6. Muchas gracias Patricia, ya he solucionado el problema. Un saludo

    ResponderEliminar
  7. Hola!!

    Muchas gracias por tu gran explicación. Estoy modificando mi blog y me ha ido de fábula!!

    Solo tengo dos dudas complementarias:

    1) ¿Cómo se haría para que al darle al icono de la red social se abriera en otra ventana? Ahora mismo se abre en la misma ventana, encima de mi página (no se si me he explicado...).

    2) ¿Cómo se consigue que al poner el cursor del ratón encima del icono salga un texto? Tipo "sígueme en facebook", mensaje emergente al poner el cursor encima y no que salga siempre en el blogger.

    Muchas gracias de antemano!!

    Saludos y felicidades por tu página!!!

    Lorena

    ResponderEliminar
  8. Hola Lorena,

    Para que el enlace se abra en una ventana o pestaña nueva, coloca la siguiente etiqueta después de la URL del link:

    target="_blank"

    Para que al colocar el cursor del ratón sobre el icono se muestre un título, coloca la siguiente etiqueta después del target de antes:

    title="Texto escogido"

    ¡Gracias por la visita!

    ResponderEliminar
  9. Arreglado!!!

    Qué chulo!!! GRACIAS!!!!!!!

    ResponderEliminar
  10. GRACIAS!!!!!

    ResponderEliminar
  11. ¡Hola!

    Ya lo he hecho y se queda genial, sólo que se me quedan los 4 iconos que he usado en columna. ¿Cómo lo hago para que se queden los 4 iconos en la misma línea?

    Mil gracias por este post y tu ayuda :D

    ResponderEliminar
  12. ¡Ya está! ¡Lo conseguí! Sólo hay que poner los códigos html que has explicado uno detrás de otro :)

    ¡Gracias!

    ResponderEliminar
  13. Me alegro de que lo resolvieras, Anna. ¡Gracias por visitarme!

    ResponderEliminar
  14. Muchas gracias,explicaciones sencillas y practicas,para personas que no saben mucho,como yo,son de gran valor.

    ResponderEliminar
    Respuestas
    1. De nada, José. Me alegro de que te sirvieran. ¡Gracias por la visita!

      Eliminar
  15. Una explicación didáctica, de gran utilidad. Muchísimas gracias!!!!!

    ResponderEliminar