Las redes sociales juegan un papel cada vez más importante para muchas de las personas que nos encontramos en esto de tener una web o blog, la integración de los medios o redes sociales a nuestro portal web o blog es muy importante para difundir nuestros mensajes o viralizarlos.
Por eso he querido contribuir un poco sobre este tema y me he dado la tarea de realizar este pequeño post donde aprenderás de manera sencilla a como poner iconos de redes sociales para web y blogger.
Te explicaré como puedes agregar estos botones de redes sociales en html a cualquiera página web o blog, ya sea estática y escrita o programada en HTML o PHP como es el caso de WordPress o Joomla!.
A comenzar entonces!
Recomendado leer:
- Mejores Páginas para Descargar Libros Gratis【Kindle, PDF, ePUB, MOBI】
- Cómo Optimizar imágenes para web y WordPress +【Consejos y Buenas prácticas】
Con el siguiente Código HTML y algo de CCS puedes poner iconos de redes sociales en tales como Facebook, Twitter, Google Plus y Linkedind, etc.
Como te digo solo con el uso de HTML, CCS y Font Awesome.
Una prueba de como estos códigos funcionarían lo puedes ver en la imagen de más abajo, específicamente los iconos que esta encerrado en el cuadro de color.
Indice de contenido
Código para iconos de redes sociales para web y blogger – botones de redes sociales HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .fa-facebook-square:hover { color:#3B5998; } .fa-twitter-square:hover { color:#55acee; } .fa-google-plus-square:hover{ color:#dd4b39; } .fa-linkedin-square:hover{ color:#0177B5; } .fa-facebook-square { font-size: 52px; color: gray; } .fa-twitter-square { font-size: 52px; color: gray; } .fa-google-plus-square { font-size: 52px; color: gray; } .fa-linkedin-square { font-size: 52px; color: gray; } </style> </head> <body> <center><a href="https://www.facebook.com/usuario "target="_blank" class="fa fa-facebook-square"></a> <a href="https://twitter.com/usuario" target="_blank" class="fa fa-twitter-square"></a> <a href="https://plus.google.com/usuario" target="_blank" class="fa fa-google-plus-square"></a> <a href="https://linkedin.com/usuario" target="_blank" class="fa fa-linkedin-square"></a></center> </body> </html>
Este código HTML, En WordPress lo puedes pegar en un «Widget con HTML Personalizado» y en Jomla! creas un módulo personalizado HTML.
Esta guía esta hecha para saber Cómo poner iconos de redes sociales para web y blogger – Tipo sígueme sin embargo no quiero desperdiciar la oportunidad de recomendarte algunos Plugin Joomla! y WordPress de redes sociales para compartir contenido del blog o páginas internas.
Para Joomla uso plugin Fast Social Share con casi todos los botones de redes sociales, a continuación te dejo un enlace al JED de Joomla donde podrás descargarlo y visualizar las opiniones que tienen con respecto a él.
A continuación te muestro una imagen de como se vera en tu website una vez lo instales
Para compartir tu contenido generado en el blog WordPress en las redes sociales puedes consultar la siguiente guía: Plugins WordPress para redes sociales – [Gratis y de pago]
Conclusiones
Como sabes el artículo esta enfocado de como poner iconos de redes sociales para web y blogger para mantener una conexión con el usuario más allá de tu web y casi que de manera permanente. Sin embargo no quiero dejar pasar la oportunidad de decirte que no dejes de lado el rendimiento y la velocidad de carga de tu web ya que esto es un elemento clave en el Posicionamiento web, a medida que vayas agregando estos botones de redes sociales en bueno que midas la velocidad de carga antes y después de agregar los iconos con herramientas tales como https://tools.pingdom.com – https://gtmetrix.com/ por nombrarte alguna de ellas.
Así que excelente por una parte que cuides las vistosidad de tu web con unos iconos bonitos pero también cuida la velocidad de carga.
¿Tienes algo que compartir y agregar al post de Cómo poner iconos de redes sociales para web y blogger?
¿Cuéntame tu experiencia?
Por último, gracias por visitar y no olvides compartir en las redes sociales con tus amigos el contenido “Cómo poner iconos de redes sociales para web y blogger”.
Éxitos!!!
Derechos de imagen destacada: Vecteezy
Diseñador Web WordPress y Redactor SEO Freelance • Fundador de vencrea.com. Me caracterizo por ser responsable en lo que hago y apasionado de la tecnología, por eso ando constantemente en actualización profesional para así brindarles lo mejor de mí.
Así queda con Instagram y Youtube.
.fa-youtube-square:hover {
color:#3B5998;
}
.fa-facebook-square:hover {
color:#3B5998;
}
.fa-twitter-square:hover {
color:#55acee;
}
.fa-google-plus-square:hover{
color:#dd4b39;
}
.fa-instagram:hover {
color:#0177B5;
}
.fa-linkedin-square:hover{
color:#0177B5;
}
.fa-youtube {
font-size: 52px;
color: gray;
}
.fa-facebook-square {
font-size: 52px;
color: gray;
}
.fa-twitter-square {
font-size: 52px;
color: gray;
}
.fa-google-plus-square {
font-size: 52px;
color: gray;
}
.fa-instagram {
font-size: 52px;
color: gray;
}
.fa-linkedin-square {
font-size: 52px;
color: gray;
}
BUENOS DÍAS AMIGO, GRACIAS POR EL APORTE QUE NOS HACE A TRAVÉS DE SU PAGINA. EXCELENTE EL CONTENIDO. SERA QUE ME PODRÍA DECIR COMO PUEDO COLOCAR UN ICONO DE WP, INSTAGRAM, CORREO ELECTRÓNICO.
Saludos! Me gusta mucho este artículo, está bien escrito, me ayudó y lo recomiendo.
Gracias Rebbeca por tu visita.
Espero verte más seguido por aquí.
Saludos…
Excelente info, esto puede ahorrar la instalación de plugins, saludos.
Hola Yosjany, gracias por pasar por aquí.
Así es compañero, con este código HTML te ahorras de instalar un plugin y tendrás igualmente un aspecto profesional en tu web. Solo esta de copiar y pegar.
Saludos.
Hola, cómo seria con el icono de Instagram?
Hola Ronald, gracias por escribir.
Con el icono de Instagram se complican las cosas, de hecho no se puede hacer de la misma manera como funcionan los demás iconos ya que esta red social tiene más de un color de marca y son #515BD4, #8134AF, #DD2A7B, #FEDA77 y #F58529.
Los style son los mismos utilizados en las otras redes sociales pero no llevan el «square».
El resultado no va a ser el mismo de las demás redes sociales desde el punto de vista del «hover» por lo que ya te dije, instagram no tiene un solo color.
Mi solución es cambiar todos estos «hover» a un color de marca.
Aplica los cambios y me indicas aquí lo que realizaste.
Suerte.
Buenas, una consulta, para agregar un icono de instagram tendrias el codigo?
Hola, te explicó:
Dentro de la etiqueta
agrega las dos instancias
1.- .fa instagram:hover {
color:#3B5998;
}
2.- .fa instagram {
font-size: 52px;
color: gray;
}
Dentro de la etiqueta
En cuanto al atributo color de instamgram si vas a tener que escoger uno solo de los 9 que tiene ahora de manera combinada.
Me avisas como se ve tu icono.
Saludos….
Hola , Probe los cambios que indican , pero si bien se alcanza a ver el icono de instagram , se ve mas pequeño y sin el sombreado gris podran ayudarme ? aqui el codigo en cuestion
.fa-facebook-square:hover {
color:#3B5998;
}
.fa-twitter-square:hover {
color:#55acee;
}
.fa instagram:hover {
color:#FF7F00;
}
.fa-google-plus-square:hover{
color:#dd4b39;
}
.fa-linkedin-square:hover{
color:#0177B5;
}
.fa-facebook-square {
font-size: 52px;
color: gray;
}
.fa-twitter-square {
font-size: 52px;
color: gray;
}
.fa instagram {
font-size: 52px;
color: gray;
}
.fa-google-plus-square {
font-size: 52px;
color: gray;
}
.fa-linkedin-square {
font-size: 52px;
color: gray;
}