Cómo poner los iconos de las redes sociales en blogger.
En este tutorial vamos a explicar como poner unos iconos o imágenes enlazados a tus redes sociales. Si además del blog tienes página en facebook, pinterest, instagram o twitter puedes ponerlo en tu blog de una forma muy sencilla para que la gente que te visite pueda ir también a tus otras páginas.
Antes de empezar vas a necesitar unos iconos o imágenes de todas las redes sociales que quieras poner. En internet hay muchos sitios donde encontrar iconos que puedes descargar y utilizar de forma gratuita, pero si te gustan también te puedes descargar estos que hemos preparado nosotros 🙂
- Descargar iconos gratis de redes sociales naranja
- Descargar iconos gratis de redes sociales gris
- Descargar iconos gratis de redes sociales menta
- Descargar iconos gratis de redes sociales rosa
Cuando encuentres unos iconos que crees le pueden ir bien a tu blog los tienes que descargar y después subirlos de nuevo a Internet en un espacio tuyo que puede ser Dropbox, Google drive o Picasa, incluso puedes subirlos a blogger. Lo importante es que los tienes que subir porque vamos a necesitar la dirección o url de cada una de las imágenes.
Una vez subidos los iconos copia todas las url de cada una de ellas y pégalas en tu blog de notas para tenerlas listas.
- Lo siguiente es ir a tu panel de control Plantilla/Diseño.
- En el lado derecho de la pantalla (ver foto) tienes que hacer click en añadir un gadget para poner tus iconos en la barra lateral.
- Ahora busca en la siguiente ventana que te aparece Html/Javascrip y dale al +
- El código que viene a continuación es para poner 4 redes sociales pero puedes añadir o quitar las que quieras, así como cambiar el orden. Pega el siguiente codigo en el espacio que dice contenido (ver foto abajo).
<center>
<a href=”aqui va el enlace a tu facebook”><img src=”aqui va la url de tu icono de facebook” img border=”0″ /></a>
<a href=”aqui va el enlace a tu pinterest”><img src=”aqui va la url de tu icono de pinterest” img border=”0″ /></a>
<a href=”aqui va el enlace a tu instagram”><img src=”aqui va la url de tu icono de instagram” img border=”0″ /></a>
<a href=”aqui va el enlace a tu twitter”><img src=”aqui va la url de tu icono de twitter” img border=”0″ /></a>
</center>
- Si quieres que las páginas se abran en una pestaña nueva del navegador tienes que poner el atributo: target=”_blank”
<a href=”aqui va el enlace a tu facebook” target=”_blank”><img src=”aqui va la url de tu icono de facebook” img border=”0″ /></a>
<a href=”aqui va el enlace a tu pinterest” target=”_blank”><img src=”aqui va la url de tu icono de pinterest” img border=”0″ /></a>
<a href=”aqui va el enlace a tu instagram” target=”_blank”><img src=”aqui va la url de tu icono de instagram” img border=”0″ /></a>
<a href=”aqui va el enlace a tu twitter” target=”_blank”><img src=”aqui va la url de tu icono de twitter” img border=”0″ /></a>
</center>
- Si quies añadir el correo electrónico en alguno de los iconos
<a href=”aqui va el enlace a tu facebook” target=”_blank”><img src=”aqui va la url de tu icono de facebook” img border=”0″ /></a>
<a href=”aqui va el enlace a tu pinterest” target=”_blank”><img src=”aqui va la url de tu icono de pinterest” img border=”0″ /></a>
<a href=”aqui va el enlace a tu instagram” target=”_blank”><img src=”aqui va la url de tu icono de instagram” img border=”0″ /></a>
<a href=”aqui va el enlace a tu twitter” target=”_blank”><img src=”aqui va la url de tu icono de twitter” img border=”0″ /></a>
<a href=”mailto:aquitucorreoelectrónico@gmail.com” target=”_blank”><img src=”aqui va la url de tu icono de gmail” img border=”0″ /></a>
</center>
- Haz click en guardar y listo, si todo ha ido bien ya tienes toda tus redes sociales en el blog.
Enlaces relacionados con cómo poner las redes sociales en el blog:
Muuchas gracias,lo estaba buscando me sirvio muucho. no lo hice con lo de Face o Twitter.
Lo utilice para unas imagenes de mi Web
Si deseas entra a veerlo. http://animegratisxmf.blogspot.com/
QUISIERA SABER, COMO PONERLE NOMBRE DEBAJO DE LA IMAGEN
MUUCHAS GARCIAS..
Hola Neyver, una idea sencilla que te puede servir es poner el nombre debajo de las imágenes en un editor gráfico como photoshop, si no tienes photoshop mira este post en el que recomendábamos algunos editores gráficos gratuitos online: http://trucos-diseno-web.euroresidentes.com/2013/06/como-mejorar-las-fotos-de-tu-blog.html
Hola!! lo he hecho todo como pone aqui, pero la imagen de cada red social no se ve…. 🙂 joooo
May Makeupp
Hola May, veo que al final funcionó
ayudaa donde hago este paso??
Una vez subidos los iconos copia todas las url de cada una de ellas y pégalas en tu blog de notas para tenerlas listas.
Muchas gracias . no me salen las fotos de cada red social.
Hola Kristel, este paso lo tienes que hacer en tu ordenador, el bloc de notas es un programa para editar textos que tenemos en el ordenador, este paso es por comodidad para hacerlo más rápido pero puedes ir copiando y pegando las url directamente en blogger.
GRACIAS!! Me encanta el diseño de estos iconos! 🙂 De hecho, en mi blog ya tenía unos, pero he decidido cambiarlos. Un saludo!
Pásate si quieres 😉
http://momentosparaelchachacha.hol.es/blog
Hola no me funciona y no me sale el ícono que puedo estar haciendo mal?
Hola Anto, puede ser que hayas copiado mal la url de la imagen, comprueba cuando la copies que si la pegas en el navegador la puedes ver
¿Sabes como sería el código para que estos enlaces se abran en una pestaña nueve en vez de en la misma?
Muchas gracias!
Hola Ana, si quieres que los enlaces de tu blog se abran en una ventana nueva del
navegador tienes que añadir al código que hemos puesto arriba el atributo target="_blank".
Te pongo en el post los enlaces con el atributo.
Muchas gracias!! 😉
¿Cuáles son las url de las imagenes? Soy un poco nula en el tema ordenador. Lo siento 🙁
Hola Maria.
La url es la dirección o ruta de esa imagen. Por ejemplo la url o dirección de este blog es http://trucos-diseno-web.euroresidente.com
Para saber la url, ruta o dirección de una imagen tienes que ponerte sobre la imagen y hacer click en el botón derecho del ratón. Te tiene que salir un menú o ventana de color gris con opciones, entre ellas Copiar ruta de la imagen o Ver imagen.
Si eliges la opción Copiar ruta de la imagen lo que tu ordenador hace es copiar la dirección (url) de esa imagen en el portapapeles y ya la puedes pegar donde necesites.
Si eliges la opción Ver imagen te muestra la imagen en una nueva ventana del navegador. Fíjate y verás que en la barra del navegador te aparece la dirección (url) de tu imagen. Ahora sólo tienes que copiarla y pegarla donde necesites
Espero haber aclarado tus dudas 😀
Hola, Me encantó este post pero no sé como subir las fotos a mi blog u.u vos te referis a subirlas a una entrada? Esque no tengo Picasa ni nada de eso u.u
Hola Brenda, gracias me alegra que te gustara el post. Respecto a tu pregunta, te recomiendo tener un espacio para almacenar imágenes,si tienes una cuenta de gmail puedes usar google drive y Dropbox también funciona muy bien pero si quieres hacerlo directamente en blogger puedes hacerlo del siguiente modo.
Sube las imágenes a blogger como lo haces habitualmente en un post y no publiques ese post déjalo en borrador.
Ahora para saber la url de esa imagen dale al botón html que tienes en el lado izquierdo (hay dos botones color gris en uno pone redactar y en el otro html)
Cuando le das a html ves el código de tu post busca las palabras src=" "
todo lo que haya dentro de las comillas es la url de tu imagen.
Hola muy buena entrada para los que no sabemos nada de este rollo!
Una duda muy grande he hecho todo lo del tutorial y en el blog queda los iconos de las redes sociales, pero al darle Click se abre otra pestaña pero con la imagen no a la red social que quiero ir…
Que hago mal??
Hola Emmanuel, por lo que dices parece que has puesto la dirección de tu imagen en lugar de la dirección de la red social a la que quieres enlazar. Ejemplo: tienes que poner dentro de la etiqueta ( a href="aqui va el enlace a tu facebook" target="_blank") donde dice "aquí va el enlace de tu Facebook" sustituir esto por la dirección de tu página en Facebook, para ello entra en tu página de Facebook pincha sobre tu foto (la que sale en pequeñito en la barra azul de arriba) y al pinchar en la barra del navegador verás tu dirección
hola!!! muchas gracias lo intentare ahora mismo (solo tengo aNobbii, así que el icono lo tendré que fabricar yo misma ) mi blog actual es Libros de una noche de verano…. espero te des una vuelta y veas que tal quedo…. gracias nuevamente
Hola, he visto que has puesto el facebook y te ha quedado bien, genial 🙂
Muchas gracias, me encantan 🙂
http://www.itgirlailen.com
De nada
Hola pues a mi tampoco se me ven las imágenes y si las pego en el navegador si funcionas pq será?? Alguna ayudita?
Mira si las estás pegando en el sitio correcto y si todas las etiquetas están bien cerradas
Hola!!! Gracias a tu buenisimo tutorial he podido poner los botones en mi blog, muchas gracias por la explicacion tan clara y tan simplificada!!! Besotes!!!
Hola, genial post!!!!He hecho todo, pero los iconos se ve con un folio que tiene un paisaje, ¿qué he hecho mal??
Gracias!
Hola, creo que no los has descargado bien.
1. Primero tienes que descargarlos a tu ordenador
2. Descomprimirlos ( porque están en formato comprimido zip)
3. Subirlos al servidor (puedes hacerlo subiéndolos al blog o subiéndolos a picasa o a google drive)
4. Copia la dirección (o url) de las imágenes cuando estén subidas
muchas gracias por el post. No acaba de encontrar la solución y ha sido facilísimo!!!
De res 🙂
Muchas gracias, me han ido de lujo! 😀
El único que he echado en falta es el de Flickr! 😛
Petons
AUXILIO
Los iconos no se ven pero al darle click si está direccionado. Qué puedo hacer?
http://karinajpg.wordpress.com/
He entrado a tu blog y ya se ven, eso quiere decir que has encontrado una solución 🙂
Listo ya lo logré, muchas gracias. Excelente 20 puntos.
De nada Karina, gracias por tu comentario 🙂
Hola! Acabo de seguir todos los pasos al pie de la letra como has dicho. Los iconos los tengo subidos a dropbox, pongo las url en el sitio correspondiente y aun así no me salen los iconos. ¿Que puedo hacer?
http://theffashionflavour.blogspot.com.es/
No veo tu blog, pone que ha sido eliminado 🙁
¡Hola! Ya he seguido todos los pasos, pero tengo una pregunta: ¿a qué tengo que enlazar el icono de gmail?
Gracias 🙂
Hola Eva, cuando pones un enlace a un correo electróncio tienes que poner delante siempre "mailto:"
He añadido el código en el post para que lo puedas ver mejor y copiarlo si lo necesitas
Hola, a mí no me funciona, en vez de los iconos salen como imágenes rotas por la mitad…y eso que sigo los pasos al dedillo: enlace de facebook, icono de facebook, todo igualito… 🙁 vaya chasco porque estaba deseando conseguir ese efecto barra de iconos de redes sociales 🙁
Hola acabo de entrar a tu blog y veo bien los iconos, ¿ya lo has arreglado?
hola, hice todo tal cual tu explicación y si me lleva al mail pero en vez de mi ícono sale como una hojita rota, o algo asi, sabes qué podrá ser? ya rectifiqué la url de la imagen (la tengo en dropbox) y está bien, gracias!!
mi blog es chocochips.mx
Hola Julia, creo que puede ser por el nombre de la imagen, tu imagen se llama mail icon.jpg (hay un hueco entre la palabra mail y la de icon) prueba a ponerlo del siguiente modo: mail_icon.jpg
Si te fijas en la url de la imagen ese espacio que dejas lo lee como un %. Es conveniente no dejar espacios entre las palabras cuando subimos una imagen a internet.
Prueba con esta solución y ya me dices si te funcionó 🙂
hola trini, muchas gracias, lo logré subiendo la imagen a blogger, no se porque no se podía por dropbox, oye pero ahora tengo otra duda, subo las imágenes con fondo blanco, incluso con el fondo transparente, y ya en el blog se ve como grisecito, sabes como puedo hacer para que el fondo de las imágenes (como los botones y la cabecera por ejemplo) sean blancos y se fundan con el fondo del blog?? otra vez gracias
Hola Julia, en principio si quieres que una imagen se funda con el fondo del blog lo mejor es hacerla siempre con el fondo transparente y guardarla en formato png que es el que mejor se adapta en estos casos. Otra cosa que puedes hacer es hacer las imágenes con el mismo fondo de color que el blog, así también tienes más probabilidades de que la integración quede bien
Saludos 🙂
Hola. Felicidades por el blog. Está muy bien 🙂
Te quería preguntar por lo que debo estar haciendo mal, porque sigo las instrucciones (que me parecían muy claras), pero solo me salen dos iconos de un fragmento de papel o algo parecido.
Mi blog es el que te pongo a continuación.
http://www.cristinagallegojimenez.blogspot.com.es/p/blog-page.html
Muchas gracias 🙂
Me han encantado los botones y los estoy usando en uno de mis blogs nuevos. Solo echo en falta dos imprescindibles, el de Bloglovin y el de Google + (también el de Rss…) Una pena que no los hayas incluído porque habrían sido el tándem perfecto¡¡. ¿Serían posibles o ya es mucho pedir??, jeje.
Hola!! me ha encantado el post, muchísimas gracias! lo he hecho en mi blog, los enlaces funcionan perfectamente pero las imágenes, los iconitos no se ve… 🙁 por qué será?
Muchísimas gracias, está explicado perfectamente te felicito.
muchisimas gracias! excelente post!
he sido capaz de subir las fotos personalizadas de las redes sociales a blogger pero no me redirecciona a mis redes sociales. Puedes pasarte y ayudarme? muchisimas gracias!!!
http://velitsa.blogspot.com.es/
y de donde saco la url del icono de facebook? Saludos muy bueno tu blog! 🙂
Debes subirlo a algún lugar y copiar el link, yo los puse en photobucket ^^
Ay que alegría, te guardo en favoritos y lo intento hacer esta semana.
Mil gracias!
Excelente Directo a los FAVS
Muchas gracias!
Me ha encantado de verdad <3
Hola! Estoy en ello, pero qué hago con el icono del corazoncito? Es como un 'me gusta'? Qué url de sitio web pongo ahí?
Gracias!
Genial! Muchas gracias por tu ayuda! Pude hacerlo!
Muchas gracias, me fue muy útil.
Tengo un problema, todo los iconos me salen bien pero cuando meto el correo y pincho me sale el administrador de outlook, como puedo hacer para cambiarlo?
Hola Rocío, para cambiar eso debes modificar el programa de correo electrónico predeterminado que utiliza tu sistema operativo. Si utilizas Windows puedes llegar a él desde Inicio > Programas predeterminados > Establecer programas predeterminados
Pero cuando llegamos a -establecer programas predeterminado que hacemos? Me pasa igual que ella, ayuda porfa, yo quiero que me salga igual que el de aquí, todo me salio bien, pero lo del correo no 🙁
Muchas gracias por la aportación, me ha sido de mucha ayuda, y los iconos son preciosos.
Si os gusta el interiorismo y la decoración aquí os dejo mi blog: http://inartdeco.blogspot.com.es/
Gracias por el tutorial , me alegro tanto haberte encontrado 🙂
Hola, seguí los pasos pero cuando hago clic arriba del icono de face que elegí me aparece el siguiente mensaje: La página que estabas buscando en este blog no existe. que hice mal?xfa ayuda xq me estoy frustrando!!!
Muchas gracias! <3
Hola! En primer lugar felicidades por el blog.
Tengo una duda y es donde exactamente he de poner los codigos en el html para que salgan en cada entrada.
Mil gracias!
Hola Trini, soy Mariam de mariamabalorios. Gracias por este tutorial. en el blog si he podido anunciar mis otros sitios web. Y en Pinterest tengo el anuncio de mi facebook.
Pero como hacer lo mismo en Facebook, es decir como puedo poner el boton anunciando mi página de Pinterest en mi página de Facebook.
MariaM
Muchas gracias por este tutorial tan detallado. Me ha sido de gran ayuda (^^)
Francisco Tapia, desde "Con Pluma y Píxel"
Hola, esta genial tu pagina. Hice todos los pasos, pero no me aparece el icono, me sale un signo de pregunta. Que hice mal??. Saludos
http://n-tred-dos.blogspot.com
Tengo un pequeño problema y es que el link y todo va genial pero la imagen de la red social no se ve. Me gustaría que me ayudaras. Muchas gracias por el post de todas formas porque me ha sido muy útil.
Muchas gracias por el tutorial!! me ha servido de mucha ayuda
Hola, me salio todo, menos lo ultimo, ahi donde dice "mailto", eso es asi o lo tengo que editar? Porque cuando doy click en el icono, no me sale así como ustedes, les agradezco si me ayudan porfavor, muchisimas gracias, el aporte esta fenomenal.
Hola buenas, queria saber como puedo poner dentro de un post un boton enlazado a una pagina,
Hola, no logro solucionar el tema de las imágenes… tendrá algo que ver el tamaño?… por favor si me pueden ayudar lo agradecería infinitamente… mi blog es planetalujos.blogspot.com
gracias
Muchas gracias!!! 🙂
Gracias por tu post! no me salen las imagenes, si me hace link pero las imagenes de los iconos no se ven. He chequeado de abrirlas pegando la url y se ven cada una de ellas.
no sé que puede ser! gracias
http://oluandme.blogspot.com.ar/
Gracias Trini! Me a ayudado con el tema de las imágenes del gadget!
¡Hola! Pues veo en los comentarios que no soy a la única que le pasa que siguió todos los pasos y funciona, pero ya cuando me meto a mi blog no se observan las imágenes, sólo unas tachas, y si le pico me manda directamente a la red social… pero las imágenes no se ven. ¿Alguien sabrá por que? Gracias.
Me encantó tu artículo pero no puedo ver las imágenes de los iconos. La dirección la comprobé como dijiste en comentarios anteriores y si abre.. Te pego mi código
Qué estoy haciendo mal??
¡Hola! me han encantado los iconos que has puesto y ya los he utilizado en mi blog, te quería preguntar si tienes icono de gmail de los mismo colores y tonos para que quede todo conjuntado.
Gracias!
Tengo una duda pero no sé si sea error de mi blog o algo estoy haciendo mal haha, subí la imagen en tumblr, copie la dirección de la imagen y el codigo pero no me aparecey el enlace me sale con el nombre del blog más el enlace de facebook y obviamente no abre así entonces no sé qué pasa 🙁
http://secuestremosapatch.blogspot.mx/
Gracias
Hola! yo estoy exactamente igual los links están bien me redirigen pero la imagen no se ven 🙁
Hago todos los pasos que explicas pero cuando le doy a ver blog después de editar en diseño y añadir el gadget y ponerles todas las URL, tanto de los iconos como de las redes sociales, ni me salen los iconos y además cuando le doy, me aparecen en otra ventana nueva (elegí esta opción), pero me dice que “La página que estabas buscando en este blog no existe” En definitiva, a ver si me puedes ayudar. Mi blog es
http://memoriasfamiliaresjbcarbon.blogspot.com.es/
Gracias por tu magnifico blog, aunque a mi de momento no me funciona.
Hola, me encanto todo. Pero tengo un problema, no me parecen los iconos que elegí, ya verifique todo y lo intente unas cuantas veces y aun así no pone las imágenes, aquí te dejo mi blog para que veas cual puede ser el problema: http://nuestrodiariofangirl.blogspot.com.uy/
a mi me pasa lo mismo me redicciona a las redes sociales pero no aparece la imagen del icono solo una pagina rota, y lo he subido a google drive pero aun asi no
Hola,
quisiera consultarte,,,con tu explicaciòn aparece perfecto todo, pero no me redirecciona a la spàginas sino que al mismo blog, ya lo he probado incluso en otras pc…què puedo hacer o donde me puedo fijar?
Gracis, cariños
Lo siento pero a mi esto no me sale. Desesperadito ¿No teneis un video explicativo para entenderlo mejor? Sigo los pasos pero cuando doy a actualizar mi blog se bloquea y no se ve nada.
Buenas noches! Me gustaría saber cómo puedo poner en mi blog los iconos que tienes al final de tu post para compartir.
Lo he intentado varias veces pero no he acertado! Muchas gracias
Hola!
He leído los comentarios pero no encuentro lo que debo poner en el apartado que dice “pon la url de la imagen aquí” la url es por ejemplo ico_twitter_rosa.png ? Porfavor ayudaa