8 sep. 2013

Como Poner Iconos de Redes Sociales para web y Blogger

 Iconos de redes sociales para blogger y web

Vamos a colocar Iconos de redes sociales en nuestro blog o también para paginas web, ya había explicado como poner estos botones sociales, pero ahora traigo mas iconos sociales y mejores 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 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 optimizados, si quieres puedes aprender mas sobre optimizar imágenes.



Configuracion


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,


  • 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 (déjalo así)

¿Como colocar estos iconos sociales en mi blog?

 

 Ahora solo debes seleccionar el icono social que quieras, 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 ya veras como tu 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!

91 comentarios:

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

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

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

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

    ResponderEliminar
    Respuestas
    1. 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--

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

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

    ResponderEliminar
    Respuestas
    1. Hola "pre-parada" mira copia esto:

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

      Eliminar
    2. 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!!!!

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

    ResponderEliminar
  8. Respuestas
    1. el del icono que quieras primero y luego el otro al lado

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

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

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

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

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

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

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

    ResponderEliminar
  15. Hola ¿Tendrás el icono de wattpad?

    ResponderEliminar
  16. Excelente. Justo lo que necesitaba. Muchas gracias!

    ResponderEliminar
  17. 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!

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

    ResponderEliminar
  19. de casualidad no tienes un icono de google maps

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

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

    ResponderEliminar
  22. Mi hermano, muchas gracias por compartir tu conocimiento.

    ResponderEliminar
  23. 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!

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

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

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

      Eliminar
  25. 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?

    ResponderEliminar
    Respuestas
    1. 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í

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

    ResponderEliminar
  27. TE HAS ESPESIFICADO GENIAL, MUCHAS GRACIAS

    ResponderEliminar
  28. Excelente me ha servido mucho esta información.

    ResponderEliminar
  29. disculpa como saco la url de cualquier pagina web

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

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

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

    ResponderEliminar
  33. Y para que queden igual que los que estan en esta pag?

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

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

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

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

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

    ResponderEliminar
    Respuestas
    1. Y de paso, ¿cómo se configura lo del correo?

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

    Muchas gracias!
    Una seguidora mas!

    ResponderEliminar
  40. Muchas gracias excelente contenido, me encanto!!

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

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

    ResponderEliminar
  43. excelente de gran ayuda muy bueno felicitaciones

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

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

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

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

    ResponderEliminar
    Respuestas
    1. Gracias y me alegra que te haya servido, espero nos sigas leyendo :)

      Eliminar
  48. Muchísimas gracias... me encantan :)

    ResponderEliminar
  49. EL DEL CORREO COMO LO PONGO
    CUAL ES LA URL DEL CORREO

    ResponderEliminar
    Respuestas
    1. mailto:dirCorreo ejemplo: mailto:ejemplo@gmail.com

      Eliminar
  50. Gran aporte y muy facil de usar gracias...

    ResponderEliminar

2017 © Inovablog