Añadí un botón de "Me gusta" de Facebook a mi sitio el año pasado porque quería una forma rápida de aumentar la interacción. Pedir a la gente que comentara o compartiera me parecía demasiado. Un simple botón de "Me gusta" era más fácil.
Al principio, probé un plugin gratuito, pero rompió mi diseño. Luego jugué con el código de inserción de Facebook. Funcionó, pero solo después de muchos intentos y errores.
Finalmente, usé SeedProd. Tardé menos de cinco minutos y no tuve que tocar ningún código.
En esta guía, te mostraré ambos métodos para que puedas elegir el que mejor se adapte a tu configuración.
RESUMEN: Cómo añadir un botón "Me gusta" de Facebook
- Usar SeedProd: Arrastra y suelta un botón "Me gusta" de Facebook en cualquier lugar de tu sitio sin necesidad de código.
- Método manual: Inserta el botón "Me gusta" usando el código de las herramientas para desarrolladores de Facebook.
- Ambos métodos facilitan que los visitantes den "Me gusta" a tu contenido y hagan crecer tu página de Facebook.
¿Por qué añadir un botón "Me gusta" de Facebook a WordPress?
Añadir un botón "Me gusta" a tu sitio de WordPress puede ayudar a impulsar la interacción en tu página de Facebook. También es una excelente manera de animar a los usuarios a compartir tu contenido en sus noticias de Facebook, lo que ayuda a atraer a gente nueva a tu sitio web.
Además, insertar un botón "Me gusta" de Facebook en tu página web puede ayudar a aumentar tus seguidores en redes sociales y a construir tu comunidad en línea en la red social más popular. Como resultado, puedes aumentar la notoriedad de tus productos o servicios y, en última instancia, incrementar las conversiones.
Actualmente, WordPress no tiene una solución integrada para añadir un botón "Me gusta" de Facebook, por lo que necesitarás instalar un plugin de WordPress o añadir manualmente el código del botón "Me gusta" de Facebook. Teniendo esto en cuenta, te mostraremos cómo hacer ambas cosas a continuación.
Cómo añadir un botón "Me gusta" de Facebook en WordPress usando SeedProd
🔹 Esta es la forma más fácil de añadir un botón "Me gusta" de Facebook a tu sitio de WordPress. Usarás el constructor de arrastrar y soltar de SeedProd para colocarlo en cualquier lugar, sin necesidad de código.
Primero, usaremos un plugin de WordPress para añadir un botón "Me gusta" de Facebook a tu sitio. Usaremos SeedProd, el mejor plugin constructor de sitios y páginas de WordPress.
SeedProd hace que sea muy fácil crear diseños de página flexibles en WordPress, incluyendo páginas de destino personalizadas, páginas de inicio, barras laterales, encabezados, pies de página y más. Viene con un constructor de arrastrar y soltar y numerosos bloques de WordPress para personalizar tu sitio fácilmente sin código ni CSS.
Además de permitirte crear páginas de destino completamente personalizadas, SeedProd te permite crear temas completos de WordPress desde cero, y no necesitarás tocar ningún archivo de tema de WordPress.
Para este método, te mostraremos cómo usar el widget de bloque "Me gusta" de Facebook de SeedProd para mostrar un botón "Me gusta" prácticamente en cualquier lugar de tu sitio de WordPress.
Instalar y activar SeedProd
Para empezar, instala y activa el plugin SeedProd en tu sitio web de WordPress.
Si necesitas ayuda con esto, puedes consultar nuestra documentación sobre cómo instalar SeedProd. Esta guía te guiará a través de la instalación del plugin y la activación de tu clave de licencia.
Nota: SeedProd tiene una versión gratuita que te permite crear una página de destino simple sin código. Para esta guía, usaremos SeedProd Pro por sus bloques Pro de WordPress.
A continuación, deberás determinar cómo usar SeedProd en tu sitio web. Puedes usarlo para crear páginas individuales de WordPress o crear un tema de WordPress completamente nuevo para reemplazar el diseño actual de tu sitio web.
Para esta guía, te mostraremos cómo agregar un botón "Me gusta" de Facebook a una página de destino, así que navega a SeedProd » Páginas de destino desde tu panel de WordPress para comenzar.
Elige una plantilla prefabricada
En esta página, puedes elegir uno de los diseños de página de destino prefabricados de SeedProd, como Próximamente, Mantenimiento, Inicio de sesión o 404.
Alternativamente, puedes crear una página de destino personalizada utilizando una plantilla de página de destino que puedes personalizar para adaptarla a tus necesidades. Usaremos esta opción, así que haz clic en el botón Agregar nueva página de destino .
En la siguiente pantalla, verás una biblioteca de plantillas de página de destino profesionales que puedes personalizar con el constructor de arrastrar y soltar de SeedProd. Haz clic en cualquiera de las pestañas en la parte superior para filtrar los diseños por tipo de página, incluyendo:
- Próximamente
- Modo de Mantenimiento
- Página 404
- Ventas
- Seminario web
- Captación de Leads
- Gracias
- Iniciar sesión
Una vez que encuentres un diseño que te guste, pasa el ratón sobre él y haz clic en el icono de la marca de verificación. Para esta guía, usaremos la plantilla "Tasty Squeeze Page".
A continuación, verás una ventana emergente donde puedes darle un nombre a tu página. SeedProd le dará una URL a la página automáticamente, pero puedes cambiarla más tarde si lo deseas.
Cuando estés satisfecho con los detalles, haz clic en el botón Guardar y empezar a editar la página .
Agrega el bloque "Me gusta" de Facebook
Después de elegir una plantilla, irás al editor visual de SeedProd, donde puedes comenzar a personalizar el diseño de tu página de destino. Es fácil de usar, con bloques y secciones a la izquierda y una vista previa en vivo a la derecha.
Simplemente haz clic en cualquier elemento de tu vista previa para personalizar el contenido según tus necesidades.
Por ejemplo, puedes hacer clic en cualquier bloque de texto o encabezado para cambiar el encabezado y las descripciones.
Cuando lo hagas, se abrirá un panel de configuración a la izquierda para que cambies el contenido, el tamaño de fuente, la alineación y más.
También puedes reemplazar las imágenes de la plantilla y poner las tuyas. Para hacer esto, haz clic en cualquier imagen y luego selecciona el icono de la papelera en el panel de configuración para eliminarla.
Desde allí, puedes cargar una nueva imagen desde tu computadora o la biblioteca de medios de WordPress.
Ahora que conoces los conceptos básicos para navegar por el constructor de páginas, veamos cómo agregar un botón "Me gusta" de Facebook a tu página de destino.
SeedProd tiene numerosos bloques de WordPress que puedes añadir al diseño de tu página de destino. No solo hacen que tu página sea más atractiva, sino que también son geniales para generar leads y seguidores en redes sociales.
Por ejemplo, con los bloques de Facebook de SeedProd, puedes incrustar tu página de Facebook, publicaciones individuales, comentarios e incluso un botón de Me gusta.
Para añadir el bloque del botón Me gusta de Facebook a tu página, simplemente arrástralo desde el panel de Bloques Avanzados a tu página de destino.
Desde allí, puedes cambiar el diseño y la apariencia del botón Me gusta usando los menús desplegables en el panel de configuración del bloque. Por ejemplo, puedes cambiar la disposición del botón para mostrar el recuento de tus botones, un cuadro de Me gusta y más.
También puedes cambiar el tamaño de la fuente y activar la opción para mostrar un botón de Compartir de Facebook junto a él.
Además, hay opciones para dirigir a una URL personalizada en lugar de tu página de destino actual y cambiar el formato del permalink a un enlace bonito.
En la pestaña de configuración Avanzada, puedes personalizar el espaciado y la visibilidad del botón Me gusta en dispositivos móviles y de escritorio y animarlo sin escribir código.
Nota: Puedes introducir tu ID de aplicación de Facebook en SeedProd yendo a SeedProd » Ajustes.
Continúa personalizando el diseño de tu página de destino hasta que estés satisfecho con cómo se ve todo. Por ejemplo, puedes editar el esquema de colores y la tipografía de la página en el panel de Ajustes Globales.
No olvides hacer clic en el botón Guardar en la esquina superior derecha para guardar tus cambios.
Configurar los ajustes de tu página
Dado que la página que estamos creando incluye un formulario de suscripción, necesitaremos conectar un servicio de marketing por correo electrónico a continuación. Para hacerlo, haz clic en la pestaña Conectar en la parte superior y busca tu proveedor de marketing por correo electrónico en la lista.
Desde allí, sigue las instrucciones en pantalla para conectar tu lista de correo electrónico.
También puedes hacer clic en la pestaña Ajustes de página en la parte superior para ajustar la configuración de tu página de destino. En esta pantalla, puedes cambiar el nombre y la URL de tu página de destino y configurar tus ajustes de SEO en la página para los motores de búsqueda.
Por ejemplo, en la sección de ajustes de SEO, puedes usar All in One SEO, el mejor plugin de SEO para WordPress, para configurar los ajustes de Open Graph para tu página.
Estos metadatos ayudan a Facebook a recopilar información sobre tu página, incluida la imagen en miniatura, el título de la página, la descripción y el autor.
Además, los Ajustes de página también te permiten añadir scripts personalizados, como tu píxel de Facebook o el código de seguimiento de Google Analytics.
Para más detalles, consulta nuestra documentación de ajustes de página de destino.
Publicar tus cambios
Una vez que tu página tenga exactamente el aspecto que deseas, estarás listo para publicarla en tu sitio de WordPress. Para hacerlo, haz clic en la flecha desplegable del botón Guardar y selecciona Publicar.
Ahora puedes visitar tu página de destino y ver tu botón Me gusta de Facebook en acción.
Cómo añadir un botón «Me gusta» de Facebook manualmente con código
🔹 Si prefieres no usar un plugin, este método te muestra cómo copiar y pegar el código del botón «Me gusta» de Facebook directamente en WordPress. Requiere unos pasos adicionales, pero funciona en cualquier sitio.
Otra forma de añadir un botón «Me gusta» de Facebook a tu sitio de WordPress es usando código personalizado. Sin embargo, este método requiere que copies y pegues código HTML directamente en WordPress, por lo que solo lo recomendamos para personas que se sientan cómodas editando código.
Dicho esto, usaremos el plugin WPCode para facilitar la adición de código personalizado a WordPress.
Primero, deberás ir a la página «Botón «Me gusta»» en el sitio web de Meta for Developers (developers.facebook.com) y desplazarte hacia abajo hasta la sección «Configurador del botón «Me gusta»».
A continuación, introduce la URL de tu página de Facebook en el campo «URL a indicar». Esta debe ser la página que deseas conectar con el botón «Me gusta» de Facebook.
Después, simplemente ajusta la configuración para elegir el diseño y el tamaño del botón «Me gusta». También verás una vista previa del botón «Me gusta».
Cuando estés satisfecho con la vista previa, haz clic en el botón Obtener código.
Ahora verás una ventana emergente con 2 fragmentos de código y 2 pestañas diferentes llamadas SDK de JavaScript e iFrame. Haz clic en la opción JavaScript.
Esto es lo que necesitarás añadir a tu sitio web de WordPress para mostrar el botón «Me gusta».
Si añades directamente estos fragmentos de código a tu tema de WordPress, existe la posibilidad de que rompas tu sitio web. Además, cuando actualices tu tema, podría sobrescribir los fragmentos de código.
Una forma más fácil de añadir este código es con el plugin WPCode. Te permite pegar fragmentos de código en tu sitio web y gestionarlos sin editar directamente los archivos de tu tema.
Primero, deberás instalar y activar el plugin WPCode.
Después de activar el plugin, navega a Fragmentos de código » Encabezado y pie de página desde tu panel de WordPress.
Ahora, copia el primer fragmento de código de Facebook y añádelo al archivo header.php de tu tema de WordPress después de la etiqueta <body>.
Simplemente copia el código e introdúcelo en la sección «Cuerpo» y haz clic en el botón Guardar cambios.
A continuación, deberás copiar el segundo fragmento de código y pegarlo en tu sitio de WordPress para mostrar el botón «Me gusta» de Facebook.
Para ello, navega a Fragmentos de código » + Añadir fragmento desde tu administrador de WordPress o haz clic en el botón Añadir nuevo.
En la siguiente pantalla, puedes elegir un fragmento de la biblioteca preconstruida o añadir un nuevo código personalizado.
Así que haz clic en la opción «Añadir tu código personalizado (Nuevo fragmento)» y selecciona el botón Usar fragmento.
A partir de ahí, ponle un nombre a tu código personalizado e introduce el segundo fragmento de código de Facebook en la sección «Vista previa del código».
Asegúrate de hacer clic en el menú desplegable «Tipo de código» y seleccionar «Fragmento de HTML».
A continuación, desplázate hacia abajo hasta la sección ‘Inserción’ y elige dónde mostrar el botón Me gusta de Facebook. Por ejemplo, haz que aparezca antes del contenido de tus entradas de blog.
Para ello, haz clic en el menú desplegable ‘Ubicación’ y elige la opción Insertar antes del contenido en la sección Específico de la página.
Por último, haz clic en el botón Guardar fragmento y cambia el conmutador de Inactivo a Activo.
Ahora puedes visitar cualquier entrada de blog para ver tu botón Me gusta de Facebook antes del contenido de la entrada.
Preguntas frecuentes sobre cómo añadir un botón Me gusta de Facebook
Esperamos que este artículo te haya ayudado a aprender cómo añadir un botón Me gusta de Facebook a tu sitio. También te puede interesar este tutorial sobre cómo incrustar eventos de Facebook en WordPress.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
