×
logo inovablog

2017/09/08

Como Poner Iconos de Redes Sociales en Blogger

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 mejorados a mas no poder y son de diferentes tamaños, los mas populares (32px, 40px y 48px), 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, y cada uno tiene su tamaño especifico, OJO no quiero decir que es el mismo icono para los diferentes tamaños, no cada tamaño tiene su icono propio, entre otras palabras estos iconos de redes sociales para web y blogs están muy bien hechos, si quieres puedes aprender mas sobre optimizar imágenes.

Configuración

cada código tiene este compuesto:

<a href="URL-FACEBOOK" target="_blank"><img alt="siguenos en facebook" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtoQclKgxO0Xe11YdtWSIwuQVpO0YuZl7B9LbspNbCLrFSmHRDRb5a9-dg8Ob3FF5677WLG27DO4AeejnR7Y4aKg4JaG3O1UYJr6pA7JJt3ZY08APf5XaJihUNnVaLatoU0bDjpUw26pK/s1600/face.png" title="siguenos en facebook" width="40" /></a>

lo que esta en rojo debes remplazarlo por la url de tu usuario o pagina en la red social que escogiste, o para ser mas precisos:
  • remplazo la parte en rojo por la dirección de tu red social y lo mismo para twitter google+ o cualquier botón social que hayas elegido.
  • lo que esta en color azul es el texto que mostrara al pasar el cursor, si quieres puedes cambiarlo por otra frase como mira mi pagina en facebook por ejemplo.
  • y lo de color verde es el texto alternativo para los buscadores, cámbialo según la res social.

Colocando los botones sociales en mi blog o web

 Ahora solo debes seleccionar el icono social que quieras de la tabla que esta abajo y, seguido o al lado de este, hay un código, ese debes copiarlo, para tener ese icono y has lo que dije en la configuración.

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.

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.

¡y bien están listos tus iconos de redes sociales para tus seguidores!

Para poder copiar los codigos te recomiendo acceder desde una computadora, ya que desde moviles es muy complicado.

32px 40px 48px
facebook
Síguenos en facebook Síguenos en facebook Síguenos en facebook
Síguenos en facebook Síguenos en facebook Síguenos en facebook
Google+
Síguenos en Google+ Síguenos en Google+ Síguenos en Google+
Síguenos en Google+ Síguenos en Google+ Síguenos en Google+
Síguenos en Google+ Síguenos en Google+ Síguenos en Google+
Twitter
Síguenos en Twitter Síguenos en Twitter Síguenos en Twitter
Síguenos en Twitter Síguenos en Twitter Síguenos en Twitter
Youtube
Canal de youtube Canal de youtube Canal de youtube
Canal de youtube Canal de youtube Canal de youtube
Canal de youtube Canal de youtube Canal de youtube
Likedin
Sígueme en Likedin Sígueme en Likedin Sígueme en Likedin
Pinterest
Sígueme en Pinterest Sígueme en Pinterest Sígueme en Pinterest
Sígueme en Pinterest Sígueme en Pinterest Sígueme en Pinterest
Rss feed
Rss feed Rss feed Rss feed
Delicious
sígueme en Delicious sígueme en Delicious sígueme en Delicious
sígueme en Delicious sígueme en Delicious sígueme en Delicious
Instagram
sígueme en Instagram sígueme en Instagram sígueme en Instagram
sígueme en Instagram sígueme en Instagram sígueme en Instagram
Blogger
sígueme en Blogger sígueme en Blogger sígueme en Blogger
sígueme en Blogger sígueme en Blogger sígueme en Blogger
Digg
sígueme en Digg sígueme en Digg sígueme en Digg
sígueme en Digg sígueme en Digg sígueme en Digg
Dribbble
sígueme en Dribbble sígueme en Dribbble sígueme en Dribbble
Tumblr
sígueme en Tumblr sígueme en Tumblr sígueme en Tumblr
Flickr
sígueme en Flickr sígueme en Flickr sígueme en Flickr
sígueme en Flickr sígueme en Flickr sígueme en Flickr
sígueme en Flickr sígueme en Flickr sígueme en Flickr
Picasa
sígueme en Picasa sígueme en Picasa sígueme en Picasa
sígueme en Picasa sígueme en Picasa sígueme en Picasa
Correo
sígueme por Correo sígueme por Correo sígueme por Correo
sígueme por Correo sígueme por Correo sígueme por Correo
Slideshare
sígueme en Slideshare sígueme en Slideshare sígueme en Slideshare
sígueme en Slideshare sígueme en Slideshare sígueme en Slideshare
Myspace
sígueme en Myspace sígueme en Myspace sígueme en Myspace
Orkut
sígueme en Orkut sígueme en Orkut sígueme en Orkut
sígueme en Orkut sígueme en Orkut sígueme en Orkut
Reddit
sígueme en Reddit sígueme en Reddit sígueme en Reddit
sígueme en Reddit sígueme en Reddit sígueme en Reddit
Skype
sígueme en Skype sígueme en Skype sígueme en Skype
sígueme en Skype sígueme en Skype sígueme en Skype
StumbleUpon
sígueme en StumbleUpon sígueme en StumbleUpon sígueme en StumbleUpon
sígueme en StumbleUpon sígueme en StumbleUpon sígueme en StumbleUpon
Vimeo
sígueme en Vimeo sígueme en Vimeo sígueme en Vimeo
Wordpress
sígueme en Wordpress sígueme en Wordpress sígueme en Wordpress
sígueme en Wordpress sígueme en Wordpress sígueme en Wordpress
Yahoo!
sígueme en Yahoo! sígueme en Yahoo! sígueme en Yahoo!
sígueme en Yahoo! sígueme en Yahoo! sígueme en Yahoo!
Friendfeed
sígueme en Friendfeed! sígueme en Friendfeed! sígueme en Friendfeed!
Livejournal
sígueme en Livejournal! sígueme en Livejournal! sígueme en Livejournal!
Hi5
sígueme en Hi5! sígueme en Hi5! sígueme en Hi5!
Skyrock
sígueme en Skyrock! sígueme en Skyrock! sígueme en Skyrock!
Vkontakte
sígueme en Vkontakte! sígueme en Vkontakte! sígueme en Vkontakte!

107 comentarios:

T.k dijo...

me interesa mas el efecto que tiene esta misma pagina, cuando pasa el mouse por encima de icono de la rede social cambia de cuadrado a redondo........... cual es el codigo,, Gracias.

IreGon dijo...

GRACIAS GRACIAS GRACIAS GRACIAS!!!! Me ha costado encontrar un lugar donde expliquen esto de forma fácil!! MIL GRACIAS!!

Geraldo dijo...

Bien ! Justo lo que buscaba, simple y concreto, fácil ! Gracias !

Unknown dijo...

Gracias!!

Fran CasalF dijo...

Gracias por la aportación. Aunque igual que a T.k. me gustan los que tienes en esta página que cambian al poner el mouse encima. ¿Cómo podemos insertarlos o conseguir el código? Saludos.

Unknown dijo...

Faltan los de pornostagram :)

Unknown dijo...

Gracias Esneider, eres un artista.

BajoTinta dijo...

muchas gracias en especial por que tienes los iconos en todas las versiones !

Sonia Barnum dijo...

Yo he intentado de todo para ponerlo en horizontal en mi web 1&1 pero nada... Se me ponen en vertical. No se que hacer...

EstebanRK dijo...

Hola "pre-parada" mira copia esto:

style='display:inline-block;' despues "url facebook" asi le haces con todos

Unknown dijo...

la solucion a ese problema Pre-parada es creando una etiqueta div
luego pones el codigo dentro del div y listo

Unknown dijo...

la solución es muy facil solo crea una etiqueta html llamada div dentro dicha etiqueta pones el codigo y cierras el div y ya listo!!!!

Unknown dijo...

Cual codico pongo primero ??

loquendomanzano dijo...

el del icono que quieras primero y luego el otro al lado

Unknown dijo...

por fin los encontre jaja, muchas gracias, para usar el del correo tengo que poner mi cuenta de correo?

Unknown dijo...

Sabes si ask, y we heart it tienen?? Oh y gracias.

Unknown dijo...

muy buenoooo

your paradise in CR dijo...

Buenisimo

Unknown dijo...

Genial! Un millón de gracias!!

marcelo dijo...

muy buen aporte me sirvio de muchisimo si puedes ayudamen con la caja de likebox

Sense Pecat dijo...

Muchas gracias por esta entrada, ha sido de gran ayuda!

Morán dijo...

Todo muy claro y 100% servible!!!

yazvill dijo...

Gracias!

mayte_pequenus dijo...

GRACIAS,GRACIAS , GRACIAS!!!!

Camilos dijo...

Gracias por su aporte, fue de gran importancia, sigue así, compartiendo conocimientos,

No como otros que se mueren y se los llevan ;)

Unknown dijo...

Me ha servido mucho tu enseñanza. Ya que no tenia idea de cómo colocarle los iconos a mi página. Gracias

isabel dijo...

Hola ¿Tendrás el icono de wattpad?

Jen dijo...

Excelente. Justo lo que necesitaba. Muchas gracias!

Unknown dijo...

Hola buenas tardes! Disculpa si quisiéramos que también nos de la opción para compartir por ejemplo una nota en Facebook, Twitter, etc. Sabes el código que se tiene que usar?
Gracias, saludos!

Unknown dijo...

Excelente post, muy útil, rápido, cómo y sencillo.

Laura Passarinho dijo...

Ufff buenísimo! muchas gracias!!!!

anamary dijo...

muy bueno...gracias

Unknown dijo...

Muchisisisisimas gracias! De gran ayuda.

Web Point dijo...

de casualidad no tienes un icono de google maps

Carlos J. Galán dijo...

¡¡Muchas gracias!! Nos lo has puesto muy fácil ;-) Me ha sido muy útil.

Lucía dijo...

GRACIAS!!!!!!!!!!!!!!!!!!!

Unknown dijo...

Hola cual url pego para que me enlace?

Margaret dijo...

¿Podrías hacer un icono de WeHeartit si no es mucho pedir? Me encanta todo, solo necesito eso. Gracias :)

loquendomanzano dijo...

ya te lo deje en tu blog como comentario!

Maxi dijo...

Mi hermano, muchas gracias por compartir tu conocimiento.

gloriavir dijo...

Muchas gracias, super!

Unknown dijo...

gracias muy bueno

Pastoral Colegio María Auxiliadora dijo...

Mil Gracias!!! Buenísimo!!

maestrasanjuaninas dijo...

muy bueno me encanto graciassss

Sentimientos dijo...

Gracias,en verdad me ha sido de mucha ayuda :) Me gustaría también, si es posible pudieras agregara a esta lista el icono de whatsapp , he visto que algunos blogs disponen de el como opcion para compartir contenido. Estaré pendiente por si asi fuera o por si alguien mas me pudiera ayudar con esto.
Nuevamente, Gracias!

Unknown dijo...

falta muchas cosas un menu de los temas q vas a escribir

loquendomanzano dijo...

Que? te refieres a una pagina donde muestre los temas que escribire en el futuro?

Unknown dijo...

Hola Tengo una pregunta, donde guardaste las imagenes de los iconos de las redes sociales, las tuyas me funcionan perfecto pero me gustaria personalizarlas un poco, podrias explicarme?

loquendomanzano dijo...

claro, simplemente sube los iconos a blogger como si subieras una imagen normal y copias sus URL de imagen, esas imagenes se guardan en albunes web de picasa, si tienes blog ve a esa pagina y estarán ahí

Unknown dijo...

me ayudas a hacer un menu como el tuyo??

GuidoOrtega dijo...

Mucha gracias por compartir tus conocimientos. lo necesitaba y por fin lo econtre..Gracias de verdad!

GuidoOrtega dijo...

Me falta el icono de Whatsapp. eso como puedo hacer,, me podrías dar unos datos..gracias!

María Gladys Carrasco Harvey.vc dijo...

Excelente!..mil gracias...Dios sea contigo!!

Unknown dijo...

Ha sido genial, muchas gracias!

Unknown dijo...

TE HAS ESPESIFICADO GENIAL, MUCHAS GRACIAS

Unknown dijo...

Muchas gracias, me sirvió mucho

Unknown dijo...

SOY ESPECIAL ;)

Unknown dijo...

Excelente me ha servido mucho esta información.

sanctuar market dijo...

disculpa como saco la url de cualquier pagina web

biblioanales@gmail.com dijo...

es un artículo genial, excelente, claro y sin mucha muela. gracias

Unknown dijo...

Excelente blog amigo. Espero que continúe activo. Gracias.

Elmister21 dijo...

Saludos.

dentro de todas las paginas que hay para agregar botones sociales a tu blog esta es la que mas me ha gustado muy facil hacerlo.
esta muy bien

feremuz dijo...

Y para que queden igual que los que estan en esta pag?

joakinen dijo...

hola fc..para hacer que cambie a circulo cuando pasas por encima, en el codigo css, has de añadir debajo de los estilo del boton (posicion,etc...), un :hover, y decirle que tenga border-radius:50%.--
sería algo así:
.icono {
position: relative;
left: 10vw;
top: 10vh;
transition: all 0.3s ease;
}
.icono:hover {
border-radius:50%;
}

--espero te haya servido de ayuda--

joakinen dijo...

Muy bueno saber implementar un icono propio, pero cómo hago para compartir, no la página, sino un contenido específico de la página. Una foto, o un artículo, o noticia.
Si alguien sabe, agradecería me lo dijese,estoy buscando la forma y no hay "forma".
Un saludo

Anónimo dijo...

Muchas gracias por tu ayuda, me ha sido muy útil

edwinquisbertm dijo...

muchas gracias me sirvió de mucho

Unknown dijo...

Gracias! Me sirvio mucho

Sergio Daniel Sarmiento dijo...

Muchas gracias! me fue demasiado útil este post. Saludos amigo. Estoy empezando en esto del blogging y SEO.

Tomas Galvan dijo...

MUY BUEN APORTE GRACIAS !!!!

Nayis dijo...

gracias super util!

Anónimo dijo...

Excelente, después de dos días intentando colocar los botones casi me vuelvo loca :o Muchas gracias. Me funcionó de maravilla :)

ThePasqu17 dijo...

Hola, me gustaría saber cómo lo hiciste o de donde lo sacaste, ya que me gustaría editar uno y poner otra foto. Soy muy curioso y quisiera crear mi propio botón.

ThePasqu17 dijo...

Y de paso, ¿cómo se configura lo del correo?

Gana Dinero Ya Con Vicutitas dijo...

Quede encantada de la manera tan sencilla en como lo has compartido, esto me ha facilitado todo!

Muchas gracias!
Una seguidora mas!

Rakeli dijo...

Muchas gracias excelente contenido, me encanto!!

El Pasado de Sevilla dijo...

de todas las publicaciones que he buscado sobre este tema, esta es la mejor explicada, la mas facíl de aplicar y la sencilla de entender.

gracias y la comparto, un saludo

vkvane dijo...

Excelente muchas gracias los uso en todas mis páginas. Una sugerencia. Actualización del logo de isntagram. Gracias por el post :)

Unknown dijo...

gracias!!!

Unknown dijo...

excelente de gran ayuda muy bueno felicitaciones

MaryGc dijo...

casi no encuentro el que me ayudo de verdad. gracias... andaba buscando algo claro, facil y concreto, sin tanta vuelta y este fue maravilloso.. gracias, gracias

Unknown dijo...

Fantástico, Gracias, la explicación más útil que hay en Internet y la más fácil!
Saludos

skarlatatv dijo...

Buenas tardes amigo, como podriamos poner algun efecto cuando nos pasemos encima del raton, aparte como puede lograr que se vena en la version mobile muchas gracias

Dr. Jose Lapenta dijo...

EXCELENTE TU EXPLICACION Y POST TE FELICITO !!!
COLOQUE LOS BOTONES SIN MUCHO PROBLEMA EN EL BLOG
SALUDOS

loquendomanzano dijo...

Gracias y me alegra que te haya servido, espero nos sigas leyendo :)

Rosa Rodriguez dijo...

Muchísimas gracias... me encantan :)

Unknown dijo...

Excelente Contenido

Unknown dijo...

Buena Pagina

Jorge Luis Choque Coronado dijo...

EL DEL CORREO COMO LO PONGO
CUAL ES LA URL DEL CORREO

loquendomanzano dijo...

mailto:dirCorreo ejemplo: mailto:ejemplo@gmail.com

achaoctavio dijo...

Gran aporte y muy facil de usar gracias...

comerciaenlinea.blogspot.com dijo...

hola quiero agradecerle, ha sido de mucha ayuda

Unknown dijo...

Gracias me funciono mui bien

Unknown dijo...

Excelente... me funciono... muchas gracias...

Unknown dijo...

Hola. Muchas gracias por tu post, me fue de mucha ayuda. Pero tengo una duda ¿Cómo puedo hacerlo para poner una imagen a mi gusto? Es decir, un ícono que yo diseñé (medianamente) de facebook por ejemplo.
He buscado pero siempre aparece rota la imagen. Espero puedas ayudarme.

John Paez dijo...

no se pero a mi el pageséed me dice que reduzca el tamaño

Pily dijo...

Muchas gracias, funciona perfectamente. Quedó muy chulo en mi blogger

Frases con Firma dijo...

Muchas Gracias, funcionan perfecto. Un Saludo.

https://whatsbilingual.blogspot.com dijo...

No me canso de darte la gracias!

Atzøn dijo...

Tengo un problema q me molesta. Todo bien cuando coloque esto pero cuando me fui al blog y le di click me manda a un link asi: "nombredelblog.blogspot.com/facebook.com/nombre"
y no he podido resolverlo ¿alguien me puede ayudar?

Unknown dijo...

Que buen artículo!

Muy interesante y muy ingenioso, con esto se puede hacer una buena Publicidad en redes sociales.

Le pasaré este enlace a todos mis conocidos para que vean tan buen artículo que me encontré! Mil gracias!

Unknown dijo...

Solo quería darte as gracias. Eres un crack!

Calcorreir@s dijo...

Hola! y para poner el icono de fotos de Google
¿lo tienes?
Gracias!!

juanma dijo...

¡Excelente pagina! Me ha ayudado un montón. Gracias

Thalylu dijo...

Muchìsimas gracias eres un genio =)

Carlos dijo...

Gracias por el aporte

Sara Olguín dijo...

Hola, Hola+ Me gustaria si puedes explicarnos como hacer para que haga el efecto de tus iconos pasando el mousse como te han pedido, gracias!!!

2018 © Inovablog