Las redes sociales son muy importantes hoy en día, no solo son un entretenimiento, si no que son una plataforma para poder mostrar y diversificar nuestro trabajo o negocio. 

Por eso es importante incluirlas dentro de nuestra página web o blog. 

En el post de hoy quiero compartir contigo cómo poder añadir botones de redes sociales para tu web de manera muy fácil.

¿Cómo añadir botones sociales?

Antes de empezar me gustaría comentar que la técnica que vamos a ver no es exclusiva de Wix o Webnode. Se puede usar en cualquier página web o blog. 

Muchos de vosotros utilizais plugins para este tipo de tareas, y aunque no hay nada de malo, sí es cierto que pueden sobrecargar la web y hacerla más lenta. 

Yo te quiero mostrar cómo añadir los botones sociales a mano. ¡Tranquilo, no te asustes! Es muy fácil y además te voy a guiar paso a paso. 

¿Por qué añadirlos los botones a mano?

Lo primero porque no van a consumir menos recursos que un plugin. En ocasiones los plugin vienen con funciones que no se utilizan, por lo tanto estarías añadiendo más peso innecesario a tu web. 

Después al insertar directamente un código html, estará optimizado al propio lenguaje de creación. 

Lista de botones sociales 

A continuación puedes ver toda la lista de botones para tu blog o sitio web. Copia el código que quieras y más abajo podrás ver la explicación sobre cómo añadirlos.

Además, también tenemos un tutorial desde nuestro canal de Youtube en donde explicamos paso a paso cómo crear los botones sociales.

· Behance

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en behance" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/behance.png" title="siguenos en behance" /></a>

· Discord

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en discord" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/Discord.png" title="siguenos en discord" /></a>

· Dribbble

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en dribbble" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/dribbble.png" title="siguenos en dribbble"  /></a>

· Dropbox

<a href="URL" target="_blank" rel="noopener">
<img height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/dropbox.png"  /></a>

· Facebook

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en facebook" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/facebook.png" title="siguenos en facebook"/></a>

· Instagram

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en instagram" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/instagram.png" title="siguenos en instagram" /></a>

· Linkedin

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en linkedin" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/linkedin.png" title="siguenos en linkedin" /></a>

· PayPal

<a href="URL" target="_blank" rel="noopener">
<img alt="paypal" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/PayPal.png" /></a>

· Pinterest

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en pinterest" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/pinterest.png" title="siguenos en pinterest" /></a>

· Soundcloud

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en soundcloud" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/soundcloud.png" title="siguenos en souncloud" /></a>

· Snapchat

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en snapchat" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/snapchat.png" title="siguenos en snapchat" /></a>

· Skype

<a href="URL" target="_blank" rel="noopener">
<img alt="skype" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/skype.png" /></a>

· Spotify

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en spotify" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/spotify.png" title="siguenos en spotify" /></a>

· Telegram

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en telegram" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/telegram.png" title="siguenos en telegram" /></a>

· Twitter

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en twitter" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/twitter.png" title="siguenos en twitter" /></a>

· Vimeo

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en vimeo" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/vimeo.png" title="siguenos en vimeo" /></a>

· Whatsapp

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en whatsapp" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/whatsapp.png" title="siguenos en whatsapp" /></a>

· Youtube

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en youtube" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/youtube2.png" title="siguenos en youtube" /></a>

Configuración de los botones sociales

El código de cada botón tiene este aspecto. Te explico cómo funciona para que puedas entenderlo:

<a href="URL" target="_blank" rel="noopener">
<img alt="siguenos en facebook" height="40" width="40" src="https://webmasfacil.info/wp-content/uploads/2021/02/facebook.png" title="siguenos en facebook"/></a>

· URL: debes sustituir la parte que pone URL por la dirección de la red social que has escogido. 

· Title: es el texto que mostrará al pasar el cursor, en el generador podrás agregar la frase que quieras o eliminarlo.

· Alt: es el texto alternativo, por si la imagen no se puede cargar

· Height y Width: es el alto y el ancho mostrado en píxeles. En el código viene un tamaño de ejemplo, pero puedes sustituirlo por el que mejor se adapte a tu web. Recuerda que el tamaño tiene que ser proporcional, si no el botón se deformará. El tamaño máximo es de 90 x 90 píxeles.

Añadir los botones al blog o sitio web

Una vez que ya tengas elegido el botón que deseas mostrar:

1. copia el código
2. pega el código en el apartado específico para html

a) Webnode

En tu proyecto en Webnode, tan solo tienes que pulsar en el + para añadir contenido. Después, elige el módulo de «HTML» y agrega el código que has copiado anteriormente.

El botón no se verá cuando estás haciendo modificaciones, pero no te preocupes, en la versión publicada, se verá perfectamente. No olvides guardar y publicar en la barra superior derecha y estará listo.

b) Wix

En tu proyecto en Wix, en la barra lateral izquierda y pulsa sobre el icono con un +. A continuación, selecciona «Incrustados» y después «Integra un widget».

Te aparecerá una caja en donde deberás pegar el código que has copiado anteriormente. Coloca la caja en el lugar en donde quieras que se muestre el botón y ya estará listo.

c) WordPress

 Para pegar el código en tu página web creada con WordPress dirígete a «Apariencia» y después a «Widgets».

Elige el widget cuyo nombre es «Texto» y pegas el código.

Recuerda que si trabajas con un constructor visual tipo Divo o Elementor debes seleccionar el módulo código.

Personalizar los estilos de los botones

Si además, quieres ajustarlos y personalizarlos para que encajen con la imagen de tu página web. A continuación te explico cómo hacer que tus botones se muestren redondos, cómo espaciar varios botones para que se vean correctamente, o cómo añadir efectos a los mismos al pasar el cursor por encima.

· Botones Redondos

Si deseas que tus botones tengas las esquinas un poco redondeadas o que sean totalmente redondos, también se puede conseguir añadiendo un poco más de código.

<div class="botones-sociales">
... aquí van el código ....
</div>
<style>.botones-sociales img{border-radius:50px;}</style>

Recuerda que 50px es solo un ejemplo, puedes modificar la cifra según lo que necesite tu diseño.

· Espacio entre los botones

Al añadir los botones directamente, lo más seguro es que aparezcan uno pegado al lado de otro y esto puede que no sea muy estético. Aquí te dejo el código para que tengan más separación.

<div class="botones-sociales">
... aquí va el código ....
</div>
<style>.botones-sociales img{margin:5px;}</style>

·Botones efecto giratorio

Si quieres llamar la atención con tus botones, puedes añadir un efecto giratorio cuando pasen el cursor por encima. Te muestro cómo se vería y su código para copiarlo.

<div class="botones-sociales">
... aquí va el código ....
</div>
<style>.botones-sociales img{ 
transition:all 0.5s ease-out;}
.botones-sociales img:hover{
transform: rotate(360deg);
}</style>

· Redondear al pasar el cursor

Otro efecto muy original es que las esquinas el botón se redondee cuando se pasa el cursor por encima.

<div class="botones-sociales">
... aquí va el código ....
</div>
<style>.botones-sociales img{ 
border-radius:50px; 
transition:all 0.5s ease-out;}
.botones-sociales img:hover{
border-radius:0px;}</style>

Espero que ahora te parezca mucho más sencillo añadir más botones de tus redes sociales a tu página o blog.

Como ves, con unas pocas líneas de código se pueden hacer muchas cosas.

Si tienes cualquier pegunta o sugerencia, no dudes en escribirnos, estamos deseando leerte. ¡Hasta la próxima!