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!
32px | 40px | 48px |
---|---|---|
Google+ | ||
Youtube | ||
Likedin | ||
Rss feed | ||
Delicious | ||
Blogger | ||
Digg | ||
Dribbble | ||
Tumblr | ||
Flickr | ||
Picasa | ||
Correo | ||
Slideshare | ||
Myspace | ||
Orkut | ||
Skype | ||
StumbleUpon | ||
Vimeo | ||
Wordpress | ||
Yahoo! | ||
Friendfeed | ||
Livejournal | ||
Hi5 | ||
Skyrock | ||
Vkontakte | ||
107 comentarios:
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.
GRACIAS GRACIAS GRACIAS GRACIAS!!!! Me ha costado encontrar un lugar donde expliquen esto de forma fácil!! MIL GRACIAS!!
Bien ! Justo lo que buscaba, simple y concreto, fácil ! Gracias !
Gracias!!
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.
Faltan los de pornostagram :)
Gracias Esneider, eres un artista.
muchas gracias en especial por que tienes los iconos en todas las versiones !
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...
Hola "pre-parada" mira copia esto:
style='display:inline-block;' despues "url facebook" asi le haces con todos
la solucion a ese problema Pre-parada es creando una etiqueta div
luego pones el codigo dentro del div y listo
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!!!!
Cual codico pongo primero ??
el del icono que quieras primero y luego el otro al lado
por fin los encontre jaja, muchas gracias, para usar el del correo tengo que poner mi cuenta de correo?
Sabes si ask, y we heart it tienen?? Oh y gracias.
muy buenoooo
Buenisimo
Genial! Un millón de gracias!!
muy buen aporte me sirvio de muchisimo si puedes ayudamen con la caja de likebox
Muchas gracias por esta entrada, ha sido de gran ayuda!
Todo muy claro y 100% servible!!!
Gracias!
GRACIAS,GRACIAS , GRACIAS!!!!
Gracias por su aporte, fue de gran importancia, sigue así, compartiendo conocimientos,
No como otros que se mueren y se los llevan ;)
Me ha servido mucho tu enseñanza. Ya que no tenia idea de cómo colocarle los iconos a mi página. Gracias
Hola ¿Tendrás el icono de wattpad?
Excelente. Justo lo que necesitaba. Muchas gracias!
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!
Excelente post, muy útil, rápido, cómo y sencillo.
Ufff buenísimo! muchas gracias!!!!
muy bueno...gracias
Muchisisisisimas gracias! De gran ayuda.
de casualidad no tienes un icono de google maps
¡¡Muchas gracias!! Nos lo has puesto muy fácil ;-) Me ha sido muy útil.
GRACIAS!!!!!!!!!!!!!!!!!!!
Hola cual url pego para que me enlace?
¿Podrías hacer un icono de WeHeartit si no es mucho pedir? Me encanta todo, solo necesito eso. Gracias :)
ya te lo deje en tu blog como comentario!
Mi hermano, muchas gracias por compartir tu conocimiento.
Muchas gracias, super!
gracias muy bueno
Mil Gracias!!! Buenísimo!!
muy bueno me encanto graciassss
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!
falta muchas cosas un menu de los temas q vas a escribir
Que? te refieres a una pagina donde muestre los temas que escribire en el futuro?
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?
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í
me ayudas a hacer un menu como el tuyo??
Mucha gracias por compartir tus conocimientos. lo necesitaba y por fin lo econtre..Gracias de verdad!
Me falta el icono de Whatsapp. eso como puedo hacer,, me podrías dar unos datos..gracias!
Excelente!..mil gracias...Dios sea contigo!!
Ha sido genial, muchas gracias!
TE HAS ESPESIFICADO GENIAL, MUCHAS GRACIAS
Muchas gracias, me sirvió mucho
SOY ESPECIAL ;)
Excelente me ha servido mucho esta información.
disculpa como saco la url de cualquier pagina web
es un artículo genial, excelente, claro y sin mucha muela. gracias
Excelente blog amigo. Espero que continúe activo. Gracias.
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
Y para que queden igual que los que estan en esta pag?
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--
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
Muchas gracias por tu ayuda, me ha sido muy útil
muchas gracias me sirvió de mucho
Gracias! Me sirvio mucho
Muchas gracias! me fue demasiado útil este post. Saludos amigo. Estoy empezando en esto del blogging y SEO.
MUY BUEN APORTE GRACIAS !!!!
gracias super util!
Excelente, después de dos días intentando colocar los botones casi me vuelvo loca :o Muchas gracias. Me funcionó de maravilla :)
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.
Y de paso, ¿cómo se configura lo del correo?
Quede encantada de la manera tan sencilla en como lo has compartido, esto me ha facilitado todo!
Muchas gracias!
Una seguidora mas!
Muchas gracias excelente contenido, me encanto!!
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
Excelente muchas gracias los uso en todas mis páginas. Una sugerencia. Actualización del logo de isntagram. Gracias por el post :)
gracias!!!
excelente de gran ayuda muy bueno felicitaciones
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
Fantástico, Gracias, la explicación más útil que hay en Internet y la más fácil!
Saludos
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
EXCELENTE TU EXPLICACION Y POST TE FELICITO !!!
COLOQUE LOS BOTONES SIN MUCHO PROBLEMA EN EL BLOG
SALUDOS
Gracias y me alegra que te haya servido, espero nos sigas leyendo :)
Muchísimas gracias... me encantan :)
Excelente Contenido
Buena Pagina
EL DEL CORREO COMO LO PONGO
CUAL ES LA URL DEL CORREO
mailto:dirCorreo ejemplo: mailto:ejemplo@gmail.com
Gran aporte y muy facil de usar gracias...
hola quiero agradecerle, ha sido de mucha ayuda
Gracias me funciono mui bien
Excelente... me funciono... muchas gracias...
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.
no se pero a mi el pageséed me dice que reduzca el tamaño
Muchas gracias, funciona perfectamente. Quedó muy chulo en mi blogger
Muchas Gracias, funcionan perfecto. Un Saludo.
No me canso de darte la gracias!
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?
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!
Solo quería darte as gracias. Eres un crack!
Hola! y para poner el icono de fotos de Google
¿lo tienes?
Gracias!!
¡Excelente pagina! Me ha ayudado un montón. Gracias
Muchìsimas gracias eres un genio =)
Gracias por el aporte
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!!!
Publicar un comentario