Cómo crear botones para compartir en redes sociales con HTML, CSS y JS (Sin Plugins)

Crear botones para compartir en redes sociales es una de esas tareas que parecen simples… hasta que empiezas a depender de servicios externos como AddThis o ShareThis. En mi caso, después de usarlos en varios proyectos, siempre acababa con la misma sensación: demasiado peso, poco control y dependencia innecesaria de terceros.

La buena noticia es que no necesitas plugins, librerías ni scripts externos para añadir botones sociales a tu web. Con HTML, algo de CSS y un poco de JavaScript puedes crear botones rápidos, personalizados y optimizados, con un comportamiento idéntico al de las soluciones comerciales.

En este post, veremos como crear botones para compartir contenido mediante redes sociales e incorporarlos en nuestra web; cabe recordar que existen muchos servicios que ofrecen este tipo de soluciones como ShareThis que permite generar botones para compartir contenido que podemos incorporar a nuestra web con un simple copia y pega:

Sin embargo, al emplear soluciones existentes siempre nos vemos limitados de cierta manera, como la posibilidad de cambiar la interfaz a gusto, iconos personalizados, distribución y además que tenemos que depender directamente de un tercero (ya que los fuentes apuntan a otro servidor) y la carga de nuestro site puede verse afectada por lo comentado anteriormente entre otras cosas que a la final terminan odiando aunque cada cosa tiene sus ventajas y sus desventajas.

Por qué crear tus propios botones para compartir en redes sociales

Ventajas frente a AddThis, ShareThis y otros servicios externos

Aunque estas plataformas facilitan el trabajo, tienen inconvenientes claros:

• Cargan scripts externos desde otros servidores
• Añaden tracking innecesario
• Limitan la personalización visual
• Afectan al rendimiento y Core Web Vitals
• Dependencia total de un tercero

En más de un proyecto terminé eliminándolos porque no compensaban. Al final, un botón de compartir no deja de ser un enlace bien construido.

Control total: diseño, rendimiento y privacidad

Creando tus propios botones:

• Decides qué se carga y cuándo
• Usas HTML y CSS propios
• Personalizas iconos, tamaños y animaciones
• Evitas peticiones externas
• Mejoras la velocidad de carga

Y lo mejor: el código es sencillo y totalmente mantenible.

Cómo funcionan los botones para compartir en redes sociales

Las URL de compartición y los parámetros GET

Las redes sociales ofrecen URLs específicas para compartir contenido.

Al hacer clic en un botón, simplemente se envía una solicitud GET con parámetros como:

• URL a compartir
• Texto o título
• Hashtags (en algunos casos)

Ejemplo genérico:

<a href="https://redsocial.com/share?url=URL&text=TEXTO">

Por qué una simple etiqueta <a> es suficiente

No hay magia. No hay APIs complejas.

Una etiqueta <a> bien formada hace exactamente lo que necesitamos.

Formatos de URL para compartir en cada red social

Aquí es donde entra la magia del desarrollo personalizado o creados por nosotros mismos; como verás el desarrollo es muy sencillo y en esta entrada veremos las principales redes sociales para que su funcionamiento sea parecido al clásico AddThis (clic en un icono se abre una ventana emergente pop-up con el contenido a compartir por la red social correspondiente).

Formatos de las URL de redes sociales para compartir contenido

Prácticamente todas las redes sociales que se respeten ofrecen un formato que permite compartir enlaces mediante un título y la URL que la acompaña vía GET; por ejemplo:

Twitter/X

En Twitter/X empleamos el parámetro url y text para indicar el contenido que queremos compartir y aparezca la característica ventana para compartir como la mostrada anteriormente.

https://x.com/share?url=[URL]&text=[TITLE]"

Facebook

Facebook emplea un esquema similar, en este caso los parámetros se llaman u y title como mostramos a continuación:

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

Red de trabajo: LinkedIn

En LinkedIn es un poco más de lo mismo y los parámetros se llaman url y title:

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]

Pinterest

Aunque Pinterest no es una red social como tal, también es muy empleada y la usamos para subir imágenes con algo de contenido, el parámetro empleado es el de la url:

https://www.pinterest.com/pin/find/?url=[URL]

Compartir contenido en WhatsApp

https://api.whatsapp.com/send?text=TEXTO URL

Compartir enlaces en Pinterest

https://www.pinterest.com/pin/find/?url=URL

Creando botones sociales personalizados con HTML y CSS

Una vez explicado lo anterior, lo que nos resta es crear tantos los enlaces sociales con algún ícono representativos a estas red social de nuestra preferencia; el siguiente HTML y CSS hacen lo anterior comentado:

<style>
    :root {
        --fb-color: #1877F2;
        --x-color: #000000;
        --in-color: #0077B5;
        --wa-color: #25D366;
        --btn-size: 45px;
    }
    .share-wrapper {
        text-align: center;
        font-family: system-ui, -apple-system, sans-serif;
        margin: 2rem 0;
    }
    .share-container {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    .social-btn {
        width: var(--btn-size);
        height: var(--btn-size);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        color: white;
        text-decoration: none;
    }
    .social-btn svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }
    .social-btn:hover {
        transform: translateY(-5px);
        filter: brightness(1.1);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }
    /* Colores dinámicos */
    .btn-fb { background-color: var(--fb-color); }
    .btn-x  { background-color: var(--x-color); }
    .btn-in { background-color: var(--in-color); }
    .btn-wa { background-color: var(--wa-color); }
    h5 { color: #555; margin-bottom: 10px; }
</style>
<div class="share-wrapper">
    <h5>¡Comparte este contenido!</h5>
    <div class="share-container">
        <a href="#" class="social-btn btn-fb" data-platform="facebook" aria-label="Compartir en Facebook">
            <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </a>
        <a href="#" class="social-btn btn-x" data-platform="x" aria-label="Compartir en X">
            <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
        <a href="#" class="social-btn btn-in" data-platform="linkedin" aria-label="Compartir en LinkedIn">
            <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>
        </a>
        <a href="#" class="social-btn btn-wa" data-platform="whatsapp" aria-label="Compartir en WhatsApp">
            <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.653a11.883 11.883 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        </a>
    </div>
</div>

Obtenemos algunos botones sociales como los siguientes:

Ver ejemplo Descargar

Por supuesto, ahora con ventajas como la posibilidad de configurar todo lo que queramos como los iconos de las redes sociales, HTML, CSS, optimización, funcionamiento en general.

Por ejemplo, puedes elegir una configuración mas sencilla:

<style>
:root {
  --fb-color: #1877F2;
  --x-color: #000000;
  --in-color: #0077B5;
  --wa-color: #25D366;
  --btn-size: 45px;
}

.share-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.social-btn {
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.social-btn:hover {
  transform: translateY(-5px);
}

.btn-fb { background: var(--fb-color); }
.btn-x  { background: var(--x-color); }
.btn-in { background: var(--in-color); }
.btn-wa { background: var(--wa-color); }
</style>

<div class="share-wrapper">
  <h5>¡Comparte este contenido!</h5>
  <div class="share-container">
    <a href="#" class="social-btn btn-fb" data-platform="facebook" aria-label="Compartir en Facebook">FB</a>
    <a href="#" class="social-btn btn-x" data-platform="x" aria-label="Compartir en X">X</a>
    <a href="#" class="social-btn btn-in" data-platform="linkedin" aria-label="Compartir en LinkedIn">IN</a>
    <a href="#" class="social-btn btn-wa" data-platform="whatsapp" aria-label="Compartir en WhatsApp">WA</a>
  </div>
</div>

Uso de iconos SVG para mejorar rendimiento y diseño

Usar SVG inline en lugar de iconos externos:

• Reduce peticiones HTTP
• Mejora la calidad visual
• Permite cambiar colores por CSS

Es uno de esos detalles que marcan la diferencia en proyectos reales.

Cómo abrir un pop-up al compartir en redes sociales con JavaScript

Si queremos que habrá un pop-up para mostrar el dialog de la red social, podemos incorporar el siguiente JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    const shareButtons = document.querySelectorAll('.social-btn');
    const pageUrl = encodeURIComponent(window.location.href);
    const pageTitle = encodeURIComponent(document.title);
    shareButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            const platform = this.getAttribute('data-platform');
            let shareUrl = '';
            switch(platform) {
                case 'facebook':
                    shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
                    break;
                case 'x':
                    shareUrl = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
                    break;
                case 'linkedin':
                    shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`;
                    break;
                case 'whatsapp':
                    shareUrl = `https://api.whatsapp.com/send?text=${pageTitle}%20${pageUrl}`;
                    break;
            }
            // Abrir ventana emergente
            window.open(shareUrl, 'share-dialog', 'width=600,height=400');
        });
    });
});

Controlar el comportamiento del pop-up

• Tamaño configurable
• Sin recargar la página
• Experiencia limpia y conocida para el usuario

En la práctica, funciona igual que AddThis, pero sin dependencias externas.

Etiquetas Open Graph esenciales

Para que al compartir tu web aparezca una imagen bonita, un título y una descripción, no olvides añadir esto en el <head> de tu página:

<meta property="og:title" content="Título de tu gran artículo">
<meta property="og:description" content="Una descripción breve que invite a hacer clic.">
<meta property="og:image" content="https://tusitio.com/imagen-destacada.jpg">
<meta property="og:url" content="https://tusitio.com/pagina-actual">

Twitter Cards y compatibilidad entre plataformas

<meta name="twitter:card" content="summary_large_image">

Quedando todo nuestro experimento social de la siguiente manera:

Ver ejemplo Descargar

Errores comunes al compartir contenido

No definir imagen

• Usar imágenes demasiado pequeñas
• No probar con el debugger de cada red
• Cuando cuidas esto, el CTR al compartir mejora notablemente.

Buenas prácticas y recomendaciones finales

• Rendimiento web y carga de la página
  • Evita scripts externos
  • Usa SVG inline
  • Mantén el JS mínimo
• Compatibilidad móvil y experiencia de usuario
  • WhatsApp funciona mejor en móvil
  • Asegúrate de tamaños táctiles adecuados
• Cuándo tiene sentido usar una solución externa
• Solo lo recomiendo si:
  • Necesitas analítica avanzada integrada
  • No tienes control sobre el código
  • El rendimiento no es crítico
• En cualquier otro caso, código propio gana.

Preguntas frecuentes sobre botones para compartir en redes sociales

• ¿Se pueden crear botones solo con HTML?
  • Sí, aunque con JavaScript puedes mejorar la experiencia.
• ¿Afectan al SEO?
  • No negativamente. Al contrario, fomentan la difusión.
• ¿Funcionan en móviles?
  • Sí, especialmente WhatsApp y X.
• ¿Son mejores que AddThis?
  • En control, rendimiento y personalización: sin duda.

Conclusión

Crear tus propios botones para compartir en redes sociales con HTML es más fácil de lo que parece y ofrece ventajas claras frente a soluciones externas. En mi experiencia, una vez que pruebas este enfoque, no vuelves a depender de plugins.

Control, rendimiento y personalización total. Todo con unas cuantas líneas de código.