Botones para compartir: Facebook, X, WhatsApp y siete más, sin scripts de terceros, para PrestaShop

Lo habitual le cuesta la privacidad a tus clientes

La mayoría de los módulos de compartir incrustan los widgets oficiales de cada red. Eso significa que el script de Facebook, el de X y el de LinkedIn se cargan en tus páginas, dejan sus cookies y registran quién ha pasado por allí, comparta alguien algo o no.

Eso es un banner de consentimiento, un párrafo más en tu política de privacidad, tres peticiones a terceros en cada página y una tienda más lenta. A cambio consigues un botón de compartir.

Este módulo hace justo lo contrario.

No se carga nada hasta que alguien hace clic

En tus páginas no hay código de ninguna red social. Ni diferido, ni con carga perezosa, ni detrás de un aviso de «pulsa para cargar»: sencillamente no está.

Los botones son botones HTML corrientes. La dirección para compartir la monta un script nuestro, alojado en tu propio servidor, en el instante en que alguien pulsa, y solo entonces se abre una ventana hacia Facebook, X o WhatsApp. Antes de ese clic no hay ninguna URL de Facebook en tu página a la que el navegador pueda preconectarse, no hay nada que filtre un referrer y no hay nada que consentir.

Los dos únicos archivos que se cargan son nuestros, servidos desde tu propio dominio.

Diez sitios donde compartir

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, correo electrónico, copiar enlace y el propio menú para compartir del teléfono.

Ocho vienen activados de fábrica. Telegram y Reddit están ahí cuando los quieras, desactivados por defecto para que la fila no se sature.

Dos de ellos no tocan internet en absoluto. Copiar enlace deja la dirección en el portapapeles. Compartir se la entrega al menú nativo del sistema operativo, de modo que en el móvil tu cliente ve sus aplicaciones reales —aquellas en las que de verdad habla con la gente— y no tu conjetura sobre cuáles le importan.

Ese botón nativo solo aparece en los navegadores que lo admiten, así que nadie ve nunca un botón que no hace nada.

Que se parezca a tu tienda, no a 2013

Cuatro ajustes, y todas las combinaciones funcionan: sólido, contorno o minimal; redondeado, círculo o cuadrado; tres tamaños; y colores de marca o un único tono neutro.

Son cincuenta y cuatro aspectos distintos antes siquiera de decidir si muestras etiquetas de texto o un encabezado. Los iconos van dibujados como SVG en línea dentro de tu página —sin fuente de iconos que descargar, sin sprite de imágenes, sin CDN—, así que toman el color de la hoja de estilos y se ven nítidos a cualquier tamaño. Hay además un modo oscuro que sigue la preferencia del sistema del visitante.

Un límite dicho con franqueza: los colores de marca son los auténticos y están fijados por red. Tu elección es colores de marca o neutro, no un selector de color.

Bajo el producto, en el lateral o donde te convenga

Por defecto aparece una fila para compartir debajo del producto. También hay una barra flotante —borde izquierdo o derecho, en todas las páginas o solo en las de producto— que está desactivada hasta que tú la actives, y que en el móvil se desplaza a la parte inferior de la pantalla.

Más allá de eso, el módulo implementa la interfaz de widgets de PrestaShop, así que {widget name='socialpower'} coloca los botones en la plantilla de tu tema que prefieras. Como todas las ubicaciones pasan por el mismo código, mover el módulo a otro hook desde Diseño → Posiciones funciona de verdad, no a medias.

3,7 KB y nada más

Una hoja de estilos y un script — 3,7 KB comprimidos entre los dos (CSS 1.774 B + JS 1.974 B). Sin jQuery. Sin framework. Sin paquete de polyfills. Sin fuente web.

El script se carga al final de la página, de modo que nunca bloquea el renderizado, y sale de inmediato en las páginas donde no hay botones.

Y seamos claros con una cosa: esos dos archivos pequeños se registran en todas las páginas del front-office, no solo en aquellas donde se ven los botones. En una tienda configurada con normalidad PrestaShop los agrupa con los recursos del propio tema, así que el coste práctico es nulo; pero son dos archivos, no cero, y preferimos decirlo a que lo descubras tú.

Lo que no hace, a propósito

No hay contadores de veces compartido, y eso es una decisión, no una carencia. Facebook, X y LinkedIn retiraron sus endpoints públicos de recuento entre 2015 y 2018. Cualquier módulo que hoy te enseñe un número o te está mostrando uno caducado o le está pagando a un tercero por él, y pagar a un tercero significa enviarle a tus visitantes. Preferimos no mostrar ningún número a mostrar uno equivocado.

No llama a casa. Ni comprobación de licencia, ni analítica, ni llamada de ningún tipo hacia nosotros.

Nada almacenado, en ninguna parte

Sin cookies. Sin almacenamiento local. Sin tablas en la base de datos: no se crea ninguna, así que no queda ninguna atrás. El módulo escribe doce ajustes y nada más, y al desinstalarlo también se van.

Dos cosas que merecen nombrarse en lugar de pasarse por alto, porque son APIs del navegador y no exactamente nada. Copiar enlace usa la API del portapapeles, que escribe en local y no envía nada a ningún sitio. Compartir entrega la dirección al sistema operativo, y lo que el sistema haga después es asunto suyo, no nuestro. Ninguna de las dos es un problema; ambas quedan mejor descritas que silenciadas.

Pensado para usarse con el teclado

Los botones son elementos <button> de verdad, no enlaces ni divs maquillados, así que reciben el foco y se activan desde el teclado como el navegador espera, y los lectores de pantalla los anuncian como botones. Cada uno lleva una etiqueta con el nombre de la red, y los iconos están ocultos a las tecnologías de asistencia para que nada se lea dos veces.

Dos límites, dichos sin rodeos. El anillo de foco se sustituye por una elevación y una sombra: se ve con claridad, pero es un indicador diseñado, no el contorno nativo del navegador. Y de los tres tamaños, solo el grande cumple la recomendación de 44 píxeles de área táctil; el más pequeño mide 32 píxeles.

Configúralo mirándolo

La página de configuración muestra una vista previa construida a partir de tus ajustes guardados y de la dirección real de tu tienda: el componente auténtico renderizado por el mismo código que usa tu escaparate, no una captura de pantalla. Guarda, y la vista previa se vuelve a dibujar con lo que has elegido, de forma que puedes decidir la forma y el tamaño sin abrir la tienda en otra pestaña.

Traducido a ocho idiomas

Alemán, español, francés, inglés, italiano, neerlandés, polaco y turco: todas las cadenas, incluidas las que ven tus clientes: el encabezado «Compartir», los nombres de las redes y la confirmación «¡Copiado!».

Compatibilidad

PrestaShop 1.7 a 9. Tres hooks, más la interfaz de widgets, sin overrides y sin modificar el tema.

La versión 3 fue una reescritura. Al actualizar se eliminan las tablas de base de datos del módulo antiguo, se dan de baja sus dieciocho hooks heredados y se borran del disco los archivos obsoletos, incluidas las capturas de pantalla del widget que antes venían con él.

Preguntas frecuentes

¿Carga esto el código de Facebook o de X en mis páginas?

No, y tampoco de forma diferida ni con carga perezosa. En tus páginas no hay ningún script de red social. Los botones son botones HTML normales y la dirección para compartir la monta nuestro propio script en el momento en que alguien pulsa. Antes de ese clic no hay nada de ninguna red social en tu página.

¿Necesito un banner de cookies por él?

El módulo no te da nada que declarar: no pone cookies, no escribe nada en el almacenamiento del navegador y no hace ninguna petición a terceros antes de un clic. Cuando alguien sí pulsa, se va a la página de compartir de esa red, que es su propia relación con ella. Lo que eso signifique para tu banner concreto es una cuestión para quien te asesore en protección de datos: nosotros podemos decirte exactamente qué hace el código, que es nada hasta que hay un clic, pero no qué espera tu autoridad de control de tu tienda en conjunto.

¿Qué redes están incluidas?

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, correo electrónico, copiar enlace y el menú para compartir del propio dispositivo. Ocho vienen activadas por defecto; Telegram y Reddit llegan desactivados para que los añadas si los quieres.

¿Muestra el número de veces compartido?

No, a propósito. Facebook, X y LinkedIn cerraron hace años sus endpoints públicos de recuento, así que hoy un número o viene de un tercero de pago —lo que implica enviarle los datos de tus visitantes— o no es real. Preferimos no mostrar nada antes que algo incorrecto.

¿Dónde aparecen los botones?

Bajo el producto por defecto. También hay una barra flotante para el borde izquierdo o derecho, en todas las páginas o solo en las de producto, desactivada hasta que la quieras. Y {widget name='socialpower'} los coloca en cualquier punto de una plantilla del tema. Además puedes mover el módulo a otro hook en Diseño → Posiciones y funcionará allí correctamente.

¿Puedo cambiar los colores?

Puedes alternar entre los colores de marca reales de cada red y un único tono neutro, y elegir sólido, contorno o minimal, tres formas y tres tamaños. Lo que no puedes hacer es fijar un color propio por red: los colores de marca son los auténticos y están fijados.

¿Ralentizará mi tienda?

Una hoja de estilos y un script, 3,7 KB comprimidos entre ambos, sin jQuery y sin ninguna petición externa. El script se carga al final para no bloquear la página. Conviene saberlo: esos dos archivos se registran en todas las páginas del front-office, no solo donde se ven los botones, aunque PrestaShop normalmente los agrupa con los recursos de tu propio tema.

¿Es accesible?

Más que la mayoría. Botones de verdad en lugar de enlaces maquillados, así que el foco y la activación por teclado funcionan de forma nativa y los lectores de pantalla los anuncian bien, con una etiqueta por red y los iconos ocultos a las tecnologías de asistencia. Dos matices que te conviene conocer: el indicador de foco es una elevación con sombra en vez del contorno del navegador, y solo el tamaño grande cumple la recomendación de 44 píxeles de área táctil.

¿El botón de WhatsApp abre la aplicación en el móvil?

Sí, aunque no detectamos el dispositivo para lograrlo. El botón usa siempre el enlace universal de la propia WhatsApp, y WhatsApp se encarga del resto: la aplicación en el móvil, WhatsApp Web en el escritorio.

¿Qué es el botón Compartir que solo veo en el móvil?

Es el menú nativo para compartir del sistema operativo, al que se llega mediante la Web Share API del navegador. Le ofrece a tu cliente sus aplicaciones reales en lugar de una lista fija. Solo aparece donde el navegador lo admite: el módulo lo comprueba antes, así que a los visitantes de escritorio nunca se les muestra un botón que no hace nada.

¿Guarda algo sobre mis visitantes?

Nada. Sin cookies, sin almacenamiento del navegador, sin tablas en la base de datos: no crea ninguna, así que no hay nada que limpiar después. Escribe doce ajustes de configuración y los vuelve a borrar al desinstalarse.

¿Puedo ver cómo quedará antes de guardar?

Sí. La página de configuración renderiza una vista previa a partir de tus ajustes guardados y de la dirección de tu propia tienda, usando el mismo código que dibuja los botones en tu escaparate, de modo que lo que ves es genuinamente lo que reciben tus clientes, no una ilustración. Se vuelve a dibujar al guardar, no mientras escribes.

¿Qué pasa con mis ajustes de la versión 2?

La versión 3 es una reescritura y actualiza limpiamente: se eliminan las tablas antiguas de la base de datos, se dan de baja los dieciocho hooks heredados, se registran en su lugar los modernos y se borran del disco los archivos obsoletos. Después conviene que repases los ajustes de apariencia, porque ahora hay más.

¿Qué idiomas habla?

Ocho: alemán, español, francés, inglés, italiano, neerlandés, polaco y turco. Eso incluye las cadenas que leen de verdad tus clientes —el encabezado «Compartir», los nombres de las redes y la confirmación «¡Copiado!»—, no solo el back-office.