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

Social Media Icons

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:

Iconos

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:
    -
    <a href=”link a tu perfil personal de red social TARGET=”_blank”><img src=”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” /></a>&nbsp;
    -
    en mi caso queda así:

facebookHTML

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.

About these ads

67 Respuestas a “Cómo poner iconos de redes sociales en el blog (WordPress)

  1. Hola Laura,
    ¡Muchas gracias por el post! Me ha funcionado a las mil maravillas, lo único que los iconos me aparecen uno debajo de otro. ¿Como puedo hacer para que aparezcan uno al lado del otro? En vertical en lugar de horizontal como ahora?

  2. hOLAAAA!! No lo estaria logrando!! Quiero enviar desde mi pagina de wordpress a mi pagina de facebook, pero me dice link roto!! En que estare fallando? Muchas graaacias!!
     

  3. Gracias por compartir Laura. He conseguido poner el icono de BLOG que he creado con photoshop (png) en mi web realizada con WordPress.org 3.9.1. Uso el plugin MZR Social pero no me da la opción de poner icono de BLOG, por eso he seguido tu tutorial. Ahora bien! Lo que quiero es hacer que el icono de Blog, cambie de color al pasar el mouse por encima y que se mantenga al hacer “click”, igual que he podido definir en el resto de iconos a través del plugin MZR social. ¿cómo puedo hacerlo? Gracias.

      • Hola Laura,gracias por tu respuesta, ¡Conseguí resolverlo! por si alguien más tiene esta inquietud, copio el código que ma ha servido para resolverla:

        Ahora…otra pregunta: ¿sabrías cómo mover el icono al lugar deseado? Si queremos ponerlo un poquito más arriba o más a la derecha…¿? Gracias de nuevo.

  4. Hola Laura!
    Me ha ayudado mucho tu guía, pero tengo un problema: no me sale la imagen del icono en si, me aparece un cuadradito, lo demás lo he hecho bien porque me enlaza bien a la red social, pero la imagen no se porque no sale. Te agradecería tu ayuda.
    Un saludo,
    Sandra

      • Hola Laura, gracias por tu contestación.
        Ya lo tengo solucionado, cuando le daba a guardar el codigo, se duplicaban las comillas, he borrado las comillas duplicadas lo he vuelto a guardar y ya me sale la imagen del icono.
        Muchas gracias!
        Un saludo!!Sandra

  5. Hola Laura,

    Me ha sido muy útil tu guia. Pero tengo una duda… ¿puedo hacer que cuando cliquen en el icono se abra una pestaña específica para la red social?. Es que tal como lo he hecho se me abre en la propia del blog.

    Es posible hacerlo?

    gracias

  6. excelente labor la tuya, desinteresada y efectiva.
    una pregunta: ¿como puedo quitar los iconos sociales de mi pagina?
    concretamente de las fichas de los monumentos
    mi versión de wordpress es la 3.5.2
    gracias anticipadas

    • Hola Juan Pedro!
      Muchas gracias, lo hago porque considero que lo que me ha sido útil a mí lo puede ser para vosotros :)
      Respecto de tu blog, si usas .org este post no te sirve, porque funcionarías con plugins.
      Tengo pendiente escribir sobre el tema, espero poder ayudarte en breve.
      Salu2.0!

  7. Hola laura, muy interesante tu entrada pero me da varios problemas tu código (seguramente estaré haciendo algo mal jajaja) Me sale el icono de la foto pero dañado y luego el link no me funciona me lleva a una pagina con el siguiente mensaje : The requested URL /”https://www.facebook.com/FeelTheBrand was not found on this server. ¿Me podrías ayudar? Un saludo

    • Hola Rosina.
      Antes de nada, mil gracias por tu interés.
      Por lo que veo, parece que está mal copiada la dirección de destino, a juzgar por ese ‘/â’ que aparece antes del ‘http’. ¿Me podrías pasar el código completo que estás utilizando? Pégamelo aquí o envíamelo a info@lauracamino.es y lo miramos.
      Salu2.0!

      • El enlace te da error por un problema de las comillas, las he vuelto a escribir. Ahora funciona sin problema.

        Pero no se ve la foto: esto es porque la dirección http

        img src=”http: //www.wefeelthebrand.com/?attachment_id=367

        que le has puesto no es correcta. Si has subido la imagen a tu blog, la dirección que debes poner no es la de 'Enlace permanente' que aparece debajo del título de la foto, sino la de 'URL de archivo' que encontrarás en el cuadro de la derecha en la página de edición de dicha imagen.

        Cuéntame qué tal así :-)

  8. Muchas gracias Laura. Fue muy sencillo, y ha quedado todo muy bien. Ayer estuve el día entero tratando de descubrir de qué forma se coloca una “cajita” con los datos personales, debajo de cada post, lo cual es un poco más difícil que agregar estos botones. Aún así, lo explicás muy bien, y sobre todo, das para copiar ese texto al que hacerle esas sencillas modificaciones, uno ya tiene esos dichosos botones. De verse vacío y aburrido, en poco menos de 24 horas (sin saber yo nada de programación, ni querer hacerlo), mi blog de pronto tiene una apariencia más atractiva (¡ahora sí, parece un blog!), y ya está vinculado a todas esas redes sociales, lo cual es mejor todavía. Lo único que noto, es que al parecer no se pueden poner los botones de otros sitios, que en mi caso son los que utilizo mucho más que Facebook, Twitter o Youtube (páginas estas que, a excepción de Facebook, casi no utilizo). Me refiero a Slideshare, Scribd, Taringa, Wikipedia (que no sé si se puede, aunque supongo que sí). De estos últimos, sólo Slideshare tiene su botón, pero sólo en algunos de los paquetes que se pueden descargar, a los que en cambio les falta el botón de Linkedin, o tal vez el de Flickr, etc. Por lo que opté por no ponerlo, para que no “desentone” con los otros botones, que tienen un mismo diseño. De hecho si entrás a mi blog, verás que hice “trampa” al completar la lista de botones con uno que tiene otro diseño, aunque es similar en cuanto a la forma, a los que ya había agregado; lo cual, insisto, lamentablemente no ocurre con el de Slideshare, y demás :(.
    ¡Y casi me olvidaba!: al pasar el cursor, no aparece ninguna “leyenda”. ¿Qué pude haber hecho mal? Yo reemplazo la tercera sección que aparece en rojo, en el ejemplo que das, completamente por el nombre de la red o el sitio al que lleva el botón, pero el nombre del sitio no aparece. Como dato que tal vez te sirva, yo pegué en un mismo widget de texto, todos los “códigos”, por que al poner un widget de texto por cada red social, me ubicaba los botones luego, uno debajo del otro, y todos muy separados. ¿Esto tendrá que ver? Desde ya muchas gracias:

    http://elblogdevalentinplastino.wordpress.com/

    • Hola, Valentín.

      Antes de nada, déjame que te agradezca tanto tu interés por mi blog como tus palabras. Me alegra que te haya sido útil este post, esa es la mayor satisfacción para mí :)

      En referencia a los iconos que me comentas, estás en lo cierto. Es muy difícil conseguir un pack gratuito que traiga absolutamente todos los que necesitamos. Una opción que tienes es la de insertar el logo de Slideshare, por ejemplo, como una imagen independiente, como hice yo con Storify el el menú de la derecha de este blog.

      Por favor, copia y pega en un e-mail el código que has usado para tus iconos, y envíamelo a info@lauracamino.es para poder comprobar por qué no te deja visualizar el ‘texto alternativo’.

      Salu2.0!

  9. Hola, todo ok excepto que me sale el enlace de la imagen como roto. Lo he intentado con una url de google, subiendo una imagen a mi galería y copiando el enlace y también con tu código pero cambiando la dirección de twitter por la mía… No lo he conseguido :S Gracias por la ayuda!

    • Hola!
      No sé quién es Victoria, pero igual te puedo ayudar yo :-)
      Es muy sencillo. Sólo has de acceder, desde el menú de tu escritorio de WordPress, en la barra lateral izquierda, a la opción Ajustes –> Compartir. Ahí verás un apartado ‘Botones de compartir‘. Arrastra los iconos de las redes sociales escogidas desde el cuadro de ‘Servicios disponibles‘ a ‘Servicios activados‘. Así de simple!
      Espero que ye haya sido útil.
      Salu2.0!

  10. Hola de nuevo Laura! ya he buscado y al parecer para poder poner un plugin que me instale iconos tengo que cambiarme a wordpress.org ya que .com no da la opción, y después de buscar y buscar (aunque ya lo había hecho antes de toparme con tu artículo) veo que la única manera es usando el código que me das, porfa ayúdame a que no aparezca la imagen rota =(

  11. Tarde mucho en encontrar como!! MIL gracias es el único blog que lo explico como debe ser, pero aún así el cuadrito de la imagen es todo lo que me aparece, no me aparecen mis iconos, no sé que ando haciendo mal, ya lo hice como debe ser según yo! =/

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s