fbpx

Código HTML de Redes Sociales para tu Blog


Estas aquí: vencrea.com 💥 Marketing Digital 💥 Código HTML de Redes Sociales para tu Blog

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:


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.

 

Botones para enlazar a de redes socialesCó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.

Botones de redes sociales a través de módulo de redes sociales para joomla y WordPress – Para compartir enlaces


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.

Plugin – Fast Social Share

A continuación te muestro una imagen de como se vera en tu website una vez lo instales

Botones de compartir en redes sociales

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

Llévame a las Redes Sociales!

11 comentarios en «Código HTML de Redes Sociales para tu Blog»

  1. asi 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;
    }





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

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

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

      Responder
    • 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

      agrega la url hacía instagram como las que están para las otras redes sociales, pero cambia los datos a la red social instagram

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

      Responder
      • 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;
        }





        Responder

Deja un comentario