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="http://3.bp.blogspot.com/-MQuocq7OzfU/UiXwUY81yQI/AAAAAAAAB0Q/h6-R_R2-buI/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!

93 comentarios:

T.k Comento el 11 de febrero de 2014, 10:46

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.

Irene González Comento el 19 de febrero de 2014, 16:24

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

Geraldo Capillo Comento el 5 de marzo de 2014, 16:14

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

El AlmaZen Verde Comento el 24 de marzo de 2014, 06:50

Gracias!!

FC Fernández Comento el 26 de marzo de 2014, 03:16

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.

Jonny Mendoza Comento el 7 de abril de 2014, 12:29

Faltan los de pornostagram :)

La Bambola Nubile Comento el 29 de abril de 2014, 17:29

Gracias Esneider, eres un artista.

BajoTinta Comento el 9 de mayo de 2014, 17:53

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

Pre-parada Comento el 14 de mayo de 2014, 09:09

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...

Raven Cuervo Comento el 27 de mayo de 2014, 12:00

Hola "pre-parada" mira copia esto:

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

Wilbert Ek Comento el 28 de mayo de 2014, 10:33

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

Wilbert Ek Comento el 28 de mayo de 2014, 10:36

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!!!!

Chachi Velasquez Comento el 6 de agosto de 2014, 21:14

Cual codico pongo primero ??

Esneider Manzano Comento el 7 de agosto de 2014, 21:45

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

Luis Montero Comento el 11 de agosto de 2014, 03:02

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

Fernanda Isabel Comento el 4 de diciembre de 2014, 21:30

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

harold amador salazar Comento el 19 de diciembre de 2014, 21:36

muy buenoooo

Francisco Campoz jimenez Comento el 2 de enero de 2015, 18:53

Buenisimo

La Aventura de Juls Comento el 8 de enero de 2015, 18:01

Genial! Un millón de gracias!!

marcelo Comento el 23 de enero de 2015, 20:03

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

Dolços sense pecat Comento el 16 de febrero de 2015, 10:49

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

Ernesto Morán Cabrera Comento el 20 de febrero de 2015, 21:37

Todo muy claro y 100% servible!!!

yazvill Comento el 7 de marzo de 2015, 19:03

Gracias!

mayte_pequenus Comento el 31 de marzo de 2015, 11:18

GRACIAS,GRACIAS , GRACIAS!!!!

Camilos Towel Comento el 4 de abril de 2015, 17:50

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

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

Monica Briceño Comento el 11 de abril de 2015, 07:07

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

Maria Reyes Comento el 21 de abril de 2015, 12:06

Hola ¿Tendrás el icono de wattpad?

Jenny Sibaja Comento el 4 de junio de 2015, 17:32

Excelente. Justo lo que necesitaba. Muchas gracias!

Alejandro García Aceves Comento el 11 de junio de 2015, 13:41

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!

Barbara Massari Comento el 24 de junio de 2015, 19:54

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

Laura Passarinho Comento el 28 de junio de 2015, 00:12

Ufff buenísimo! muchas gracias!!!!

ana mary Comento el 30 de julio de 2015, 15:09

muy bueno...gracias

quien no llora no mama Comento el 31 de julio de 2015, 06:06

Muchisisisisimas gracias! De gran ayuda.

Web Point Comento el 18 de agosto de 2015, 11:56

de casualidad no tienes un icono de google maps

Carlos J. Galán Comento el 28 de agosto de 2015, 14:55

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

Ximena Hernández López Comento el 4 de septiembre de 2015, 21:42

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

Ari Aguilar Comento el 8 de septiembre de 2015, 16:46

Hola cual url pego para que me enlace?

AnaWrites' Comento el 5 de octubre de 2015, 22:08

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

Esneider Manzano Comento el 6 de octubre de 2015, 17:31

ya te lo deje en tu blog como comentario!

Maxi Rubio Comento el 6 de octubre de 2015, 18:31

Mi hermano, muchas gracias por compartir tu conocimiento.

gloriavir Comento el 7 de octubre de 2015, 13:44

Muchas gracias, super!

henry javier castro mercado Comento el 26 de diciembre de 2015, 14:38

gracias muy bueno

Colegio María Auxiliadora San Nicolás Comento el 5 de enero de 2016, 08:00

Mil Gracias!!! Buenísimo!!

maestras sanjuaninas Comento el 10 de enero de 2016, 15:20

muy bueno me encanto graciassss

Sentimientos Comento el 14 de enero de 2016, 11:59

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!

Amazonas Patriarca Comento el 16 de enero de 2016, 12:46

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

Loquendo Manzanoi Comento el 16 de enero de 2016, 17:49

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

NatGarcia Comento el 25 de enero de 2016, 11:27

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?

Loquendo Manzanoi Comento el 26 de enero de 2016, 19:08

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í

Alejandro Cuéllar Comento el 18 de febrero de 2016, 23:28

me ayudas a hacer un menu como el tuyo??

GUIDO LEONARDO ORTEGA TV Comento el 3 de marzo de 2016, 08:26

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

GUIDO LEONARDO ORTEGA TV Comento el 3 de marzo de 2016, 08:28

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

Maria Gladys Carrasco Harvey. vc Comento el 2 de abril de 2016, 16:20

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

Karla Marenco Comento el 14 de abril de 2016, 14:18

Ha sido genial, muchas gracias!

Uzumaky Corona Comento el 20 de abril de 2016, 12:42

TE HAS ESPESIFICADO GENIAL, MUCHAS GRACIAS

Kito Informatico Comento el 22 de abril de 2016, 12:41

Muchas gracias, me sirvió mucho

andres felipe sanchez monroy Comento el 26 de abril de 2016, 14:34

SOY ESPECIAL ;)

Ciencias del Deporte Comento el 1 de mayo de 2016, 05:11

Excelente me ha servido mucho esta información.

francisco rey pacheco cruz Comento el 12 de mayo de 2016, 11:39

disculpa como saco la url de cualquier pagina web

Raciel Ricardo Comento el 12 de mayo de 2016, 14:06

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

Jhonny Ontiveros Comento el 24 de junio de 2016, 15:55

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

frediris matos Comento el 30 de junio de 2016, 14:34

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 Comento el 2 de julio de 2016, 23:11

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

joakinen Comento el 23 de julio de 2016, 12:34

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 Comento el 23 de julio de 2016, 12:36

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

elrastrillodeanuskita Comento el 2 de agosto de 2016, 16:20

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

Edwin Quisbert Comento el 13 de agosto de 2016, 09:16

muchas gracias me sirvió de mucho

Aaron Martial Comento el 14 de septiembre de 2016, 20:54

Gracias! Me sirvio mucho

Sergio Sarmiento Comento el 16 de septiembre de 2016, 00:30

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

GameWycek wycek Comento el 17 de septiembre de 2016, 13:14

MUY BUEN APORTE GRACIAS !!!!

Nayis Suarez Comento el 2 de octubre de 2016, 15:53

gracias super util!

Natura Botánicos Comento el 16 de noviembre de 2016, 13:56

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

The pasqu 17 Comento el 22 de noviembre de 2016, 12:40

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.

The pasqu 17 Comento el 22 de noviembre de 2016, 12:43

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

Salud Vital TWC Comento el 28 de noviembre de 2016, 08:48

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

Muchas gracias!
Una seguidora mas!

CAN POSTALES Comento el 3 de diciembre de 2016, 16:18

Muchas gracias excelente contenido, me encanto!!

el pasado de sevilla Comento el 4 de enero de 2017, 14:51

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

Victoria Amaguaña Comento el 16 de enero de 2017, 16:11

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

Pili Mau Comento el 22 de enero de 2017, 23:00

gracias!!!

Unknown Comento el 28 de enero de 2017, 15:57

excelente de gran ayuda muy bueno felicitaciones

Mary Gallego Comento el 16 de marzo de 2017, 11:38

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

Catarsis Sesión Comento el 18 de marzo de 2017, 05:25

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

skarlataTV Comento el 7 de abril de 2017, 17:49

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 Comento el 20 de abril de 2017, 18:46

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

Loquendo Manzanoi Comento el 24 de abril de 2017, 21:14

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

Rosa Comento el 5 de mayo de 2017, 04:50

Muchísimas gracias... me encantan :)

Francisco Amaya Comento el 12 de junio de 2017, 20:04

Excelente Contenido

maria felix ortiz Comento el 14 de junio de 2017, 19:05

Buena Pagina

Jorge Choque Oficial Comento el 30 de junio de 2017, 12:03

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

Loquendo Manzanoi Comento el 2 de julio de 2017, 14:02

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

alfredo Octavio Comento el 9 de julio de 2017, 16:01

Gran aporte y muy facil de usar gracias...

Leugean mantilla garavito Comento el 13 de agosto de 2017, 13:37

hola quiero agradecerle, ha sido de mucha ayuda

Luis Android HD Comento el 15 de octubre de 2017, 00:03

Gracias me funciono mui bien