Como poner iconos de redes sociales para web y blogger

Cómo poner iconos de redes sociales para web y blogger – Tipo sígueme

por

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 en nuestra portal web o blog es muy importante para difundir nuestros mensajes o viralizarlos. Hoy quiero hacerte entrega de esta mini-guía donde aprenderás de manera sencilla a como poner iconos de redes sociales para web y blogger.

A continuación te explicare como puedes agregar estos botones de redes sociales html a cualquiera página web o blog, ya sea estática y escrita o programada en HTM o PHP por poner un ejemplo; o páginas web dinámicas hechas en un generador de contenidos como WordPress o Página web Diseñada en Joomla.

A comenzar……..

Recomendado leer:

Con el siguiente Código puedes poner iconos de redes sociales en html tales como Facebook, Twitter, Google Plus y Linkedind, etc. Para ésto hago uso de las fuentes Font Awesome.

Una prueba en caliente del código es la imagen que se muestra después de este texto, sin les recomiendo usen el código ya que tienen efectos CSS Hover.

 

Botones para enlazar a de redes socialesCódigo 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.4.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://ve.linkedin.com/usuario" target="_blank" class="fa fa-linkedin-square"></a></center>

</body>
 </html>

Para los usuarios de Joomla, pueden crear un modulo personalizado HTML y pegar le código y los usuarios de WordPress pueden colocar el código en un Widget “HTML Personalizado”.

Botones de redes sociales a tráves 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 2018]

Conclusiones

A pesar que el artículo esta enfocado de como poner iconos de redes sociales para web y blogger ya sea para hacer marketing de contenidos, viralizar productos o servicios o sencillamente porque se ven bonitos 😆 Esta debe ser tu última opción, 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 las más usadas.

¿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

Deja un comentario