Crear botón de compartir en Facebook con HTML (sin plugins ni librerías)

Hoy toca un tema clásico pero siempre vigente: cómo crear un botón de compartir en Facebook con HTML puro, sin instalar plugins pesados, sin cargar el SDK de Facebook y sin depender de librerías externas.

Si tienes un blog en Blogger, WordPress o incluso una página HTML estática, este código te sirve. Y lo mejor: pesa menos de 1 KB.

En este post te explico tres versiones: una básica, una con contador (opcional) y una personalizada con tu propio diseño.

🧠 ¿Por qué usar un botón de compartir en Facebook?

Antes de tirar código, entiende el por qué:

• Aumenta el alcance orgánico: cada compartir es una puerta a nuevos lectores.

• Sin SDK de Facebook: no cargas el sdk.js de Meta (que pesa ~200 KB y rastrea al usuario).

• Control total: puedes diseñarlo como quieras, sin depender de un plugin.

• Compatible con cualquier plataforma: Blogger, WordPress, HTML plano.

• Sin cookies de terceros: a diferencia del SDK oficial, esta versión no instala cookies de Facebook.

URL oficial del sharer de Facebook:

https://www.facebook.com/sharer/sharer.php?u=URL_A_COMPARTIR

🔗 Versión 1: Botón básico (la más simple)

Este es el código mínimo. Funciona en cualquier parte de tu HTML.

<a href="https://www.facebook.com/sharer/sharer.php?u=https://piensaparacrear.blogspot.com/"
   target="_blank"
   rel="noopener noreferrer"
   style="display:inline-block; background:#1877f2; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-family:Arial, sans-serif; font-size:14px; font-weight:bold;">
   Compartir en Facebook
</a>

🔍 ¿Qué hace cada parte?

Nota: Facebook ignora el parámetro u= si la URL no está codificada correctamente. Si tu URL tiene & o ?, debes codificarla con encodeURIComponent (más abajo te explico cómo).

🔄 Versión 2: Botón dinámico (comparte la URL actual)

Si quieres que el botón comparta la página donde está el usuario (no una URL fija), necesitas JavaScript.

<a href="#"
   id="fb-share-btn"
   rel="noopener noreferrer"
   style="display:inline-block; background:#1877f2; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-family:Arial, sans-serif; font-size:14px; font-weight:bold;">
   Compartir en Facebook
</a>

<script>
document.getElementById('fb-share-btn').addEventListener('click', function(e) {
    e.preventDefault();
    var url = encodeURIComponent(window.location.href);
    var shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + url;
    window.open(shareUrl, '_blank', 'width=600,height=500,noopener,noreferrer');
});
</script>

🔍 ¿Qué hace este código?

1. encodeURIComponent(window.location.href) → codifica la URL actual para que Facebook la interprete bien.

2. window.open(...) → abre el sharer en una ventana emergente de 600x500 px (más cómodo que una pestaña).

3. noopener,noreferrer → medidas de seguridad para la ventana emergente.

⚠️ Importante: Este botón no funciona en el feed RSS ni en correos electrónicos, porque depende de JavaScript. Para esos casos, usa la Versión 1 con URL fija.

🎨 Versión 3: Botón con icono SVG (más elegante)

Si quieres algo más visual, aquí tienes el botón con el icono oficial de Facebook en SVG (sin cargar imágenes externas).

<a href="https://www.facebook.com/sharer/sharer.php?u=https://piensaparacrear.blogspot.com/"
   target="_blank"
   rel="noopener noreferrer"
   style="display:inline-flex; align-items:center; gap:8px; background:#1877f2; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-family:Arial, sans-serif; font-size:14px; font-weight:bold;">
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
     <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/>
   </svg>
   Compartir en Facebook
</a>

🎨 Personalización rápida

• Color del botón: cambia #1877f2 por otro (pero este es el azul oficial de Facebook y da confianza).

• Tamaño del icono: ajusta width="18" height="18".

• Espaciado entre icono y texto: modifica gap:8px.

• Bordes redondeados: cambia border-radius:6px.

• Sombra: añade box-shadow: 0 2px 6px rgba(24,119,242,.3);.

📊 ¿Y el contador de compartidos?

Antes, Facebook ofrecía un endpoint para obtener el número de compartidos:

https://graph.facebook.com/?id=URL_DE_TU_PAGINA

⚠️ Este endpoint ya no funciona desde 2018. Facebook lo eliminó por la API de Graph y las restricciones de privacidad. Hoy en día, el único contador "oficial" es el de la propia página de Facebook (los shares aparecen en las estadísticas del post si está vinculado a una página).

Alternativa: puedes usar el botón de Twitter/X o WhatsApp que sí ofrecen contadores aproximados, o mostrar solo el botón sin contador.

Mi recomendación: olvídate del contador. Un botón limpio y funcional convierte mejor que uno que promete un número que ya no es real.

🧩 Cómo integrarlo en Blogger

1. Ve a Tema → Editar HTML.

2. Busca <data:post.body/> dentro del bucle de posts.

3. Justo después, añade el código de la versión 2 (dinámica).

4. Guarda los cambios.

Nota: En Blogger, window.location.href funciona perfectamente para obtener la URL del post actual.

🧩 Cómo integrarlo en WordPress

Opción A: En el editor de bloques

1. Añade un bloque "HTML personalizado".

2. Pega el código de la versión 2.

3. Publica o actualiza.

Opción B: En functions.php (para que aparezca en todos los posts)

function boton_compartir_facebook($content) {
    if ( is_single() ) {
        $boton = '<a href="#" id="fb-share-btn" rel="noopener noreferrer" style="display:inline-block; background:#1877f2; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-family:Arial, sans-serif; font-size:14px; font-weight:bold;">Compartir en Facebook</a>';
        $boton .= '<script>document.getElementById("fb-share-btn").addEventListener("click", function(e){e.preventDefault();var url=encodeURIComponent(window.location.href);var shareUrl="https://www.facebook.com/sharer/sharer.php?u="+url;window.open(shareUrl,"_blank","width=600,height=500,noopener,noreferrer");});</script>';
        $content .= $boton;
    }
    return $content;
}
add_filter('the_content', 'boton_compartir_facebook');

⚠️ Advertencia: Antes de tocar functions.php, haz un backup. Mejor aún: usa un plugin como Code Snippets para no romper tu sitio.

⚠️ Errores comunes y cómo evitarlos

1. La URL no se comparte correctamente

Causa: la URL tiene caracteres especiales (&, ?, =) sin codificar.
Solución: usa encodeURIComponent() en JavaScript, o codifica manualmente la URL con una herramienta online.

2. El botón no hace nada al hacer clic

Causa: el id del botón no coincide con el del script, o el script se ejecuta antes de que el botón exista en el DOM.
Solución: coloca el script después del botón, o envuélvelo en DOMContentLoaded.

3. Facebook muestra la imagen equivocada al compartir

Causa: el post no tiene metaetiquetas Open Graph correctas.
Solución: añade en el <head> de tu página:

<meta property="og:image" content="URL_DE_TU_IMAGEN" />
<meta property="og:title" content="Título del artículo" />
<meta property="og:description" content="Descripción del artículo" />

Si usas Blogger o WordPress, muchos temas ya las generan automáticamente.

4. El botón se ve mal en móvil

Causa: estilos no responsivos.
Solución: usa display:inline-flex; align-items:center; y evita anchos fijos. El botón se adaptará solo.

✅ Resumen: cuál versión usar

🎯 Conclusión: menos código, más resultados

Un botón de compartir en Facebook no necesita 200 KB de SDK ni un plugin de 5 MB. Con 5 líneas de HTML y 3 de JavaScript tienes lo mismo (o mejor) sin cargar rastreadores de terceros.

Además, esta versión:

• Mejora el rendimiento de tu sitio (PageSpeed lo agradece).

• Respeta la privacidad del usuario (no cookies de Facebook).

• Funciona en cualquier plataforma (Blogger, WordPress, HTML plano).

• Se personaliza en segundos.

💬 ¿Necesitas ayuda para integrar botones sociales en tu blog o tienda sin sacrificar velocidad?
En Piensa para Crear ofrecemos servicios de personalización de temas, optimización de velocidad e integración de funciones sociales.
Contáctanos aquí y hablemos.

❓ Preguntas frecuentes

¿El botón de compartir funciona sin JavaScript?
Sí, la Versión 1 funciona sin JS. La Versión 2 (dinámica) requiere JS porque obtiene la URL actual.

¿Facebook me cobra por usar el sharer?
No. El endpoint sharer.php es público y gratuito.

¿Por qué el contador de compartidos ya no funciona?
Porque Facebook eliminó el endpoint público de conteo en 2018 por restricciones de privacidad.

¿Puedo usar este botón en el feed RSS?
Sí, pero solo la Versión 1 con URL fija. La Versión 2 no funciona en RSS.

¿Cómo sé si el botón está funcionando?
Haz clic, se abre una ventana emergente con la vista previa del post y el botón "Publicar en Facebook". Si lo publicas, aparece en tu muro.

¿Necesito el SDK de Facebook?
No. De hecho, es mejor no usarlo por rendimiento y privacidad.

📚 Recursos relacionados

• Documentación oficial del Sharing de Facebook

• Guía de Open Graph para que el post se vea bien al compartir

• Herramienta de depuración de Open Graph (Facebook)

• Buenas prácticas de window.open y noopener