Iconos de redes sociales para tu blog
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
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="http://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>
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>
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>
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>
eXCELENTE LO ÚNICO MALO ES QUE NO SALE EL DE WATTPAD, SOLO ME MANDA AL DE FACE. GRACIAS
hola ise todo no me sale redondo el icono
HOLA AQUI NO TIENEN EL TIK TOK ?
Excelente. Sólo faltó el de Daylimotion.
Gracias, me ha servido para colocar un par de ellos. Necesitaba también el de Wattpad, y ahí me he liado, porque no le tenéis, pero aún así, gracias por la ayuda en los otros.
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
¿PUEDES AÑADIR EL ICONO DE TIKTOK POR FAVOR? Gracias
Me ha ido genial! Muchas gracias y sobretodo el explicarlo tan claro.
Oye la verdad muchas gracias por este articulo, me a sido de gran ayuda, saludos.
Excelente, Muchísimas gracias !!!
Me ha servido mucho.
Sólo te falta el logo de TikTok
Saludos !!!!
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
Muchas gracias, serías posible que agregaras el icono de GitHub? te lo agradezco mucho
Muy buen articulo me ha sido de gran ayuda, muchas gracias.
¡Muy Bueno!
20 pts. Excelente
Hola Muchas Gracias por el aporte !!!
Muy buen post!! Súper útil. Lo compartiré.
Hola, tendras el icono de gmail? gracias por toda la info
Excelente tutorial, te agradezco mucho
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!!!
genial gracias
simplemente genial ;D
Excelente, quedo muy bien. Gracias!
Buen artículo, bastante claro y útil. Vibras
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.
Excelente articulos, ahora tendras para botones que digan, registrese aqui
gacias
gracias muy valiosa la información, aunque necesito el icono de mercadolibre
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!!!
Voy a ponerlo en práctica a ver como me va….
Gracias Aun esto funciona no los pude redondear pero hay estan , muchas gracias todo esta bien explicado.
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
Muchas gracias por compartir tus conocimientos!! muy util y fácil
La verdad excelente artículo, me la hiciste muy fácil y quedó super lindo mi blog. Gracias!
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.
Hola! me funcionó, pero quiero poner los íconos uno al lado del otro ¿cómo hago por fa?
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!
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
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!
buenisimo
Muchísimas gracias!!!
hola amigo, esta muy bien. Una pregunta: ¿tienes el código para el nuevo icono de instagram?
Megusta
TE AMO
Muy bueno y muy bien explicado, muchas gracias. Excelente
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
Genial, mil gracias!!
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
¡Eres un crack!, gracias por el aporte XD
gracias por esta información pude poner los icon en mi blogger
ahora necesito poner mi website en mi blogger eso sera posible?
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…
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
Tu información es muy útil y ayuda para poder crear foros mas interactivos y bonitos
Tú informacion esta bien estructurada, es una informacion bastante util para quienes piensan crear blogs y necesitan diversos iconos
Me encanto
muchas gracias eres un genio.. me sirvio de mucho
muy util , muchas gracias
Me fue muy util, muchas gracias
Excelente, me ha servido de mucho, mil gracias por tu aporte.
Me ha venido genial. Muchas gracias.
Gracias por compartir
Muchisimas gracias!! Justo lo que andaba buscando
Me gusto mucho, gracias por la ayuda
Excelente, super facil!
Me encanto lo fácil que es comprender y usar estos codigos en blogger, per quiero colocarlos en horizontal, ¿hay alguna manera?
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
excelente
Muy buen tutorial, Gracias por compartir.
Diseño web corporativo profesional
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
Excelente amigo gracias , ya tengo mis iconos , no hay personas que te dan una mano , sos muy buena persona , sin conocerte , muchas gracias
Super wofff gracias hermano andaba pero loco
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
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
Falta Gmail… para los correos electronicos
Excelente, súper fácil y útil.
Muchas gracias!
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.
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.
muchas gracias
Excelente muchas gracias!!!
Gracias me has ayudado mucho.
Muchísimas gracias!!
Esto me esta funcionando muy bien