Si buscas cómo poner botón de Facebook en HTML, probablemente ya sabes que hay más de una forma de hacerlo y no tienes claro cuál encaja con tu web. No es lo mismo un botón que lleva a tu página de Facebook que uno que permite compartir contenido, ni tampoco los requisitos técnicos son iguales. Esta guía cubre las tres opciones reales, con el código exacto para cada una, los errores que arruinan la implementación y cómo medir los clics en Google Analytics 4 para saber si el botón funciona de verdad.
El error más común es copiar código sin saber qué hace. Facebook ofrece distintos tipos de botones y cada uno responde a un objetivo diferente. Mezclarlos o elegir el incorrecto no rompe tu web, pero sí hace que el botón no sirva para nada.
Estos son los tres tipos que realmente se usan:
La recomendación actual es no usar el botón de Me gusta integrado en web a menos que tengas una razón muy concreta: genera fricciones con normativa de cookies y privacidad, y Meta ha reducido su visibilidad. Para la mayoría de webs, el botón de enlace o el de compartir cumplen mejor el objetivo.
Imagina una tienda online de ropa artesanal: si quieres que tus clientes sigan tu página de Facebook, usa el botón de enlace. Si quieres que compartan un producto concreto con sus contactos, usa el botón de compartir. Son dos herramientas distintas para dos momentos distintos del recorrido del usuario.
Esta es la opción más limpia, más rápida y la que menos problemas de rendimiento genera. No necesitas cargar ningún script externo: solo HTML y, opcionalmente, un icono SVG o de Font Awesome.
El mínimo viable es un elemento <a> con la URL de tu página de Facebook:
La estructura en HTML es la siguiente:
<a href='https://www.facebook.com/tunombredepagina' target='_blank' rel='noopener noreferrer'>
Síguenos en Facebook
</a>El atributo target='_blank' abre el enlace en una pestaña nueva, que es el comportamiento esperado en botones de redes sociales. El atributo rel='noopener noreferrer' es obligatorio por seguridad cuando usas target='_blank': evita que la página de destino pueda acceder al objeto window de tu web.
Usar un icono SVG incrustado en el HTML evita la dependencia de librerías externas como Font Awesome. Puedes obtener el SVG oficial del icono de Facebook desde la página de recursos de marca de Meta. Una vez que lo tienes, el código queda así:
<a href='https://www.facebook.com/tunombredepagina' target='_blank' rel='noopener noreferrer' style='display:inline-flex;align-items:center;gap:8px;background:#1877F2;color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;font-family:sans-serif;font-size:14px;'>
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'>
<path d='M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.267h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z'/>
</svg>
Síguenos en Facebook
</a>El color #1877F2 es el azul corporativo actual de Facebook según las directrices de marca de Meta. Sustitúyelo solo si tienes una razón de diseño clara, porque los usuarios reconocen el botón más rápido cuando usa los colores de la plataforma.
Poner href='https://www.facebook.com' lleva al usuario a la portada de Facebook, no a tu página. Revisa que la URL incluye el nombre de tu página o su identificador. Para comprobarlo, abre tu página de Facebook, copia la URL de la barra del navegador y pégala directamente en el atributo href.
El Share Button permite que un usuario comparta cualquier URL en su muro de Facebook con un clic. Hay dos formas de implementarlo: mediante el SDK de Meta o mediante una URL de intención. La segunda no requiere JavaScript y funciona igual de bien para la mayoría de los casos.
La URL de intención tiene esta estructura:
https://www.facebook.com/sharer/sharer.php?u=TU_URL_CODIFICADASustituyendo TU_URL_CODIFICADA por la URL que quieres que se comparta, con sus caracteres especiales codificados. Por ejemplo, para compartir https://tudominio.com/articulo:
<a href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftudominio.com%2Farticulo' target='_blank' rel='noopener noreferrer' style='display:inline-flex;align-items:center;gap:8px;background:#1877F2;color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;font-family:sans-serif;font-size:14px;'>
Compartir en Facebook
</a>Para codificar la URL puedes usar la función encodeURIComponent() de JavaScript si generas el botón dinámicamente, o herramientas online de codificación de URL si lo haces a mano.
Qué controla el contenido del diálogo de compartir: Facebook toma el título, la descripción y la imagen de las etiquetas Open Graph de tu página. Si no las tienes configuradas, Facebook elige el contenido por su cuenta, con resultados impredecibles. Revisa que tu web tiene al menos og:title, og:description y og:image en el <head> de cada página que quieres que se comparta.
Un botón de compartir sin etiquetas Open Graph correctas es como un escaparate sin producto: el mecanismo funciona, pero lo que el usuario ve no invita a nada.
Imagina una revista de viajes que tiene artículos con fotos espectaculares pero sin etiqueta og:image: cuando alguien comparte el artículo en Facebook, el diálogo aparece sin imagen o con una miniatura aleatoria de la web. El resultado es que la publicación recibe muchos menos clics. Añadir la etiqueta correcta en cada artículo resuelve el problema sin tocar el botón.
Los botones de Facebook, especialmente los que usan el SDK de Meta, pueden afectar al rendimiento de carga de tu página. El SDK añade peso al tiempo de carga inicial y puede impactar en métricas como LCP (Largest Contentful Paint) si se carga de forma bloqueante.
Si necesitas usar el SDK porque quieres el botón de Me gusta o funcionalidades avanzadas del botón de compartir, cárgalo de forma asíncrona. Meta documenta la forma correcta de hacerlo en su portal de desarrolladores. La clave está en el atributo async y en inicializar el SDK solo cuando el documento está listo, no en el <head> bloqueante.
Para webs en WordPress, los plugins de rendimiento como WP Rocket o Perfmatters permiten diferir scripts de terceros con un par de clics. Comprueba en PageSpeed Insights antes y después de la implementación para verificar que el botón no penaliza el LCP ni el INP (Interaction to Next Paint).
En móvil, el diálogo de compartir de Facebook se comporta de forma distinta según el dispositivo. Si el usuario tiene la app de Facebook instalada, el sistema operativo puede abrir la app directamente en lugar del navegador. Esto es positivo para la experiencia, pero debes asegurarte de que la URL que pasas al parámetro u= sea accesible y esté correctamente indexada.
Para comprobar cómo verá Facebook tu página antes de que nadie la comparta, usa la herramienta Sharing Debugger del panel de desarrolladores de Meta. Introduce la URL y verás exactamente qué título, descripción e imagen mostrará el diálogo. Si los datos son incorrectos, el Sharing Debugger también tiene un botón para limpiar la caché de Facebook sobre esa URL.
Poner el botón es la parte fácil. Saber si alguien lo usa es lo que te permite decidir si vale la pena mantenerlo, moverlo o eliminarlo. Google Analytics 4 puede registrar cada clic en tu botón de Facebook como un evento, y no necesitas un desarrollador para configurarlo si usas Google Tag Manager.
El procedimiento concreto es el siguiente:
facebook.com (o la URL exacta de tu página si quieres mayor precisión).clic_boton_facebook. Añade como parámetros event_category con valor redes_sociales y event_label con la variable integrada URL del clic.Una vez publicado, los clics aparecerán en GA4 bajo Informes > Interacción > Eventos con el nombre que hayas definido. Deja pasar al menos 48 horas antes de sacar conclusiones sobre volumen.
El número de clics en bruto no es suficiente. Lo que importa es la tasa de clic del botón: cuántos usuarios que ven la página acaban haciendo clic. Para calcularlo, divide los eventos clic_boton_facebook entre las sesiones de esa página en el mismo período.
Si la tasa es muy baja en páginas donde esperarías que los usuarios compartan (artículos de blog, páginas de producto con reseñas), el problema suele ser de posición o de visibilidad del botón, no de intención del usuario. Prueba a moverlo más arriba en la página o a aumentar su tamaño en móvil. Si la tasa sigue baja tras el cambio, puede que ese contenido simplemente no genere interés de compartir, y es mejor no forzarlo.
Una pregunta habitual es cómo mostrar varios botones sociales juntos, alineados y sin que se desordenen en móvil. La respuesta está en flexbox, el sistema de maquetación CSS que permite alinear elementos en fila o columna con control total sobre el espaciado.
La estructura base para un grupo de botones es:
<div style='display:flex;flex-wrap:wrap;gap:12px;align-items:center;'>
<a href='https://www.facebook.com/tunombredepagina' target='_blank' rel='noopener noreferrer' style='display:inline-flex;align-items:center;gap:8px;background:#1877F2;color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;font-family:sans-serif;font-size:14px;'>
Facebook
</a>
<a href='https://www.instagram.com/tunombredeperfil' target='_blank' rel='noopener noreferrer' style='display:inline-flex;align-items:center;gap:8px;background:#E1306C;color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;font-family:sans-serif;font-size:14px;'>
Instagram
</a>
</div>La propiedad flex-wrap:wrap es la que evita que los botones se salgan del contenedor en pantallas pequeñas: cuando no caben en una sola fila, pasan automáticamente a la siguiente. Sin ella, los botones se comprimen o se desbordan del contenedor en móvil.
El atributo gap:12px controla el espacio entre botones tanto en horizontal como en vertical cuando hacen wrap. Ajústalo según tu diseño: valores entre 8 y 16 píxeles funcionan bien en la mayoría de casos.
Si trabajas con un CMS como WordPress y usas el editor de bloques, puedes conseguir el mismo resultado con el bloque Grupo configurado en disposición flex, sin tocar código. El código manual es útil cuando editas plantillas, archivos de tema o páginas construidas con HTML puro.
El siguiente paso concreto: abre tu página en el inspector del navegador (clic derecho > Inspeccionar), localiza dónde quieres colocar el botón en el árbol HTML y pega el código del bloque div con flexbox en ese punto. Guarda, recarga y comprueba tanto en escritorio como en móvil antes de publicar.
No. Para un botón de enlace a tu página o un botón de compartir, el SDK no es necesario. Con un enlace HTML estándar y la URL de intención de Facebook tienes suficiente. El SDK solo es necesario si quieres el botón de Me gusta integrado o funcionalidades avanzadas que Meta gestiona desde su plataforma de desarrolladores.
Depende de cómo lo implementes. Un enlace HTML simple no afecta al rendimiento. El SDK de Meta sí puede impactar en métricas como LCP o INP si se carga de forma bloqueante. La solución es cargarlo de forma asíncrona o diferirlo con un plugin de rendimiento y verificar el resultado en PageSpeed Insights.
Facebook toma la imagen del diálogo de compartir de la etiqueta Open Graph og:image de tu página. Si no existe o apunta a una imagen incorrecta, Facebook elige por su cuenta. Revisa y corrige las etiquetas og:image, og:title y og:description, y usa el Sharing Debugger de Meta para limpiar la caché y ver el resultado actualizado.
Sí. El código para un botón de enlace o de compartir es un bloque pequeño de HTML que puedes copiar, ajustar la URL y pegar en tu web. En WordPress puedes hacerlo con un bloque HTML personalizado sin instalar ningún plugin. Solo necesitas identificar dónde quieres que aparezca el botón en tu página.
Configurando un evento en GA4 a través de Google Tag Manager que registre cada clic en el botón. Sin ese seguimiento, no tienes datos para decidir si el botón está bien posicionado, si el diseño invita a usarlo o si directamente no genera interés en ese tipo de página.
Puede tenerlos. El botón de Me gusta carga recursos de los servidores de Meta en cuanto el usuario carga tu página, lo que implica transferencia de datos a terceros. Según el RGPD, debes informar de ello en tu política de privacidad y, en muchos casos, obtener consentimiento previo. Es un punto que conviene revisar con tu responsable legal antes de implementarlo.
El problema más habitual es no usar flex-wrap:wrap en el contenedor de botones. Sin esta propiedad, los botones se comprimen o se salen del contenedor en pantallas pequeñas. Añade esa propiedad al div que agrupa los botones y comprueba el resultado en el inspector del navegador simulando diferentes tamaños de pantalla.