Generador de Botones para Compartir
Un generador de botones para compartir escribe el código de los botones por usted. Marque las redes, ajuste estilo, tamaño, radio y separación y el cuadro Código de inserción se actualiza en directo. Con las cuatro redes predeterminadas, la pestaña JS alojado devuelve una sola etiqueta — <script src="https://www.freewebtools.com/js/widgets/social-share.min.js" data-platforms="facebook,twitter,linkedin,whatsapp"> — y la pestaña Enlaces HTML devuelve los mismos botones como enlaces simples.
Plataformas
Personalizar
Preajustes
Vista previa en vivo
Código de Inserción
Herramientas populares
Acerca de Generador de Botones para Compartir
Este generador produce botones de compartir listos para pegar hacia ocho destinos: Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram y correo electrónico. Marque los que quiera en Plataformas y déles forma en Personalizar: estilo (relleno, contorno o minimalista), disposición (horizontal o vertical), posición (en línea o flotante a izquierda o derecha), tamaño de icono de 28 a 56 píxeles, radio de esquina desde cuadrado hasta círculo y separación de 2 a 16 píxeles. Dos casillas deciden si el nombre de la red acompaña al icono y si se mantiene la línea de atribución. Cinco ajustes rápidos — Predeterminado, Iconos compactos, Barra flotante, Contorno y Minimalista — lo fijan todo de una vez.
La vista previa es una ventana de navegador simulada, así que verá los botones dentro de una página y no aislados, y se redibuja con cada cambio. El panel Código de inserción ofrece dos salidas. JS alojado es una única etiqueta script con atributos data-: solo se escriben los ajustes que difieren de los valores por defecto, lo que mantiene la etiqueta corta. Enlaces HTML es un div de enlaces hacia la dirección de compartir de cada red, con target="_blank" y rel="noopener noreferrer" ya puestos: nada que cargar y nada que ejecutar.
Si deja URL personalizada vacía, la salida HTML usa el marcador PAGE_URL, que debe sustituir por la dirección a compartir; el script alojado lee la dirección de la página actual, de modo que funciona sin cambios en todos los artículos de un sitio. Lo que escriba en URL personalizada se escapa como HTML antes de llegar al atributo generado.
Lo que no hace: no cuenta comparticiones ni deja cookies propias. Los botones son enlaces al diálogo de compartir de cada red, así que los contadores y las reglas de consentimiento son de esas redes y no de esta página.
Casos de uso
Cómo usar
En Plataformas, marque las redes que quiera. Facebook, X (Twitter), LinkedIn y WhatsApp vienen marcadas; también están Pinterest, Reddit, Telegram y correo electrónico.
En Personalizar elija estilo, disposición y posición, y use los deslizadores Tamaño y Separación y la lista Radio de borde para encajar con su página.
Con las casillas Mostrar etiquetas y Mostrar marca decida si aparecen los nombres de las redes y la línea de atribución.
Si quiere, pegue una dirección en URL personalizada. Déjela vacía para compartir la página donde acaben los botones.
Revise la Vista previa en directo, que muestra los botones dentro de una ventana de navegador simulada y se redibuja tras cada cambio.
Cambie el panel Código de inserción entre JS alojado y Enlaces HTML, pulse Copiar y pegue el resultado en su página.
Consejos Pro
- La etiqueta alojada solo escribe los ajustes que ha cambiado. Si parece muy corta, es porque estilo, disposición, tamaño 36, radio 8 y separación 8 son los valores por defecto y quedan implícitos.
- Deje URL personalizada vacía cuando los botones deban compartir la página en la que estén. La salida HTML llevará entonces el literal PAGE_URL, que hay que sustituir antes de pegar.
- Mostrar etiquetas cambia la geometría, no solo el texto: sin etiqueta cada botón es un cuadrado del tamaño exacto del deslizador Tamaño; con etiqueta crece para acoger el nombre.
- Flotante a la izquierda y Flotante a la derecha ignoran la lista Disposición — una barra flotante siempre es una columna vertical —, así que ajuste Disposición solo cuando Posición sea En línea.
- El estilo Minimalista dibuja el icono con el color de la red, sin fondo ni borde. En una página oscura compruébelo sobre su propio fondo antes de publicar, porque no hereda nada.
Solución de problemas
Los enlaces HTML generados apuntan todos a PAGE_URL.
Es el marcador que se usa cuando URL personalizada está vacía. Escriba la dirección a compartir en URL personalizada y vuelva a copiar, o sustituya PAGE_URL en el código pegado por la dirección de la página. La salida JS alojado no lo necesita, porque el script lee la dirección en tiempo de ejecución.
Elegir una posición flotante no cambia la lista Disposición.
Una barra flotante siempre se apila en vertical, así que Disposición solo se aplica cuando Posición es En línea. Vuelva a poner Posición en En línea si necesita una fila horizontal, o mantenga el flotante y controle la columna con el deslizador Separación.
Los botones del estilo Minimalista apenas se ven en mi página.
Minimalista dibuja el icono con el color de la red, sin fondo ni borde, así que depende por completo del contraste de su página. Cambie el estilo a Relleno, o a Contorno, que conserva un borde de dos píxeles del color de la red alrededor de cada icono.
Preguntas frecuentes
Marque las redes en Plataformas, ajuste el aspecto en Personalizar y copie una de las dos salidas. JS alojado es una única etiqueta script que pega donde deban aparecer los botones. Enlaces HTML es un bloque de enlaces que puede pegar en cualquier plantilla, incluida una que no deba cargar JavaScript externo.
Es un enlace corriente a la dirección de compartir de la red. Facebook usa https://www.facebook.com/sharer/sharer.php?u= seguido de la dirección codificada; X usa https://twitter.com/intent/tweet?url=; LinkedIn usa /sharing/share-offsite/?url=. La pestaña Enlaces HTML los escribe todos con target="_blank" y rel="noopener noreferrer".
Ocho: Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram y correo electrónico. Las cuatro primeras vienen marcadas. El correo usa un enlace mailto: con la dirección en el cuerpo, así que abre el programa de correo del visitante y no un servicio web.
La salida de Enlaces HTML sí. Es un div de enlaces, de modo que se muestra y funciona con el scripting desactivado y no añade peticiones de terceros a su página. La salida JS alojado necesita JavaScript porque el script dibuja los botones y lee la dirección actual en tiempo de ejecución.
Sí, y el código generado es suyo. Mostrar marca añade una línea de atribución; desmárquela si no la quiere. La salida de Enlaces HTML es completamente autónoma, mientras que el script alojado se carga desde freewebtools.com, algo a tener en cuenta si su sitio bloquea scripts externos.
Sí. Escríbala en URL personalizada y ambas salidas la usan: la etiqueta alojada recibe un atributo data-url y los enlaces HTML apuntan a esa dirección. Si deja el campo vacío, la salida HTML recurre al marcador PAGE_URL, mientras que el script alojado lee la página en la que se ejecuta.
Desmarque Mostrar etiquetas, ponga Radio de borde en Círculo y elija un tamaño en el deslizador: 32 píxeles es lo que usa el ajuste Iconos compactos. Sin etiqueta, cada botón pasa a ser un cuadrado de ese tamaño exacto que el radio circular convierte en un disco.
Relleno pinta el botón con el color de marca de la red y el icono en blanco. Contorno deja el fondo transparente y dibuja un borde de dos píxeles con el color de marca, con el icono del mismo color. Minimalista quita el fondo y el borde y deja solo el icono coloreado.
No. Son enlaces que abren el diálogo de compartir de cada red, y ninguna red ofrece ya un contador público a cualquier sitio. Si necesita cifras, tómelas de su analítica o de los informes de cada red, no del botón.
Sí. Ponga Posición en Flotante a la izquierda o Flotante a la derecha, o pulse el ajuste Barra flotante, que además cambia a columna vertical, oculta las etiquetas y fija el tamaño en 40 píxeles. La vista previa mueve la barra al borde correspondiente de la ventana simulada.