Las redes sociales se han convertido en la principal fuente de tráfico de muchas páginas web. Esto se debe a que cada día la competencia por los primeros lugares en los buscadores es más grande y a veces es más fácil conseguir audiencia e interacción de manera social que mediante tráfico orgánico. Por eso es importante que las redes sociales estén presentes en la estrategia de distribución de contenidos en tu blog.
En este artículo te voy a mostrar cómo agregar botones o iconos de redes sociales en tu blog; no importa si estás usando Blogger o cualquier otro CMS; si sigues mis indicaciones, podrás utilizarlos sin problema.
Ventajas de usar botones para redes sociales
Los botones sociales le darán a tu blog un toque más profesional, además de que tus usuarios se sentirán más seguros al ver que detrás de tu blog existe una persona real con la cual podrán conversar en caso de ser necesario. Añadido a esto, podríamos agregar los siguientes beneficios:
Más tráfico en tu blog: Hoy en día, el 80% de las personas prefieren buscar información audiovisual antes que leer un artículo de una página, por eso es importante que crees perfiles sociales y destines parte de tu estrategia de crecimiento a buscar posibles lectores de manera social.
Aumento de seguidores: En Blogger difícilmente puedes llevar un control de cuántas personas están siguiendo tu blog; sin embargo, las redes sociales te permiten manejar esa información de manera detallada. Si agregas botones sociales, tus lectores podrán seguirte con solo hacer un clic; ellos se beneficiarán porque recibirán notificaciones justo al momento que realizas una publicación y tú te beneficiarás porque podrás informarles que hay nuevo contenido en tu blog.
Iconos de redes sociales para copiar y pegar
Si eres bueno utilizando HTML y CSS, podrás crear tus botones de redes sociales fácilmente; solo necesitarás usar cualquiera de estas imágenes:
Si quieren que agregue otra red social adicional, solo háganmelo saber en los comentarios.
Botones de redes sociales para Blogger
Si no sabes nada de HTML o CSS, no te preocupes; a partir de aquí te daré una guía detallada y paso por paso para que agregues los botones de redes sociales a tu blog en Blogger.
Paso 1: Copia y pega el siguiente código.
A continuación tienes que copiar el código de abajo y pegarlo en la Entrada-Sección-Gadget donde quieres que se muestre.
<center>
<div class="iconos-sociales">
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en YouTube" height="35" width="35" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGxjm__TS1-sOnf69Vbppx-u8CX1ltlmqqtDey3Gml5aV2kZ1BJsK94hMPF-cn870hd7Jk1bx9E50oPbA1fanb90M_2eoVUnnlSQ-Q_axbKVsDmsla6hPg-mRT-9FsPx0coSeVLmQppAbN/s0/Youtube-icono.png" title=" Sígueme en YouTube "/></a>
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en Facebook" height="35" width="35" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6vlV5enwWRJSXPWHkLi_QEhcy0OAwMgVAqp4F0dvu5sJ5zMBOSAPoqw4ZrMk6GaS_YUtjrK6p_qrHJipWOJz_Ib3NIppNWwx8se0fmswGW1YhYOT4lzTZXssDtPNuzZ7KxvJGR3RDarUt/s0/facebook-icono.png" title="Sígueme en Facebook"/></a>
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en Instagram" height="35" width="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioycSf-8NI3Ff15eeXtdXUO4e888671ildrsPBjKJnTFjzSymZi95xweZpk0Vc6zll0WDyE0pBGj3PWL564QS8VkRxeh_PbW6y6sT9dWJq-xHh1ohUJN737-Qe-c12TRC2kUAbf7TBzxK5/s0/Instagram-icono.png" title="Sígueme en Instagram"/></a>
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en WhatsApp" height="35" width="35" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1fwppWJk-Z8OVvyOtTxSxBmUMIt702HOt6OSOCVtrKG5GLxCRnPxu6bSj0GDEI3q-FugFOkb82rCvBYMYeM0648TQOjJk9-nFbI4hkOLTpDY3qL-qga9HPTB052Eqay4w3hHZnmW6lENj/s0/whatsapp-icono.png" title="Sígueme en WhatsApp"/></a>
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en TikTok" height="35" width="35" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFv8UKZ1-41VtEZOmOWZfuQSeNlkHBnbzmMYBIWVbiiEPWv28j9QmxHUOKceoGNe-6XEk31OnWLoNj-nTWrAK8mba-yMPPEqZlLMj3AI3_nnygxwxamLLKrALutw3nRMaDE2_Hzl7MLcWH/s0/tiktok-icono-oscuro.png" title="Sígueme en TikTok"/></a>
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt=" Sígueme en Twitter" height="35" width="35" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg2tj8k49hok_zk9DG0mZ8nJlR_dS8ETeVBD9111J2Gpn8OJjlw9xPxuR-aIPqcb0aIJNxLNxgFmqNx5IG-X5TCGacOFT8S8gwVTBs1gnGUz3xiIkhgXNYu1zQIvW57TXEmk9wwr7Yg9jQxVRZGqL1FzeLyhmg9jR7SX11M3WTih3FN7yuJ2p0r8G0Gh9/s1600-rw/logo-x.png" title="Sígueme en Twitter"/></a>
</div>
</center>
<!-- Aquí van los estilos -->
<style>
.iconos-sociales a {display: inline-block; margin: 0 5px;}
</style>
Paso 2: Personaliza tus redes sociales.
Ahora, vas a editar algunas partes del código. Presta atención a las siguientes indicaciones:
- URL DE LA RED SOCIAL: Allí debes colocar la URL de la red social que corresponda.
- (Alto y Ancho): El código traerá la medida de 35 px de forma predeterminada; si quieres que los iconos de tus redes sociales se vean más grandes o más pequeños, aumenta el número o redúcelo, respectivamente.
Paso 3: Agregar o eliminar redes sociales.
Puedes agregar y quitar las redes sociales que quieras. Para quitar una red social, solo elimina el código de la red social que no quieres que aparezca y, si quieres agregar una nueva, copia el código de cualquier red social y edita los campos de “URL DE LA RED SOCIAL” y “Sígueme en…”. “URL del icono de la red social”
Si todo sale bien, tus redes sociales se verían de la siguiente manera:
Agregar estilos a tus botones de redes sociales.
Como puedes darte cuenta, los botones de redes sociales de forma predeterminada no tienen animaciones, son simplemente una imagen con un enlace; esto puede ser bueno para no ralentizar tanto tu blog; sin embargo, si quieres algo más profesional, tienes que copiar los estilos que te mostraré a continuación y pegarlos al final de tu código de redes sociales donde dice "Aquí van los estilos".
Desplazamiento hacia arriba
Los botones tendrán un ligero desplazamiento hacia arriba cuando las personas pasen el cursor sobre la imagen.
<style>
.iconos-sociales img{
transition:all 0.5s ease-out;
}
.iconos-sociales img:hover{
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
transform:translate(0px, -5px);
}
</style>Vista previa
Redondear imagen más desplazamiento hacia arriba.
Los botones se verán de forma circular y, al pasar el cursor por encima de ellos, tendrán un leve desplazamiento hacia arriba.
<style>
.iconos-sociales img{
transition:all 0.5s ease-out; border-radius:50px;
}
.iconos-sociales img:hover{
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
transform:translate(0px, -10px);
}
</style>Vista previa
