Generador de botones para compartir
Iconos redes sociales y código
Crea botones para compartir con iconos redes sociales en menos de un minuto. Primero elige las redes, una forma y tus colores, y luego ajusta el diseño. Después copia HTML + CSS limpio, o HTML puro con estilos en línea. No hay scripts de terceros, ni cookies, ni registro.
- GratisPrecio
- 32 SVGIconos
- HTML + CSS o HTML puroCódigo
- NingunoRastreo
Generador de botones para compartir
Elige redes, forma y colores, y luego copia el HTML
Los botones siguen el orden en que las marcas.
Instagram, YouTube, TikTok y las demás en gris no tienen enlace para compartir. Cambia a “Enlazan a mis perfiles” para usarlas.
Pega la dirección completa de cada perfil. Un botón sin dirección apunta a # hasta que añadas una.
- Botones
- 0
- Tamaño del código
- 0
- Scripts
- 0
La vista previa y el código cambian con cada ajuste. Copia el código cuando te guste.
Qué hace esta herramienta de iconos redes sociales
Los botones para compartir son los pequeños iconos que dejan al lector pasar tu página a otros. Un clic abre Facebook, X, WhatsApp o el correo, con tu enlace ya puesto. Así, cada lector puede ser el primer enlace a tu web para alguien nuevo.
Esta herramienta crea esos botones por ti. Para empezar, marca las redes que quieras entre 32 iconos SVG. Luego elige una forma, de cuadrada a círculo, y lo suaves que son las esquinas. Después elige los colores de marca, o tu propio fondo y color de icono.
A continuación, ajustas el diseño. Los botones pueden ir uno al lado del otro, apilados, en cuadrícula o flotando en el borde de la pantalla. Por último, copias el código. La versión HTML + CSS guarda el estilo en un bloque pequeño, mientras que la de HTML puro pone cada estilo en la propia etiqueta.
Los botones son enlaces simples a la página de compartir de cada red. Por eso no hay widget, ni script de rastreo, ni nada que frene la página. Además, cada enlace lleva un aria-label claro, así quien usa un lector de pantalla oye “Compartir en Facebook” en vez de nada.
Qué hay dentro de un botón para compartir
Cada botón es un enlace con tres partes. Primero, la dirección es la página de compartir de la red con tu enlace y título añadidos. Segundo, el icono es un SVG en línea, por eso se ve nítido a cualquier tamaño y no necesita otro archivo.
La tercera parte es la etiqueta. Puede ser texto visible, como “Facebook”, o un aria-label oculto. Gracias a ella, el botón tiene sentido incluso para quien no ve el icono.
Iconos redes sociales en SVG, listos para tu estilo
La herramienta dibuja los 32 iconos redes sociales en SVG. Es decir, cada icono es una ruta, rellena con el color que elijas. Así, un icono blanco sobre un color de marca y uno oscuro sobre un tinte suave se ven nítidos.
Cada cambio aparece al momento en la vista previa. También puedes ver la vista previa sobre fondo blanco, gris claro u oscuro. De este modo sabes cómo se verán los botones en tu página real.
HTML para iconos redes sociales: dos tipos de código
Elige HTML + CSS para una web o un tema. Así obtienes un solo bloque de estilo y nombres de clase cortos, y además funcionan los efectos al pasar el ratón.
En cambio, elige HTML puro para constructores de páginas, Markdown o un correo HTML. Ahí cada estilo va en la etiqueta, así que no hace falta nada más.
En esta página
- La herramienta
- Qué hace esta herramienta de iconos redes sociales
- Cómo crear botones para compartir
- Por qué usar estos botones con iconos redes sociales
- Cómo se crean los botones para compartir
- Errores comunes con los botones para compartir
- Preguntas frecuentes sobre iconos redes sociales y botones
- Más herramientas para compartir y HTML
Sigue leyendo
Mira el generador de botones para compartir en acción
Un vídeo corto recorre cada paso. Luego elige tu idioma abajo y activa los subtítulos si quieres.
Cómo crear botones para compartir
Seis pasos cortos. Además, todo pasa en esta pestaña.
Elige compartir o seguir
Usa “Botones que” arriba. Comparten una página crea enlaces para compartir, y Enlazan a mis perfiles apunta a tus cuentas.
Marca las redes
Marca cada red que quieras. Los botones salen en el orden en que las marcas, así que marca primero la más útil.
Añade la página o tus perfiles
Escribe la dirección de la página y el texto que se comparte. Para botones de seguir, en cambio, pega el enlace de cada perfil.
Elige forma y colores
Elige una forma, mueve el control de suavidad y escoge un estilo. Luego deja los colores de marca, o pon tu propio fondo y color de icono.
Ajusta el diseño
Pon los botones uno al lado del otro, apilados, en cuadrícula o en una barra lateral flotante. También ajusta el tamaño, el espacio entre ellos y el texto.
Copia el código
Elige HTML + CSS o HTML puro, y luego copia el código o descárgalo como archivo HTML. Después pégalo una vez donde deban verse los botones.
Por qué usar estos botones con iconos redes sociales
Tres razones para crear tus propios botones en lugar de añadir un widget.
Sin widget, sin rastreo
Los widgets para compartir a menudo cargan un script, ponen cookies y rastrean a tus lectores. Estos botones, en cambio, son enlaces simples. Así tu página sigue rápida, y no hay nada extra que poner en tu política de privacidad.
Todo el estilo en un sitio
Forma, suavidad, colores, tamaño, diseño y efecto al pasar el ratón están en una sola pantalla. Además, seis estilos rápidos te dan un buen comienzo con un clic, y luego puedes cambiar cada ajuste.
Código que encaja en cualquier sitio
La versión HTML + CSS va bien para una web o un tema. Mientras tanto, la versión de HTML puro funciona donde no puedes añadir CSS, por ejemplo en un bloque de un constructor de páginas o en un correo.
Cómo se crean los botones para compartir
Tres reglas dan forma al código que copias. Además, conocerlas te ayuda a usarlo bien.
- Cada red tiene su propia dirección para compartir Facebook, X, LinkedIn y las demás tienen una página que abre una publicación lista. La herramienta añade tu enlace codificado y tu título a esa dirección. Sin embargo, algunas apps, como Viber y Messenger, usan un enlace de app, por eso van mejor en el móvil.
- Los enlaces para compartir van con nofollow Un enlace para compartir no es una página que recomiendas. Por eso la herramienta marca esos enlaces con rel="nofollow noopener noreferrer". En cambio, los enlaces a perfiles llevan rel="me", que indica a algunas redes que el perfil es tuyo.
- El contraste decide lo que se ve Un icono necesita un contraste de al menos 3 a 1 con su fondo para verse bien. Esa es la regla de la guía WCAG de contraste no textual. Así que, cuando tus propios colores quedan por debajo, la herramienta te avisa.
Errores comunes con los botones para compartir
Cada uno de estos te quita veces compartidas, incluso con buenos botones.
Demasiadas redes
Veinte botones parecen ruido. En cambio, deja las tres a seis que tus lectores usan de verdad.
Iconos sin etiqueta
Un lector de pantalla no puede leer un icono. Por eso, el código añade un aria-label a cada botón.
Un icono pálido sobre un color pálido
El blanco sobre amarillo claro casi no se ve. Así que mira el aviso de contraste y corrige el color.
La dirección equivocada
Entonces cada página comparte tu página de inicio. En cambio, marca la dirección automática para las plantillas.
Botones muy pequeños en el móvil
Un botón diminuto cuesta de pulsar. Por eso, déjalos en 40 píxeles o más para el pulgar.
Una barra flotante sobre el contenido
Una barra lateral puede tapar texto en una pantalla pequeña. Por lo tanto, pruébala en un móvil antes de publicar.
Preguntas frecuentes sobre iconos redes sociales y botones
¿Este generador de botones para compartir es gratis?
Sí. No hay precio, ni registro, ni marca de agua en el código. De hecho, tu navegador hace todo el trabajo.
¿Los botones rastrean a mis lectores?
No. Son enlaces simples, sin scripts nuestros ni de las redes. Así, una red solo ve una visita cuando el lector hace clic.
¿Cuántas redes puedo usar?
Hay 32 iconos. De ellos, 22 pueden compartir una página, mientras que los demás, como Instagram y YouTube, enlazan a un perfil.
¿Por qué no puedo marcar Instagram en el modo compartir?
Instagram, YouTube y TikTok no tienen una dirección web que comparta un enlace. Por eso, cambia a “Enlazan a mis perfiles” para usarlos.
¿Qué diferencia hay entre botones de compartir y de seguir?
Un botón de compartir publica tu página en la cuenta del lector. En cambio, un botón de seguir lleva al lector a tu perfil.
¿Qué tipo de código debo elegir?
Elige HTML + CSS para una web o un tema. Luego, elige HTML puro para constructores de páginas, Markdown o correos.
¿Por qué faltan los efectos al pasar el ratón en HTML puro?
Un efecto al pasar el ratón necesita una regla CSS, y los estilos en línea no pueden contenerla. Por eso, usa HTML + CSS si quieres el efecto.
¿Qué hace la suavidad?
Ajusta lo redondas que son las esquinas, como parte de la altura del botón. Así, cero da esquinas rectas y 50 da una curva completa.
¿Qué formas puedo elegir?
Cuadrada, redondeada, círculo, píldora, hoja y hexágono. Además, la píldora va mejor cuando los botones muestran el nombre de la red.
¿Puedo usar mis propios colores?
Sí. Desmarca “Usar el color de marca de cada red” y luego elige un color de fondo y un color de icono.
¿Qué significan los estilos?
Sólido rellena el botón, y degradado lo difumina. Contorno dibuja solo un borde, tinte suave usa un relleno pálido y solo icono quita el fondo.
¿Cómo pongo los botones uno al lado del otro?
Elige “Uno al lado del otro” en Diseño. Así se alinean en fila y pasan a otra línea en pantallas pequeñas.
¿Qué es la barra lateral flotante?
Fija los botones al borde izquierdo de la ventana, a media altura. Por eso siguen a la vista mientras el lector baja.
¿Los botones pueden compartir la página en la que están?
Sí. Marca la opción de dirección automática en HTML + CSS. Luego, un pequeño script rellena la dirección y el título de la página.
¿Cómo funciona el botón de copiar enlace?
Copia la dirección de la página al portapapeles. Como eso necesita un script, el código añade unas líneas para ello.
¿Dónde pego el código?
Pégalo una vez donde deban verse los botones, por ejemplo después de un artículo. En WordPress, usa un bloque HTML personalizado.
¿Puedo cambiar el nombre de la clase?
Sí. Escribe un nombre nuevo en “Nombre de clase CSS”, así los botones nunca chocan con los estilos que ya tienes.
¿Los iconos son SVG?
Sí. Cada icono es una sola ruta SVG en línea, por eso se ve nítido a cualquier tamaño y no necesita archivos de imagen.
¿Puedo usar los iconos SVG en otro sitio?
Sí, copia el SVG del código. Aun así, respeta las normas de marca de cada red cuando muestres su logo.
¿Qué tamaño deben tener los botones para compartir?
Entre 40 y 48 píxeles funciona bien en móviles y ordenadores. En cambio, los botones más pequeños cuestan de pulsar.
¿Los botones para compartir ayudan al SEO?
No de forma directa, porque compartir no es un factor de posicionamiento. Sin embargo, más veces compartido trae más visitas, y algunas pueden enlazarte.
¿Por qué los enlaces para compartir son nofollow?
Un enlace para compartir apunta a una herramienta, no a contenido que recomiendas. Por eso, nofollow es la opción honesta.
¿Los botones funcionan en el móvil?
Sí. En un móvil, WhatsApp, Viber, Messenger y SMS pueden abrir la app al momento.
¿Puedo usarlos en un correo HTML?
Sí, con el código HTML puro. Sin embargo, algunas apps de correo ocultan el SVG, así que prueba en las apps que usan tus lectores.
¿La herramienta guarda mis ajustes?
No. No se guarda nada al cerrar la pestaña. Por eso, copia o descarga el código antes de salir.
¿Puedo crear botones de seguir para mis perfiles?
Sí. Elige “Enlazan a mis perfiles”, marca tus redes y pega la dirección de cada perfil. Un botón sin dirección apunta a # hasta que añadas una.
Más herramientas para compartir y HTML
Algunas páginas que combinan bien con los botones para compartir.
- Generador de Open Graph
Escribe las etiquetas de la tarjeta que muestra un enlace.
- Editor HTML online
Pega el código de los botones y pruébalo en vivo.
- Minificador de HTML
Reduce el código antes de pegarlo.
- Generador de esquemas de color
Encuentra colores de botón que combinen con tu marca.
- Comprobador SEO
Revisa tu página, botones para compartir incluidos.
Crea ya tus botones para compartir
Marca tus redes, elige un estilo y copia el código. Además, la herramienta es gratis, y nada de lo que escribes sale de esta pestaña.