Las redes sociales se han convertido en la principal fuente de trafico 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 trafico 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 estas usando Blogger o cualquier otro CMS si sigues min 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 a 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 audio visual antes que leer un artículo de una página, por eso es importante que crees perfiles sociales y detienes 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 cuantas personas estas 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 beneficiaras porque podrás informarle 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 necesitaras 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://1.bp.blogspot.com/-0Ao8V_ZtT5Q/YPhkfO0JqkI/AAAAAAAAA1U/Sz5GlaSW78AsY3nZpcqeIoPA_HQUSCVLgCPcBGAYYCw/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://1.bp.blogspot.com/-Pop-U7OywXs/YPhkfrImyiI/AAAAAAAAA1Y/UBnVfTK9j2U-bIUqwZYMNSQPvz_l06mbwCPcBGAYYCw/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://1.bp.blogspot.com/-VFfOISywV0c/YPhkeRXuRQI/AAAAAAAAA1M/L75S9Usg5AovunH2Y-VzqJbaaY1LuK3eACPcBGAYYCw/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://1.bp.blogspot.com/-Vc_W7xraNnc/YPhkfwQExQI/AAAAAAAAA1c/dI72v37UC0EGJd7jWvKWYD3WMwZ7eER7gCPcBGAYYCw/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://1.bp.blogspot.com/-rK19lcfnq9c/YPhkfuEwAnI/AAAAAAAAA1U/0ydy_rVmboQtu211UQs7_zMXdMih2LCCwCPcBGAYYCw/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://1.bp.blogspot.com/-2JwTJZxg1AU/YPhkfB0DdjI/AAAAAAAAA1c/tDKdU6tS0A0lt4YegGUVd7k-9hguYz82ACPcBGAYYCw/s0/Twitter-icono.png" title="Sígueme en Twitter"/></a>
</div>
</center>
<!-- Aquí van los estilos -->
Paso 2: Personaliza tus redes sociales
Editando los códigos que están de color verde:
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 35px de forma predeterminada, si quieres que tus iconos de tus redes sociales se vean más grandes o más pequeños aumentar 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 cedido de cualquier red social y edita los campo de “URL DE LA RED SOCIAL” “Sigueme en…” “URL del icono de la red social”
Si todo sale bien tus resde sociales se verían de la siguiente manera:
Agregar Estilos a tus botones de redes sociales
<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>
<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>
Video TUTORIAL ¿Cómo Añadir los Botones Sociales en tu Blog?
Recomendaciones...
Hola Abraham. ¿Cómo estas? oye si puedes incluir LinkedIn te agradezco
ResponderBorrarListo, Icono agregado. Solo debes crear un nuevo Bloque de red social y editar la imagen, nombre y Dirección URL
BorrarHola abraham seras que puede agregar el icono de snapchat
ResponderBorrar¡Hola abraham!... ¿Podrías agregar el icono de Kakaotalk? te lo agradecería mucho!!
ResponderBorrarEsta bien Amigo, lo hare.
BorrarHola Abraham, por favor puedes agregar el Icono de LinkedIn en oscuro por favoooor, todos mi oconos estan en oscuro menos Linkedin
ResponderBorrarClaro que si Luis, ya esta listo.
BorrarGracias Abraham, con tu ayuda ya lo agregué =)
BorrarTe falto el icono de Blogger, al fin de al cabo también es una red social, ¿no crees?
ResponderBorrarHola Abraham. ¿Nos podría agregar el ícono de Pinterest?
ResponderBorrarGracias!
Hola! Crees que puedas agregar el boton de Wattpad por favor?
ResponderBorrarHola. Podria hacer un tutorial de como agregar el tiempo en blogeer
ResponderBorrarBuen artículo
ResponderBorrarHola. Oye puedes poner la de Kwai app? y la de Wattpad?
ResponderBorrarMuchas gracias Abraham, me sirvió tu mini tutorial porque eliminé los íconos que traía mi plantilla sin saber cómo.
ResponderBorrarGran trabajo, como siempre.
Hola, Abraham podria añadir un icono de spotify, por favor?
ResponderBorrarHola Abraham, puedes colocar el icono de Google News? Porfavor!
ResponderBorrarpuedes porfa agregar el de Discord y el de Pinterest pls Amigo?
ResponderBorraroye, puedes agregar a Twitch?
ResponderBorrarHola Abrahan podrías poner el ícono de Reddit? Graciaaaass
ResponderBorrarHola no me salen los iconos
ResponderBorrarHola como puedo poner los iconos alineados a la derecha ya intente pero solo me deja a la izquierda y en el centro
ResponderBorrarHola Abraham, puedes poner el icono para spotify?, gracias
ResponderBorrarHola Abrahan, ¿Podrías colocar el icono de GitHub? Te lo agradezco mucho.
ResponderBorrarHola Abrahan, como estas ¿Podrías colocar el icono de la aplicación kawai? Te lo agradezco mucho.
ResponderBorrar¿Botón de Gmail?
ResponderBorrarhola! como hago para retirar un botón, quiero sacar el de WhatsApp pero retiro el link y se mueven todos lo botones y se me distorsiona, ayudaaaa
ResponderBorrarHola podrias agregar el de flickr gracias
ResponderBorrarMuy interesante quiero que visites mi blog visualice sus metas lo tengo desde hace 17 años que le mejorarías?
ResponderBorrarPuedes incluir Spotify
ResponderBorrarMuy Buenas: podrías poner el de Gmail, por favor.
ResponderBorrarhola, soy yo o los iconos ya no se pueden ver, intente ponerlos pero no me salen y solamente me sale el texto. me puedes ayudar por favor
ResponderBorrarHola Abrahan, puedes los iconos de spotify, google podcasts, overcast, pocket casts, radiopublic y copy rss
ResponderBorrarHola necesito urgentemente las de GitHub y Medium, gracias, también soy de Venezuela
ResponderBorrarGracias por tu aporte amigo Abraham , que sigan los éxitos para ti
ResponderBorrarGracias por tu aporte Abraham, éxitos saludos!!.
ResponderBorrarHola podrías agregar el icono de Gmail porfavor
ResponderBorrar