Blog de Estrategia y Marketing Digital

Cómo poner iconos de redes sociales en un widget de wordpress.org | Comunicando Va | Marketing y Social Media para autónomos y pequeñas empresas

Cómo poner iconos de redes sociales en WordPress

Está claro que un blogger sin redes sociales es como un jardín sin flores. Son una herramienta fundamental para promocionar nuestro contenido.

Así, al igual que los botones de compartir son importantes, también es interesante que facilitemos la opción de que nos sigan.

Cómo poner iconos de redes sociales en un widget de wordpress.org | Comunicando Va | Marketing y Social Media para autónomos y pequeñas empresas

Sé que es una tontería, pero la verdad es que me costó encontrar la forma de que se quedaran como yo quería. No sé por qué, pero con la mayoría de los códigos que encontraba se quedaban en vertical.

Peeeero ¡por fin encontré la forma de que se quedara bonito!

Ahí va cómo descubrí hacerlo:

1. Buscar los iconos que quieras añadir

Puedes buscar en internet poniendo iconos redes sociales” en Google Imágenes y te salen millones. Simplemente tienes que buscar el estilo que más te guste y pegue con tu web.

Normalmente te vienen todos los iconos en una misma imagen, sólo tienes que ir cortándolos y guardándolos.

Otra opción, si sabes algo de diseño, es hacerlos tú mismo completamente personalizados.

Sólo una cosa importante, lo hagas como lo hagas: guárdalo en .png para que el fondo sea transparente y no se vea ningún filo.

2. Subir las imágenes a la carpeta “Medios”

medios

3. Añadir el código

  • Nos vamos al apartado Apariencia > Widget y añadimos en el sidebar un campo de texto.
  • Ponemos el siguiente código, sustituyendo los campos en rojo:

<center> <tr> <td> <a href=’URL DE DESTINO‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL DE LA IMAGEN‘ target=’_blank’/></a> </td> </tr> </center>

** El código <center> es para que las imágenes se queden centradas, si lo quieres a la derecha habría que poner <right> y a la izquierda <left>.

Para poner la URL de la imagen tenemos que ir a “Medios”, darle a editar en la imagen que queremos poner y copiar la URL de archivo:

editar

URL-de-archivo

Para poner varios iconos en la misma línea, copiamos y pegamos el mismo código tantas veces como queramos, dentro del mismo widget de texto, por ejemplo:

<center> <tr> <td> <a href=’URL DE DESTINO 1‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL DE IMAGEN 1‘ target=’_blank’/></a> </td> <td> <a href=’URL DE DESTINO 2‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL DE IMAGEN 2‘ target=’_blank’/></a> </td> <td> <a href=’URL DE DESTINO 3‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL DE IMAGEN 3‘ target=’_blank’/></a> </td> </tr> </center>

Y para poner varias filas, simplemente poner debajo otro código igual. Es decir, para que se quede como la imagen que he puesto al principio sería:

<center> <tr> <td> <a href=’URL FACEBOOK‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL IMAGEN DE FACEBOOK‘ target=’_blank’/></a> </td> <td> <a href=’URL TWITTER‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL IMAGEN DE TWITTER‘ target=’_blank’/></a> </td> <td> <a href=’URL LINKEDIN‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL IMAGEN DE LINKEDIN‘ target=’_blank’/></a> </td> </tr> </center>

<center> <tr> <td> <a href=’URL INSTAGRAM‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL IMAGEN DE INSTAGRAM‘ target=’_blank’/></a> </td> <td> <a href=’URL PINTEREST‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL IMAGEN DE PINTEREST‘ target=’_blank’/></a> </td> <td> <a href=’URL WORDPRESS‘ style=’display:inline-block;’ target=’_blank’><img border=’0′ src=’URL IMAGEN DE WORDPRESS‘ target=’_blank’/></a> </td> </tr> </center>

¡Y con esto ya tenemos nuestros iconos de redes sociales en nuestra web o blog de WordPress!

¡¡¡ATENCIÓN!!!

He publicado un nuevo post en el que os doy las soluciones a las dudas que me soléis preguntar tanto en los comentarios como por e-mail. Podéis verlo aquí.

No obstante, para cualquier cosita por aquí estamos 🙂

VOLVER A TUTORIALES DE WORDPRESS.ORG

40 comentarios

  1. gloriallopis
    08/11/2013

    me ha venido fenomenal tu post pero me quedo atascada en este punto: Nos vamos al apartado Apariencia > Widget y añadimos en el sidebar un campo de texto. No sé si mi tema no admite esta opción o no sé cómo hacerlo. me puedes ayudar? gracias!

    Responder
    • Idoia Chacartegui
      08/11/2013

      ¡Hola Gloria!

      Claro que sí. He visto que en tu blog tienes el tema “Chateu”. Pues te vas a Apariencia -> Widgets.

      Aquí tienes 2 partes:
      – A la izquierda el apartado de widgets disponibles, que son todos los que puedes usar.
      – A la derecha tu área de widgets, que tienes 6 zonas diferentes para elegir la ubicación de tus widgets: área de widgets de la barra lateral, a pie de página superior y las 4 áreas de widgets del pie.

      Pues si te vas a la parte izquierda, donde están los widgets disponibles, más o menos por el final te encuentras un widget que se llama “texto”. Pinchas y lo desplazas al área de widgets que tú quieras.
      Una vez que lo tienes ahí, ya pegas y completas el código que he puesto en el post.

      ¡Espero que esto te sirva!

      Si no ya sabes, me dices e intento ayudarte.

      ¡Un abrazo!

      Responder
      • gloriallopis
        14/11/2013

        conseguido Idoia!! me ha costado lo mío pero ya está, al final se trataba de escribir el código y no de copy-paste. gracias otra vez por haberme escuchado!;-)
        gloriallopis.wordpress.com

        Responder
        • Idoia Chacartegui
          14/11/2013

          ¡Estupendo Gloria!

          Ya te he cotilleado y he visto que te funcionan todos los enlaces perfectamente.

          Para cualquier cosa que necesites, ya sabes donde encontrarme 🙂

          Un abrazo!

          Responder
  2. gloriallopis
    12/11/2013

    hola otra vez Idoia, no sé si me puedes ayudar otra vez. Es que no consigo que me aparezca el icono bien. No lo entiendo porque tengo la imagen guardada en medios pero es como si no la reconociera. Si no me puedes ayudar lo entiendo y si puedes genial;-)
    gracias

    Responder
    • Idoia Chacartegui
      12/11/2013

      ¡Hola Gloria!

      Pues así de primeras no sé qué decirte, así que vamos a ir descartando cosas.

      Este es el código para una sola red social:

      ¿Has comprobado no haber borrado ninguna comilla (‘)? Todas las comillas que están en este código tienen que seguir estando cuando sustituyas los dos enlaces.

      Como dato (por si acaso) la comilla es la que está en el signo de interrogación (?).

      ¡Llegaremos a la solución! 🙂

      Responder
  3. Virginia Russo
    20/01/2014

    Es muy bonito! Pero tengo un problema: copio y pego, reemplazo los links y cuando actualizo me agrega comillas! Estas son las que has puesto: ’ pero me agrega otro par después de cada una! Las que agrega son de este tipo ” . Las fotos no me aparecian por este motivo, deje todas las comillas de este tipo ” y se ve todo bien pero no en hileras, es una imagen debajo de la otra, tamaño jumbo! jajaja ay es frustrante! modifique toooodas las comillas por las originales y cuando le puse actualizar de nuevo la misma historia!

    Responder
    • Idoia Chacartegui
      20/01/2014

      Hola Virginia!

      ¿Has conseguido arreglarlo? Me he metido en tu blog y se ven muy bien las imágenes de las redes sociales, todas colocaditas.

      Cuéntame, ¡a ver si conseguimos solucionarlo!

      Responder
      • Virginia Russo
        20/01/2014

        Pero no use los códigos de tu blog porque no me funcionaban 🙁
        Lo saque de otro lado.

        Responder
  4. charocd
    26/02/2014

    Hola Idoia…

    Estoy que me va a dar algo.. no me sale
    Siempre hay que escribir la comilla (de la tecla de ?) tanto para las que abren como las que cierran…
    Copio todo el codigo tal cual a mano …

    Responder
    • Idoia Chacartegui
      26/02/2014

      ¡Hola Charo!

      La verdad es que esto de los códigos puede llegar a ser un follón, yo tuve que buscar un montón hasta conseguir uno que me sirviera.

      Prueba a poner este código, a ver si así te sale (es el que he puesto en otra web):

      Ya me dices.

      ¡Saludos!

      Responder
  5. Maria Sampedro Bardal
    18/04/2014

    Muchas gracias por el post, ya puede incluir los iconos. Sino es por artículo, estaría aún pegándome con ellos

    Responder
  6. corrunxo
    29/04/2014

    Hola Idoia!
    Estoy intentando enlazar mis redes sociales tal y como lo explicas en tu post, lo hago tal cual y lo único que no me sale es la imagen del icono, me sale un cuadradito, pero no me sale la imagen de facebook.
    Agradecería tu ayuda.
    Un Saludo,
    Sandra

    Responder
    • Idoia Chacartegui
      29/04/2014

      ¡Hola Sandra!

      Muchas gracias por pasarte por el blog.

      Me he metido en el tuyo -perdona por la intromisión ;)-para ver si podía ver la imagen y creo que el problema está en las comillas, están todas duplicadas:

      Prueba a ponerlo así:

      Ya me dices.

      Saludos!

      Responder
      • corrunxo
        29/04/2014

        Idoia, muchisisimas gracias por tu contestación!! ya lo tengo solucionado, es que al dar al botón guardar cuando ponia el codigo, me duplicaba las comillas, he borrado las comillas duplicadas y le he dado a guardar otra vez, y ya esta. Solucionado!!! Que contenta estoy, porque no encontraba como poner los iconos y tu post me ha servido de gran ayuda.
        Un saludo,
        Sandra

        Responder
        • Idoia Chacartegui
          29/04/2014

          ¡Me alegra que te haya servido! Ya veo que te queda genial.

          Por aquí estoy para lo que puedas necesitar 🙂

          Saludos!

          Idoia

          Responder
  7. Stylish Musician
    05/05/2014

    Hola Idoia, yo me estoy volviendo loca con esto de los códigos, he probado con unos códigos de otra web, y me sale el icono y unos cuadraditos al lado de cada uno, ahora he probado con los tuyos, y no me sale cuadradito, pero me salen enooorrrmes…. como cambio el tamaño?? si te puedes meter en mi página verás como salen unos y otros. http://www.stylishmusician.com

    Besitosss

    Responder
    • Idoia Chacartegui
      05/05/2014

      ¡Hola!

      Muchas gracias por pasarte por el blog 🙂

      Me he metido en tu blog y sólo veo 3 iconos (facebook, instagram y twitter). No veo nada del cuadradito que dices y el tamaño de los que están la verdad es que no lo veo mal, no sé si es que al final has conseguido arreglarlo.

      De todas maneras, si quieres modificar el tamaño puedes utilizar los códigos width (ancho) y height (alto). Se quedaría así:

      En la X pones los pixeles que quieras.

      Espero que te sirva, ¡ya me cuentas!

      Un beso!

      Responder
  8. johnymart
    13/05/2014

    Buenas tardes Gloria!
    ¿Cómo estás?… fijate que estaba leyendo el blog y los comentarios y creo que tengo el mismo problema repetido que varios!… la imagen no me la reconoce, me sale con la hoja cortada a la mitad… y lei lo de las comillas dobles y todo y no me sale, aparte cuando le doy click no me manda a las páginas, me dice que hay un error…
    serías tan amable de ayudarme si puedes?
    te agradeceria mucho 🙂
    mi página es http://www.ecominerales.com

    saludos

    Jonathan

    Responder
    • Idoia Chacartegui
      13/05/2014

      ¡Hola Jonathan!

      En primer lugar, muchas gracias por pasarte por el blog 🙂

      Vamos a ver si te puedo echar un cable!

      Me he metido a cotillear en tu web y salen todas las comillas duplicadas, por un lado las dobles comillas (“) y por otro la comilla simple (‘).

      Prueba a borrarlo y a escribirlo a mano, utilizando la comilla simple (‘), la que está en la misma tecla del signo de interrogación.

      Ya me dices!

      Idoia

      Responder
      • johnymart
        13/05/2014

        Idoia no me sale :(.. lo puse con la comilla simple y sigue pasando lo mismo . no tendria que actualizar algo?

        Responder
        • Idoia Chacartegui
          13/05/2014

          Hola Jonathan,

          Me he vuelto a meter en tu web y siguen saliendo las comillas duplicadas.

          Mira, ponte en la página principal de tu web, ve a uno de los iconos y dale al botón derecho y a inspeccionar elemento.

          Verás que ahí te sale el código y que se ven las comillas duplicadas. He hecho una prueba y creo que lo ideal es que pongas comillas dobles (“), las de la tecla 2.

          Tú mismo puedes probar a modificarlo en el apartado de “inspeccionar elemento”. De esta forma verás en tiempo real los cambios, aunque luego tendrás que ir a modificarlo al widget, ya que estos cambios no se guardan en tu web.

          Eso sí, los iconos se ven gigantes, tendrás que modificarlo con los códigos width y height.

          Prueba a ver si así te sale.

          Saludos!

          Responder
  9. José L. Arenas Galarza
    02/07/2014

    ¡GRACIAS! ¡Por fin encontré un lugar donde me orientaron de maravilla y pude lograr colocar el icono de Facebook con enlace a mi página sin ningún problema! ¡Gracias, Gracias, mil Gracias!

    Responder
  10. Camila
    26/09/2014

    Hola Idoia,
    Gracias por las explicaciones. Quería preguntarte como has hecho para insertar esa caja de suscripción al final del post.
    Saludos

    Responder
    • Idoia Chacartegui
      26/09/2014

      Hola Camila!
      Lo he hecho con el plugin Magic Action Box.
      Muchas gracias por pasarte!

      Responder
  11. Lara
    20/11/2014

    Hola Idoia! Verás he hecho todo lo que has dicho en tu blog y me ha servido cantidad! Ya tengo mis iconos en la página de blog pero me gustaría poder unir el link de Facebook al icono del blog para que me lleve directamente al Facebook, es posible hacerlo?

    Gracias!

    Responder
    • Idoia Chacartegui
      20/11/2014

      Hola Lara!

      Imagino que lo que me dices es que la gente pueda pinchar en el icono de Facebook de tu blog y le lleve a tu Facebook, no?
      Si te fijas en el código que he puesto, pone en rojo URL DE DESTINO. Tienes que sustituir ese texto con tu link de Facebook y así cuando la gente pinche se le abrirá otra pestaña con tu Facebook.

      Espero que te sirva, ya me dices.

      Un saludo y muchas gracias por pasarte!!

      Responder
  12. Mariu Moreno
    10/03/2016

    Buenas Idoia, no se si todavía sigues utilizando este blog y si todavía funciona este código, estoy intentando poner los iconos de las redes en un wordpress y no lo consigo. Directamente no me aparece

    Responder

1Pingbacks & Trackbacks en Cómo poner iconos de redes sociales en WordPress

Deja tu comentario

Tu correo electónico no será publicado. Los campos obligatorios estan marcados con un *