Botones sociales con Add This y Wix

Mar 5, 2021 | Creadores Web, Herramientas

La entrada de hoy, la vamos a dedicar a las redes sociales. Ya seas un empresario o un particular, las redes sociales ocupan un lugar privilegiado en nuestro día a día, por eso mismo quiero mostrarte cómo añadir botones sociales a tu sitio web en Wix. 

Si todavía no tienes tu web en Wix, ¿a qué esperas? Pulsa en el botón para conocer todos los beneficios de Wix. Una web rápida y profesional en 5 minutos.

Por un lado, te voy a mostrar una de las opciones que incluye el editor de Wix para añadir botones de redes sociales para crear un sitio web más profesional. 

Y de regalo quiero que aprendas a utilizar una herramienta llamada AddThis, que en esta ocasión la usarás para añadir botones de compartir. De esta manera tus visitantes y seguidores podrán compartir tu contenido. 

Como siempre, te recuerdo que tenemos un canal de YouTube en donde puedes ver el tutorial paso a paso.  

¡Empezamos!

Añadir botones sociales en Wix

Lo primero de todo es que te dirijas a tu cuenta de Wix y abras tu proyecto para empezar a editarlo. 

Dentro de tu proyecto, en el menú de la barra lateral izquierda, encontrarás un botón con un símbolo más llamado “Agregar”. Púlsalo y deslízate hasta la opción de “Redes sociales”. 

redes-sociales-wix

Como ves, Wix ya incluye algunas opciones predefinidas que te pueden ahorrar algo de tiempo. Navega tranquilamente por todas las opciones y escoge la que mejor se adapte a tu estilo. Recuerda que después puedes modificar su aspecto. 

Personalizar iconos Wix

Voy a mostrarte cómo se pueden personalizar los iconos de Wix. Para el ejemplo, he escogido la primera opción predefinida en el editor de Wix. 

configurar-botones-redes-sociales-wix

Los iconos sociales tienen sus propias opciones de configuración. La primera opción es “Configurar enlaces” En ella se pueden agregar, eliminar o cambiar el color y formato de los iconos pulsando en el botón superior naranja “Agregar iconos”.

También se puede añadir la url de cada red social y además, variar el orden en que deseas que se muestran.

La segunda configuración que permite Wix se llama “Estilos” y en ella podemos modificar el tamaño de los iconos, la separación entre ellos y su disposición, podemos hacer que se alineen en horizontal o el vertical. 

botones-redes-sociales-estilos

La última opción es para incluir algún tipo de animación a los iconos sociales. Esta opción puede ser interesante para llamar la atención del visitante. Además, una vez que hayas elegido una animación, en el botón “Personalizar” podrás variar los parámetros que vienen por defecto, para así ajustar la duración o el movimiento.

redes-sociales-wix-animacion

De esta manera tan sencilla ya has podido añadir y personalizar los botones sociales en tu página en Wix. 

Ahora vamos con la herramienta AddThis para que puedan compartir tu contenido en redes sociales. ¡Sigue leyendo!

Crear botones de compartir en redes sociales en Wix

Para poder utilizar AddThis, tenemos que crearnos una cuenta en https://www.addthis.com/ y completar todos los datos de registro. 

Una vez que hayas terminado te encontrarás con la siguiente pantalla:

herramienta-add-this

Para crear los botones de compartir, pulsa en la opción “Share Buttons”. Una vez dentro, encontrarás un menú en la barra lateral izquierda. 

En esta barra puedes seleccionar el estilo de los botones. Existen: 

· Flotantes: que se sitúan en el lateral de la página.
· En Línea: se sitúan todos juntos en una línea.
· Expandidos: se coloca un botón en la parte inferior de la página en donde al pulsar se expande y aparecen todos los botones sociales. 
· Compartir imagen: se sitúa en dentro de las imágenes. 
· PopUp: aparece una ventana emergente con todos los iconos
· Banner: se situa un banner en la página con los iconos.
· Slider: al hacer scroll aparece un slider con los iconos. 

Te recomendamos que curiosees por las opciones para elegir la que más te convenga. Dentro de cada una, tiene unos parámetros para poder configurarla y personalizarla según tus preferencias. 

Para el ejemplo de ahora, yo voy a elegir los botones en línea para las redes sociales de Facebook Linkedin y Whatsapp. Si lo deseas, puedes cambiar, añadir y eliminar redes sociales tal y como te muestro en la siguiente imagen.

add-this-configuracion

En la siguiente opción del menú, podemos modificar el diseño: cambiar el estilo, tamaño y quieres que tengan esquinas redondas. El color del botón y del icono y si no quieres que se muestre el nombre de la red social.

add-this-diseño

La tercera opción se llama “Share Counters” y es para ajustar si deseas que se muestre el número de compartidos. La cuarta opción es “Position” y como dice su nombre es para posicionar los iconos según el dispositivo y el tamaño de la pantalla. Y la última opción “Behavior” es para el comportamiento de la herramienta, si deseas que los iconos no se muestren en una página en específico.

Una vez tengas configurado todo correctamente, pulsa en el botón azul “Activate” y te apareceran dos código. 

Copia el primer código, vuelve a tu proyecto en Wix y al igual que antes, en la barra lateral izquierda, pulsa en Agregar que tiene un símbolo de + y después en Incrustado y selecciona la primera opción. 

add-this.-configuracion-wix

Coloca el módulo de código de html en donde deseas que se muestren los botones de compartir, como por ejemplo en tu blog y pega el código dentro. 

Vuelve a AddThis y copia el segundo código que te muestra en el caso de que haya seleccionado que se muestren los botones en línea como nosotros y pégalo debajo del anterior código. 

Una vez que has pegado los dos códigos, no olvides pulsar Actualizar y Publicar la página para que se guarden todos los cambios. 

En tan solo unos minutos has podido crear y añadir distintos formatos de botones de redes sociales en tu web en Wix. 

Espero que te haya servido de ayuda y empieces a utilizar todas estas opciones en Wix. ¡Hasta la próxima!

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

11 + quince =

También te pueden interesar

estos artículos del  blog

Pin It on Pinterest

Share This