Para añadir los iconos de compartir en redes sociales a las páginas de productos de Woocommerce vamos a usar un clásico, el plugin: AddToAny Share button
Éste, es un plugin gratuito del repositorio de WordPress que puedes encontrar aquí:
Lo que más me gusta de este plugin es que se pueden personalizar los colores de los iconos, sus dimensiones, diferentes opciones de visualización (normal y flotante), aporta widgets y mucho más.
ÍNDICE DE CONTENIDOS
- 1.- Acceso a configuración del plugin AddToAny Share button
- 2.- Opciones de configuración del plugin para compartir productos Woocommerce en redes sociales.
- 3.- Compartir url de la ficha de producto por email
- 4.- Widgets de iconos de redes sociales
Una vez instalado el plugin podrás acceder a sus opciones de configuración de dos maneras:
- Plugins: puedes ir a la página de plugins y hacer clic en el enlace “Ajustes” del plugin “Botones de compartir de AddToAny”
- Ajustes: también puedes ir al menú lateral del panel de administración de wordpress y hacer clic en: “Ajustes > AddToAny”
Una vez accedes a la configuración del plugin para compartir productos en redes sociales verás que hay dos pestañas diferentes:
- Standar: Desde aquí personalizaremos el diseño de los iconos y las opciones de visualización estándar de los iconos de compartir. En los productos aparecerán justo bajo la referencia y categorías a la que pertenece el producto.
- Floating: con esta opción de visualización los iconos de compartir aparecerán flotantes (horizontal o verticalmente) cuando se haga scroll en la página.
2.1.- Pestaña “Standar” de configuración de plugin compartir productos woocommerce
Como antes te he comentado en esta pestaña personalizaremos el diseño de iconos (todos) y configuraremos la visualización estándar de iconos de compartir en redes sociales de productos. En los productos, se situarán justo debajo de donde aparece la referencia y categorías a las que pertenece el producto.
Recuerda hacer clic en el botón “Guardar cambios” cuando realices alguna modificación,
i.- Estilo de icono:
a.- Tamaño: desde aquí personalizaremos el tamaño en píxeles de los iconos
b.- Background: color de fondo de los botones en los cuales se inscriben los iconos de redes sociales. Podremos elegir entre original (colores por defecto de cada red social), Transparent (transparente) o custom (personalizado).
En el caso de elegir “Custom” luego tendremos que elegir el color de fondo que queremos para los botones en los que aparecen los iconos de redes sociales.
c.- Foreground: se refiere al color de primer plano. Es decir, el color que va tener el icono de la red social. Podremos elegir entre las mismas opciones que en el apartado interior.
Estas opciones son muy interesante ya que podemos hacer que todas las redes sociales tengan un color de fondo y primer plano diferente al habitual de cada red social y que pegue más con el diseño de la tienda online.
Iconos de compartir productos en redes sociales con su color original
Iconos para compartir productos con colores personalizados
ii.- Botones para compartir
Desde aquí seleccionaremos que iconos queremos que aparezcan en la ficha de producto.
Para ello haremos clic en “Añadir / Quitar servicios”, aparecerán un montón de iconos de redes sociales e iremos haciendo clic en los que queremos que se muestren.
Elegir redes sociales que queremos que se muestren en los productos
iii.- Botón universal
Además de los iconos que hemos añadido en el apartado anterior podemos añadir un nuevo icono que sirva para poder compartir el producto en cualquier otra red social (aunque no sea de las seleccionadas en el apartado anterior)
Botón para compartir ficha de producto en cualquier red social
Este botón para mostrar el resto de redes sociales lo podrá hacer de diferentes formas:
- a.- Botón “+”: aparecerá un botón con el signo “+” en su interior para compartir en otras redes sociales.
- b.- URL de la imagen: podemos poner la url de la imagen de un icono que hayamos subido previamente a la biblioteca de wordpress, para que se muestre dicho icono.
- c.- Text only: podemos poner un texto en vez de un botón.
- d.- Ninguna: esta opción sirve para Desactivar el botón universal.
- e.- show cont: para que se muestre un cartel con el número de veces que se ha compartido el producto en redes sociales.
Opciones para compartir a través de otras redes sociales
iv.- Compartir encabezado:
Esta opción sirve para poner un texto encima de los iconos de compartir en redes sociales del producto. El texto podría ser del tipo: «comparte este producto:” o algo así
v.- Ubicación del botón:
Desde este apartado podremos elegir en qué tipos de páginas mostraremos los iconos de compartir en redes sociales.
a.- Mostrar en el …. De las entradas: en este apartado podremos elegir si queremos que los iconos de redes sociales aparezcan en las entradas de blog y en qué posición.
b.- Mostrar en el inferior de las páginas: para mostrar los iconos de redes sociales en la parte inferior de las páginas de wordpress.
c.- Mostrar en el inferior de productos: para mostrar los iconos de redes sociales en los productos de woocommerce
Lugar en que se mostrarán los iconos de redes sociales
Con esta opción podemos personalizar el diseño del bloque de compartir en otras redes sociales. Para ello debes hacer clic en “Abrir el personalizador de estilos”, personalizar colores y copiar el código resultante y pegarlo en el campo de texto “Javascript adicional”.
Personalizar diseño botones de compartir resto de redes sociales
2.2.- Pestaña “Floating” de configuración de plugin para compartir productos en Woocommerce
Esta pestaña está dividida en dos apartados: Botones verticales y Botones Horizontales
- Botones Verticales: en este apartado configuraremos opciones de botones flotantes verticales.
- Botones horizontales: en este apartado configuraremos opciones de botones flotantes horizontales.
2.2.1.- Botones Verticales (botones flotantes con formato vertical)
a.- Ubicación del botón: aquí podremos seleccionar tres opciones diferentes.
Acoplado a la izquierda: para que el bloque flotante de iconos de compartir salga en el lateral izquierdo de la interface.
Acoplado a la derecha: para que el bloque flotante de iconos de compartir salga en el lateral derecho de la interface.
Ninguno: DESACTIVAR el bloque flotante de iconos de compartir en formato vertical
b.- Ajustable: desde aquí podremos indicar una condición para que aparezca el bloque de iconos solo si la interface tiene una anchura superior a un determinado número de píxeles (esto nos puede servir para no mostrar los botones en móviles)
c.- Posición: aquí estableceremos la distancia en píxeles desde la parte superior de la web y el bloque de iconos flotante.
d.- Offset: aquí podemos establecer un margen en píxeles entre el bloque de iconos de compartir flotante y su lateral vertical más cercano.
e.- Tamaño de icono: aquí estableceremos el tamaño de los iconos.
f.- fondo: aquí opcionalmente podremos establecer un color de fondo para el bloque flotante que contiene los iconos de compartir. Transparente es la opción marcada por defecto, pero también podemos poner un color personalizado.
2.2.2.- Botones horizontales (botones flotantes con formato horizontal)
Desde aquí elegiremos si queremos mostrar un bloque flotante de iconos de redes sociales en formato horizontal.
También podremos elegir entre las diferentes opciones de personalización, que son exactamente las mismas que describíamos en el apartado anterior al que te remito.
3.- Compartir url de la ficha de producto por email
Habrás visto que entre los iconos de redes sociales que podemos añadir hay un icono con forma de sobre y nombre “email”.
Este icono es bastante interesante, y si un cliente hace clic sobre dicho icono se abrirá la aplicación de correo electrónico que use en su ordenador con la url del producto en el contenido de un nuevo email.
Es decir, es un icono que sirve para recomendar productos a un amigo por email.
El plugin AddToAny Share Button incluye dos widgets que podremos usar en la barra lateral de la tienda o en el footer:
a.- Widget AddToAny Follow: este widget sirve para mostrar los iconos de las redes sociales en los que está presente nuestra tienda online.
En su configuración deberemos poner las urls de las redes sociales en las que estamos presentes. También podremos personalizar el tamaño de los iconos.
Nota: no debes poner la url completa de la red social, sino solo la parte que viene después del dominio.
Es decir, de la url:
https://www.facebook.com/horizonwebMurcia
Solo habría que poner:
horizonwebMurcia
Iconos de redes sociales en widget
b.- Widget AddToAny Share: con este widgets podremos insertar los iconos de redes sociales para compartir en la barra lateral o footer.
Las opciones de personalización serán las configuradas en las opciones generales de personalización del plugin.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Pregunta: ¿por qué no viene el botón a Instagram? Lo quise añadir según tu tutorial pero no estoy usando widgets. ¿Se puede? Gracias!! 🙂
Buenas Jesús.
Porque Instagram no permite compartir contenidos desde páginas web externas
*** Ya que estás por aquí, por si te interesa, te invito a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/. En la que hay cursos sobre Woocommerce, WordPress, SEO tiendas online, Analytics para ecommerce ….y muchos más. Por solo 10 €/mes puedes accedcer a TODOS los cursos (incluye soporte)***
Buenas tardes
Me gustaría que los botones para compartir apareciesen debajo del precio del producto.
Como podría conseguirlo??
Gracias de antemano.
Hola Javier.
Que yo sepa, no es posible esa ubicación para los botones de compartir.