Iconos de redes sociales para tu blog


76 comentarios
4.9 : 36 Valoraciones

Vamos a colocar Iconos de redes sociales en nuestro blog o también para paginas web, traigo muchos iconos sociales y están listos para colocarlos en tu blog o web, si usas wordpress, blogger o cualquier otro servicio no te preocupes el código de estos botones sociales esta optimizados y la imágenes también, así tendrás mas popularidad entre tus seguidores

Iconos sociales

Bien, los iconos están completamente optimizados a mas no poder y se puede elegir de diferente tamaño. Cada icono tiene la etiqueta alt, (esta sirve para mostrar texto alterno a los buscadores si no pueden abrir la imagen) y title para mostrar el titulo de la imagen, estos iconos de redes sociales para web y blogs están muy bien hechos.

¿Porque agregar botones sociales?

El impacto social es algo crucial si quieres tener éxito en tus proyectos online, llegar a la mayor cantidad de usuarios es clave, pues, en cuanto mas gente te lea o vea mejor para ti. Un sitio web puede estar ofrecer muchas cosas, pero si no esta especializado puedes sugerir a tus visitantes o seguidores que vean tus trabajos a través de portales para tal fin, por ejemplo: puedo tener un blog y ofrecer música via soundcloud.

Otro factor es la facilidad que le ofreces a tus usuarios, puedes estar en contacto con ellos por las redes sociales, si soy alguien que pasa mucho tiempo en twitter, estaré pendiente a los mensajes que manden las paginas que sigo, puedo llegar a un nuevo articulo en una pagina mas rápido por un aviso social, que yendo de manera nativa al blog.

Generador de iconos sociales

Muy bien, vamos al grano, a continuación esta el generador de iconos, tiene los siguientes campos:

  • Una lista para elegir el icono que necesites, esta organizada alfabéticamente, inicialmente tiene el icono de facebook.
  • Un campo de texto donde escribirás lo que quieres que diga el icono y el texto alterno, en este caso inicial, posee por defecto el texto Sígueme en Facebook!
  • La opción redondo muestra como se ve el icono de esa manera.
  • Un slider con rango de 35 a 90, con este podrás ajustar el tamaño.
  • Un cuadro grande de texto, aquí se ira mostrando el código pertinente al icono elegido, mas los cambios realizados:

Configurando los iconos sociales

Bien, después de tener los iconos veras que cada código generado tiene esta forma:

<a href="URL" target="_blank"><img alt="siguenos en facebook" height="40" src="https://3.bp.blogspot.com/-MQuocq7OzfU/UiXwUY81yQI/AAAAAAAAB0Q/h6-R_R2-buI/s1600/face.png" title="siguenos en facebook" width="40" /></a>

Veamos que hacen las partes marcadas mas otras que están en el código, así podrás personalizar aun mas tus iconos sociales.

  • Lo que esta en rojo debes remplazarlo por la url de tu usuario o pagina en la red social o lo que sea que escogiste, por ejemplo, si tengo pagina de facebook, copiare la URL y la reemplazo por la de rojo, se hace lo mismo si elegiste twitter, google+ etc.
  • Lo que esta en color azul es el texto que mostrara al pasar el cursor, en el generador podrás agregar la frase que quieras, en nuestro ejemplo pondría: ¡sígueme en facebook!.
  • El color verde es el texto alternativo, este es el mismo que el del titulo, este por si la imagen por alguna razón no se pudo cargar, muestre el texto para dar a entender a que se refiere la imagen.
  • El fragmento target="_blank" se usa para abrir enlaces en otra pestaña del navegador, esto para que las personas puedan acceder a tu pagina social sin abandonar tu blog. si no quieres eso pues simplemente elimina esa parte.
  • Las partes height=»40″ y width=»40″ no creo que necesiten presentación, pero igual, son el ancho y alto de la imagen, en el generador puedes elegir un valor entre el 35 y 90.

¿Como poner el icono en mi blog?

Con tu icono mas que listo, solo debes seleccionar el código y, hacer lo siguiente dependiendo de la plataforma que uses.

Poner los iconos sociales en Blogger

Si usas blogger: copia el codigo -> ve a diseño -> añadir un gadget -> elige un HTML/Javascript, pega los códigos que elegiste y guarda.

Poner los iconos sociales en WordPress

si usas wordpress: copia el codigo -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pegas los códigos que elegiste.

si usas otra plataforma tu ya veras como los colocas. ¡Bien, están listos tus iconos de redes sociales para tus seguidores!

Personalizar los estilos de los iconos

Vamos ahora a darle algunos efectos, esto es totalmente opcional y si no quieres pues ignora esto. Como puedes ver en el generador esta la opcion de escoger un icono redondo, no es un icono redondo por aparte del cuadrado como tal, solo estamos aplicando estilos para personalizarlos.

Para usar estos efectos vamos a necesitar hacer uso de un contenedor, esto ara identificar las imagenes de nuestros iconos y poder aplicarles los efecto específicamente a ellos, entonces todos los códigos que elijas pégalos dentro de este código:

<div class="iconos-sociales">
... aqui van los códigos ....
</div>

La vista previa del icono no esta disponible en la versión móvil amp.

Iconos sociales redondos

En el codigo cuando se escoge la opcion: redondo, no aparece nada adicional, osea que no hay cambios extra, la opcion es mas que todo para dar un vista previa de como se verian con el efecto redondeado, si quieres el icono de esa manera entonces agregaremos un código justo debajo del contenedor que mostre arriba, el resultado final se vera así:

<div class="iconos-sociales">
... aqui van los códigos ....
</div>
<style>.iconos-sociales img{border-radius:50px;}</style>

Si no deseas los iconos totalmente redondos, puedes ajustar el valor que esta entre las etiquetas <style>, específicamente el fragmento border-radius:50px; a 30px por ejemplo, y tendran sutiles toques redondeados.

Espaciado entre los iconos

Si agregas los iconos tal cual a tu blog, lo mas probable es que aparezcan pegados uno seguido del otro, sin ningún espacio, para evitar esto solo debemos añadir un pequeño fragmento de código:

<style>.iconos-sociales img{margin:5px;}</style>

El valor en margin:5px lo puedes variar, esto hará que los iconos estén mas ceca o lejos entre ellos.

Iconos con efecto giratorio

Un buen efecto es que los iconos giren al pasar el cursor, giran 360 grados y cuando se quita el cursor se devuelven, ¿como hacer esto? pues con el siguiente código, dejado de el puedes ver un ejemplo del efecto en acción:

<style>.iconos-sociales img{ 
transition:all 0.5s ease-out;}
.iconos-sociales img:hover{
transform: rotate(360deg);
}</style>

Sígueme en Facebook

Aquí podemos notar la parte 0.5s, esta la puedes variar para aumentar o disminuir el tiempo en que el icono gira. El valor 360deg configura que tanto gira, osea que si lo cambiamos a 180deg solo dará media vuelva.

Este efecto queda muy bien junto al de icono redondo, para juntar ambos efectos solo unión, agregamos a este código la parte del de redondos, es decir el fragmento border-radius:50px; el resultado es el siguiente:

<style>.iconos-sociales img{ 
transition:all 0.5s ease-out;
border-radius:50px;}
</style>

Sígueme en Facebook

Redondear al pasar el cursor

Y un ultimo efecto pero bastante vistoso, el que al pasar el mouse el icono se torne redondo, y al dejar de pasarle el cursor, este vuelva a ser cuadrado. Utilizando el mismo codigo contenedor usaremos el siguiente para lograr dicho efecto:

<style>.iconos-sociales img{ 
transition:all 0.5s ease-out;}
.iconos-sociales img:hover{
border-radius:50px;}</style>

Sígueme en Facebook

Como ya sabes el valor 0.5s controla el tiempo que tarda en hacer el efecto, y el valor 50px que tanto se redondea, usamos este valor para un redondeado total, de ese valor para abajo como 20px, se nota menos lo redondo.

Si lo que queremos es exactamente lo contrario: los iconos redondos y que se vuelvan cuadrados, usaremos este fragmento en lugar del anterior:

<style>.iconos-sociales img{ 
border-radius:50px; 
transition:all 0.5s ease-out;}
.iconos-sociales img:hover{
border-radius:0px;}</style>

¿Y tú qué opinas del artículo?

 

  1. jose dice:

    Esto me esta funcionando muy bien

  2. iine dice:

    Muchísimas gracias!!

  3. Uriscakes dice:

    Gracias me has ayudado mucho.

    ★★★★★

  4. Dario dice:

    Excelente muchas gracias!!!

    ★★★★★

  5. FELCHA dice:

    muchas gracias

  6. Alejandro dice:

    va genial!! muchas gracias, pero no podrías poner otro icono para telegram? me gustaría poner uno para el grupo de difusión y otro para enviar mensajes.

  7. Hola Loqueando en verdad no esperaba encontrar al autor de Inovablog como autor de esta otra web jejeje, estaba leyendo el post y me di cuenta que todo es en base a puros códigos y cuando veo el motivo de que esto sea así es por ti que eres experto en Blogger y haz aprendido mucho a nivel de código jajaja.

    Si bien conozco muchas cosas a nivel de codigo html, ccs y javascript prefiero dejar todo eso para mis blogs en Blogger y para WordPress uso los plugins más ligeros porque me ahorra bastante trabajo, para respaldar esto si quieres busca en Google «Diarios de un Blogger» y encontraras en mi blog, ese lo cree en Blogger y esta muy bien optimizado por otra parte los que tengo en WordPress como te dije utilizo puros plugins en sus configuraciones, además el tema padre que tengo es Genesis Framework, por cierto te lo recomiendo ampliamente ya que es muy bueno.

    En lo que respecta a PHP no me he querido involucrar mucho pero puede que más adelante aprende de eso y bueno excelente post y espero que esta web crezca como se debe, saludos amigo.

  8. martha dice:

    Excelente, súper fácil y útil.

    Muchas gracias!

  9. German dice:

    Falta Gmail… para los correos electronicos

  10. Julio dice:

    Sos un genio amigo , están fácil poner estos iconos en blogger , voy a ver si las puedo poner en mí blog de WordPress , como tengo un plan gratis , después te cuento , gracias

  11. Facundo dice:

    Funciona todo muy bien, pero mi pregunta es: el tema del espacio y los efectos en que parte del código se pegan? Desde ya muchas gracias

  12. jose dice:

    Super wofff gracias hermano andaba pero loco

  13. Jucesu.blogspot.com dice:

    Excelente amigo gracias , ya tengo mis iconos , no hay personas que te dan una mano , sos muy buena persona , sin conocerte , muchas gracias

    ★★★★★

  14. Julio dice:

    Muchas gracias, sos buena persona , porque nadie te dan una mano , sos un genio , los quiero agragar a mí página y no tengo idea como hacerlo , si me podes ayudar , gracias

    ★★★★★

  15. David dice:

    Muy buen tutorial, Gracias por compartir.

    Diseño web corporativo profesional

  16. vanessa dice:

    excelente

    ★★★★★

  17. Fercha dice:

    Me funcionó de maravilla!!! Muchísimas gracias por este aporte de verdad que me ayudó mucho. Ahí lo puse en un gadget derecho y quedaron súper geniales mis redes. En verdad te agradezco muchísimo por esto, me súper dúper salvaste. Gracias y muchos saludos! n.n

  18. Carlos Burelo dice:

    Me encanto lo fácil que es comprender y usar estos codigos en blogger, per quiero colocarlos en horizontal, ¿hay alguna manera?

    ★★★★★

  19. Lorena dice:

    Excelente, super facil!

  20. Isai David dice:

    Me gusto mucho, gracias por la ayuda

    ★★★★★

  21. Muchisimas gracias!! Justo lo que andaba buscando

    ★★★★★

  22. Arely Salazar dice:

    Gracias por compartir

    ★★★★★

  23. Carmen dice:

    Me ha venido genial. Muchas gracias.

  24. Karina dice:

    Excelente, me ha servido de mucho, mil gracias por tu aporte.

    ★★★★★

  25. Elcalabazo dice:

    Me fue muy util, muchas gracias

  26. genesis dice:

    muy util , muchas gracias

    ★★★★★

  27. olli dice:

    muchas gracias eres un genio.. me sirvio de mucho

  28. Yesica dice:

    Me encanto

    ★★★★★

  29. Matsuoka dice:

    Tú informacion esta bien estructurada, es una informacion bastante util para quienes piensan crear blogs y necesitan diversos iconos

  30. Karla Santillan dice:

    Tu información es muy útil y ayuda para poder crear foros mas interactivos y bonitos

  31. monzterrath dice:

    los iconos nos sirven para poder poner bibliográficas lo cual lo considero muy útil ya que nos apoyas a tener otras maneras de redactar información

  32. CRIS dice:

    Muchas gracias por tu aporte! Tengo un problema, estoy usando una plantilla nueva de Blogger, Emporio, pero no le puedo incorporar los iconos sociales, no se si es motivo de Blogger, o que algo estoy haciendo mal. En la anterior plantilla que he usado no tuve problemas…

  33. sue dice:

    gracias por esta información pude poner los icon en mi blogger
    ahora necesito poner mi website en mi blogger eso sera posible?

    ★★★★★

  34. GUSTAV dice:

    ¡Eres un crack!, gracias por el aporte XD

    ★★★★★

  35. Vanessa Hernandez dice:

    ESTA GENIAAAAAAAAAAL!!! GRACIAS!!! Lo especificaste excelentemente! yo que soy super lenta para esto del código pero aun así entendí perfectamente como modificarlo! muchas gracias me salvaste… estoy haciendo una pagina web para una empresa durante mis practicas e implementando esto creo que quedara genial! por cierto, lo estoy haciendo desde WordPress, cosa que también especificaste <3 mil gracias x3
    me gusto el toque de *Tu email no se mostrara :v* tuvo shido :'vvvvv

  36. javier dice:

    Genial, mil gracias!!

    ★★★★★

  37. jose dice:

    disculpa solo que introduje los códigos para sigeme en faceboob y me da error al cargar no se que pasa , mas si se ve la imagen logo , pero eso no hace su huzo dice error

  38. Raquel dice:

    Muy bueno y muy bien explicado, muchas gracias. Excelente

    ★★★★★

  39. mai dice:

    TE AMO

    ★★★★★

  40. Jose Manuel dice:

    hola amigo, esta muy bien. Una pregunta: ¿tienes el código para el nuevo icono de instagram?

    ★★★★★

  41. Muchísimas gracias!!!

    ★★★★★

  42. Yeinson Ivan Arevillca Chambi dice:

    buenisimo

    ★★★★★

  43. Melina dice:

    No es claro el tema de como aplicar los efectos secundarios a los iconos, como vez en mi pagina pude agregar los iconos pero no los efectos. Gracias!

  44. Inti dice:

    Hola, puede ser que ya no funcione subir los iconos a nubes como google Drive o Dropbox? Porque no me aparece la imagen del ícono

  45. Ceci dice:

    Hola! me funcionó, pero quiero poner los íconos uno al lado del otro ¿cómo hago por fa?

    1. Francisco dice:

      Hola Ceci. Te voy a contestar yo pues, según veo, Esnedider NO le está constentando a NADIE 🙁 Honestamente, encontré la «solución» de casualidad pues, tenía el mismo problema que vos y, me vine aquí para hacer la misma consulta pero, viendo que vos, la hiciste antes y que aún, no te respondieron, probé con lo siguiente…. ¡y funcionó! 🙂 El caso es que, yo creé 3 iconos (Facebook, Twitter y RSS) y, como a vos, me aparecieron en una columna. Y viendo que nadie te daba bola, volví a mi widget, lo puse en «Visual», me paré con el cursor delante del 2do. icono (Twitter) y, sencillamente, lo «empué» con la tecla de mi computadora (backspace) hacia la izquiera, con lo cual, lo hice «subir», justo al lado del 1er. icono (Facebook). Luego hice lo mismo con el 3ro. (RSS) y ¡tanaaan! Los 3 me quedaron alineados uno al lado del otro, je! En otras palabras, los «traté» como si fueran parte de un texto y, los alineé. Espero que te sea útil. Nos vemos!

  46. Carlos dice:

    Que buena publicación, por otro lado ¿el apartado de comentarios al blog es con Html?, podrías hacer algún tutorial de como montar uno parecido.

  47. Rosmary dice:

    La verdad excelente artículo, me la hiciste muy fácil y quedó super lindo mi blog. Gracias!

    ★★★★★

  48. Andreina dice:

    Muchas gracias por compartir tus conocimientos!! muy util y fácil

    ★★★★★

  49. claudio dice:

    ESTIMADO IMPECABLE LA AYUDA, PERO TE MOLESTO CON UNA COSA MAS, LO QUE NECESITO ES QUE NO TENGA EL COLOR ORIGINAL DEL FACEBOOK, INSTAGRAM WHATSAPP QUE ESE COLOR LO REEMPLAZE POR EL COLOR DE NUETRA MARCA #e01b24 Y EN BLANCO, asi queda el icono en blanco lo que seria la F de facebook por ejemplo en blanco pero el azul reemplazado por el rojo nuestro #e01b24, me podrias ayudar? Gracias

  50. Limber dice:

    Gracias Aun esto funciona no los pude redondear pero hay estan , muchas gracias todo esta bien explicado.

  51. Artesano dice:

    Voy a ponerlo en práctica a ver como me va….

    ★★★★

  52. Nahir dice:

    Me encanto!!! Es la primera vez que hago un blog por blogguer y este post me facilitó bastante el tema de las redes sociales.
    GRACIAS!!!

    ★★★★★

  53. HHolguin dice:

    gracias muy valiosa la información, aunque necesito el icono de mercadolibre

    ★★★★★

  54. carlos dice:

    Excelente articulos, ahora tendras para botones que digan, registrese aqui
    gacias

  55. Daniel dice:

    Ya pude hacer todo eso, ya inserté las aplicaciones, pero yo elegí la opción de la aplicación redondeada, pero no me aparece nada de eso.

    ★★

  56. Cristhian dice:

    Buen artículo, bastante claro y útil. Vibras

    ★★★★★

  57. Carlos dice:

    Excelente, quedo muy bien. Gracias!

  58. Roberto dice:

    simplemente genial ;D

    ★★★★★

  59. german dice:

    genial gracias

  60. Reflexiones dice:

    Muchísimas Gracias, es en demasiado exagerado lo sencilla y práctica explicación que das…me sirvio mucho. Con miedo y todo pero..todo salió muy bien…de nuevo GRACIAS!!!

    ★★★★★

  61. Luis dice:

    Excelente tutorial, te agradezco mucho

    ★★★★★

  62. gise dice:

    Hola, tendras el icono de gmail? gracias por toda la info

  63. Matias dice:

    Muy buen post!! Súper útil. Lo compartiré.

    ★★★★★

  64. Carlos dice:

    Hola Muchas Gracias por el aporte !!!

    ★★★★★

  65. rodolfo dice:

    20 pts. Excelente

    ★★★★

  66. Gilberto dice:

    ¡Muy Bueno!

    ★★★★★

  67. Muy buen articulo me ha sido de gran ayuda, muchas gracias.

  68. Felipe dice:

    Muchas gracias, serías posible que agregaras el icono de GitHub? te lo agradezco mucho

  69. alberto dice:

    hola atodos, alguien me podria ayudar y desir como poner los botones para que giren? entiendo que aqui esta el codigo lo que no se es donde poner el codigo si es despues ,antes o intermedio.
    alguien me podria ayudar porfavor

  70. Pablo dice:

    Excelente, Muchísimas gracias !!!
    Me ha servido mucho.
    Sólo te falta el logo de TikTok
    Saludos !!!!

    ★★★★★

  71. Oye la verdad muchas gracias por este articulo, me a sido de gran ayuda, saludos.

  72. Dudu dice:

    Me ha ido genial! Muchas gracias y sobretodo el explicarlo tan claro.

    ★★★★★

  73. ELSA dice:

    ¿PUEDES AÑADIR EL ICONO DE TIKTOK POR FAVOR? Gracias

  74. Blas dice:

    Falta poner el icono de TikTok que no está porque esa red social es muy reciente pero yo la quiero poner en mi blog de Blogger que me estoy empezando a crear porque tengo una cuenta en TikTok. Por si acaso lo actualizas avisame para poder intergrarlo