Una verdad simple sobre los sitios exitosos de WordPress: facilitar que los visitantes interactúen con tu contenido es clave para el crecimiento. Sin embargo, muchos propietarios de sitios pasan por alto algo tan simple como agregar un botón Me gusta de Facebook.
Si bien puede parecer una adición pequeña, en realidad es una de las herramientas más poderosas para expandir tu alcance. Más "me gusta" significan más visibilidad, lo que a menudo conduce a más tráfico y clientes potenciales.
¡Afortunadamente, agregar uno a tu sitio de WordPress es más fácil de lo que piensas! Hemos experimentado con diferentes métodos de integración de Facebook y hemos encontrado algunos que funcionan excepcionalmente bien.
En este tutorial, te mostraremos cómo agregar un botón Me gusta de Facebook en WordPress. Compartiremos los mejores enfoques que hemos probado, para que puedas comenzar a aprovechar la interacción social para hacer crecer tu sitio de WordPress. 📈
¿Por qué agregar un botón Me gusta de Facebook en WordPress?
Facebook es una de las plataformas de redes sociales más populares del mundo. Muchas empresas utilizan Facebook para conectarse con sus clientes y promocionar sus productos.
Agregar un botón Me gusta de Facebook a tu sitio web de WordPress puede ayudar a generar más interacción. También anima a las personas a compartir tu contenido en sus perfiles de Facebook y atraer nuevos usuarios a tu sitio.
Puedes usar el botón Me gusta de Facebook para aumentar tus seguidores sociales y construir una comunidad. Ayuda a crear conciencia sobre tus productos y servicios y aumenta las conversiones.
Con esto en mente, te mostraremos cómo agregar un botón Me gusta de Facebook a tu sitio web de WordPress. Aquí tienes una descripción general rápida de los métodos que cubriremos en esta guía:
- Método 1: Agregar un botón Me gusta de Facebook en WordPress usando un plugin
- Método 2: Agregar manualmente un botón Me gusta de Facebook en WordPress
- Consejo adicional: ¿Qué es el metadato Open Graph y cómo agregarlo a WordPress?
- Recursos adicionales: Más guías de redes sociales para sitios web de WordPress
¿Listo? Veamos cómo agregar un botón Me gusta de Facebook en WordPress usando un plugin o código personalizado.
Método 1: Agregar un botón Me gusta de Facebook en WordPress usando un plugin
En este método, usaremos un plugin de WordPress para agregar un botón Me gusta de Facebook. Este método es muy fácil y se recomienda para principiantes.
Lo primero que debes hacer es instalar y activar Me gusta y compartir de BestWebSoft. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, puedes ir a Me gusta y compartir » Configuración desde tu panel de administración de WordPress.
A continuación, deberás agregar un 'ID de aplicación' y un 'Secreto de aplicación' de Facebook. Si no tienes esta información, simplemente sigue los pasos a continuación.
Cómo crear un ID de aplicación y un secreto de aplicación de Facebook
En el panel de ‘Configuración’, haz clic en el enlace ‘Crear uno nuevo’ debajo del campo ‘ID de la aplicación’ o ‘Secreto de la aplicación’ en el plugin Like & Share.
Esto te llevará al sitio web de Meta for Developers. Te sugerimos abrir el sitio web en una nueva pestaña o ventana porque necesitarás abrir la página de configuración de Like & Share en tu área de administración de WordPress para ingresar el ID y el secreto de la aplicación.
Desde aquí, deberás seleccionar un tipo de aplicación. Haz clic en ‘Negocio’ como tipo de aplicación y luego en el botón ‘Siguiente’.
A continuación, deberás proporcionar información básica sobre tu aplicación.
Puedes ingresar un nombre de visualización para tu aplicación y asegúrate de que la dirección de correo electrónico correcta aparezca en el campo ‘Correo electrónico de contacto de la aplicación’. Facebook seleccionará automáticamente la dirección de correo electrónico de la cuenta en la que has iniciado sesión actualmente.
También hay una opción para elegir una cuenta de empresa. Puedes dejarlo en ‘No se ha seleccionado ninguna cuenta de Business Manager’ y hacer clic en el botón ‘Crear aplicación’.
Luego, aparecerá una ventana emergente. Aquí, Facebook te pedirá que vuelvas a introducir tu contraseña.
Esta es una medida de seguridad para prevenir actividades maliciosas en tu cuenta. Continúa e introduce la contraseña de tu cuenta de Facebook y haz clic en el botón ‘Enviar’.
Después de eso, verás el panel de tu aplicación.
Desde aquí, puedes dirigirte a Configuración » Básico en el menú de tu izquierda.
Ahora, querrás expandir el menú desplegable ‘Configuración’ y hacer clic en ‘Básico’.
Aquí, verás el ‘ID de la aplicación’ y el ‘Secreto de la aplicación’.
Ahora puedes introducir esta información en la configuración del plugin Like & Share.
Termina de personalizar tu botón de Me gusta de Facebook
Primero, querrás copiar el ‘ID de la aplicación’ y volver a la pestaña o ventana donde tienes abierta la página de Like & Share » Configuración. Luego, simplemente introduce el ‘ID de la aplicación’ en el campo correspondiente.
Ahora, querrás repetir el paso copiando los datos del ‘Secreto de la aplicación’ de la página de Meta for Developers y pegándolos en la configuración del plugin Like & Share.
Una vez que hayas hecho eso, puedes elegir si mostrar el botón de Me gusta de Facebook junto con la URL del perfil y los botones de Compartir.
También hay configuraciones para editar el tamaño del botón de Me gusta de Facebook, su posición antes o después del contenido, y la alineación.
Si has habilitado el botón de URL del perfil, entonces puedes desplazarte hacia abajo hasta la sección ‘Botón de URL del perfil’ e introducir tu nombre de usuario o ID de Facebook.
Cuando hayas terminado, no olvides guardar tus cambios.
Ahora, el plugin agregará automáticamente un botón Me gusta de Facebook a tu sitio web de WordPress y lo posicionará según tu configuración.
También puedes usar el código corto [fb_button] para agregar el botón Me gusta de Facebook en cualquier parte de tu sitio.
¡Eso es todo! Ahora puedes visitar tu sitio y ver el botón Me gusta en cada publicación.
Método 2: Agregar manualmente un botón Me gusta de Facebook en WordPress
Otra forma de agregar un botón Me gusta de Facebook es usando código personalizado. Sin embargo, este método requiere agregar código directamente a WordPress, por lo que lo recomendamos solo para aquellos que se sientan cómodos editando código.
En esta sección, vamos a usar el plugin WPCode, ya que facilita a cualquiera agregar código a su blog de WordPress.
Pero primero, deberás visitar la página ‘Botón Me gusta’ en el sitio web de Meta for Developers y desplazarte hacia abajo hasta la sección ‘Configurador del botón Me gusta’.
A continuación, ingresa la URL de tu página de Facebook en el campo ‘URL a dar Me gusta’. Esto conectará el botón Me gusta de Facebook a tu página.
Después de eso, simplemente usa la configuración para elegir el diseño y el tamaño del botón Me gusta. También obtendrás una vista previa del botón Me gusta.
Una vez que estés satisfecho con la vista previa, haz clic en el botón ‘Obtener código’. Esto abrirá una ventana emergente que muestra dos fragmentos de código en la pestaña ‘SDK de JavaScript’.
Ten en cuenta que agregar directamente estos fragmentos de código a tu tema de WordPress puede dañar tu sitio web. Además, se sobrescribirán cuando actualices el tema.
Por eso recomendamos usar el plugin WPCode. Este plugin te permite pegar fragmentos de código en tu sitio web y administrar fácilmente código personalizado sin editar los archivos de tu tema. Esto te ayuda a evitar el riesgo de romper tu sitio de WordPress.
Además, hemos confiado en WPCode en todos los sitios de nuestra marca para manejar las personalizaciones de manera fluida y eficiente. Para obtener más información sobre nuestra experiencia con él, puedes continuar y consultar nuestra reseña completa de WPCode.
Para empezar, necesitarás instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
📝 Nota: La versión gratuita de WPCode te permite agregar fragmentos de código personalizados, que es lo que usaremos aquí. Sin embargo, actualizar a WPCode Pro desbloquea funciones adicionales, como un historial de revisiones completo y la capacidad de programar tu código.
Una vez activado, puedes ir a Fragmentos de código » Encabezado y pie de página desde tu panel de WordPress.
Luego, deberás copiar el primer fragmento de código y agregarlo al archivo header.php de tu tema de WordPress justo después de la etiqueta <body>. Simplemente copia el código e ingrésalo en la sección 'Cuerpo'.
Después de completar este proceso, no olvides hacer 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 hacer esto, puedes ir a Fragmentos de código » + Agregar fragmento desde tu panel de administración de WordPress. O, simplemente haz clic en el botón ‘Agregar nuevo’ en el panel de WPCode.
En la siguiente pantalla, WPCode te permitirá seleccionar un fragmento de la biblioteca preconstruida o agregar un nuevo código personalizado.
Continúa y elige la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘Usar fragmento’.
Después de eso, puedes darle un nombre a tu código personalizado e ingresar el segundo fragmento de código 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’ como tipo de código.
Luego, puedes desplazarte hacia abajo hasta la sección ‘Inserción’ y seleccionar dónde te gustaría que apareciera el botón Me gusta de Facebook.
Por ejemplo, digamos que quieres que aparezca antes del contenido.
Simplemente haz clic en el menú desplegable ‘Ubicación’ y elige la opción ‘Insertar antes del contenido’ en ‘Página, Publicación, Tipos de publicación personalizados’.
Una vez que hayas terminado, puedes hacer clic en el botón ‘Guardar fragmento’.
También tendrás que hacer clic en el interruptor y cambiarlo de ‘Inactivo’ a ‘Activo’.
Eso es todo. Aparecerá un botón Me gusta de Facebook en tu sitio web después de que ingreses el código.
Consejo adicional: ¿Qué es el metadato Open Graph y cómo agregarlo a WordPress?
Open Graph son metadatos que ayudan a Facebook a recopilar información sobre una página o publicación en tu sitio de WordPress. Estos datos incluyen una imagen en miniatura, el título de la publicación/página, la descripción y el autor.
Facebook es bastante inteligente al extraer los campos de título y descripción. Sin embargo, si tu publicación tiene más de una imagen, a veces puede mostrar una miniatura incorrecta cuando se comparte.
Si ya estás utilizando el plugin All in One SEO (AIOSEO), entonces esto se puede solucionar fácilmente.
En WPBeginner, nosotros mismos usamos el plugin AIOSEO para administrar la configuración de OpenGraph para Facebook y X, entre otros esfuerzos de SEO. Somos grandes admiradores de él, y puedes ver nuestra extensa reseña de AIOSEO para más detalles.
Para hacer esto, primero puedes ir a All in One SEO » Redes sociales y cambiar a la pestaña de Facebook.
A continuación, haz clic en el botón ‘Subir o seleccionar imagen’ para establecer una ‘Imagen predeterminada de publicación de Facebook’ si tu artículo no tiene una imagen de Open Graph.
Además de eso, también puedes configurar una imagen de Open Graph para cada publicación o página individual.
Al editar una publicación, simplemente desplázate hacia abajo hasta la sección de Configuración de AIOSEO en el editor de contenido. Luego, puedes cambiar a la pestaña ‘Social’ y ver una vista previa de tu miniatura.
Ahora, querrás desplazarte hacia abajo hasta la opción ‘Fuente de imagen’. Luego, procede a elegir una imagen de Open Graph para tu publicación.
Por ejemplo, puedes seleccionar ‘Imagen adjunta’, ‘Primera imagen en el contenido’ o ‘Imagen personalizada’ para que se utilicen como miniatura de Open Graph.
Para más detalles y formas alternativas de agregar metadatos de Open Graph, no dudes en consultar nuestra guía sobre cómo agregar metadatos de Facebook Open Graph en WordPress.
Recursos adicionales: Más guías de redes sociales para sitios web de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar un botón de Me gusta de Facebook en WordPress. A continuación, también te pueden interesar nuestras guías sobre:
- Cómo mostrar reseñas de páginas de Facebook en WordPress
- Cómo incrustar álbumes de Facebook en WordPress
- Mejores Consejos y Tutoriales de Facebook para Usuarios de WordPress
- Cómo organizar un concurso en redes sociales para hacer crecer tu sitio
- Cómo usar las redes sociales para aumentar suscriptores de correo electrónico en WordPress
- Los mejores prompts de IA para blogueros, especialistas en marketing y redes sociales
- La hoja de trucos completa de redes sociales para WordPress
- Los mejores plugins de redes sociales para WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
kzain
Quería agregar un botón de Me gusta de Facebook a mi sitio de WordPress, y esta publicación lo hizo increíblemente fácil. Me encanta cómo has proporcionado varios métodos, incluido el simple código corto y el enfoque de plugin más avanzado. Tus instrucciones paso a paso y capturas de pantalla son muy claras, y aprecio los consejos adicionales sobre cómo personalizar la apariencia del botón. ¡Gracias por ayudarme a aumentar mi interacción social y conectar con mi audiencia!
Earl Jones
He agregado el wp-like-button a las páginas de mi blog y lo he configurado según las instrucciones. El contador de me gusta aumenta, así que sé que los lectores están haciendo clic en el botón, pero ¿dónde encuentro los nombres de estos lectores para poder hacerles un seguimiento?
Soporte de WPBeginner
En este momento, el plugin no rastrea esa información.
Administrador
Michel
Hi Wp Beginner
¡Solo quiero decir gracias por todos los excelentes artículos!
Ya me han ayudado mucho, fáciles de entender... ¡Me encanta!
Cheers guys, keep on doing like you do
Soporte de WPBeginner
You’re welcome, glad our articles have been helpful
Administrador
Macdonald
Hola a todos.
Estoy usando el tema Blog Bank de WordPress, que tiene botones de Facebook, Twitter, Google+ y LinkedIn muy bien integrados, pero no logro que funcionen como se espera (refiérase a mis sitios sociales respectivos). Me gustaría saber si hay alguna manera de hacerlo.
Gracias por el continuo gran trabajo que hacen por nosotros, los principiantes.
Soporte de WPBeginner
You would want to reach out to your theme’s support for this issue and they should be able to let you know if it is an error with the theme itself or a method to resolve the issue.
Administrador
stephen Mgbemena
Please admin, I’m using the header and footer plugin on my wordpress blog. I added the code on the footer and it’s showing the like button on the down end of my blog. Please how can I add it so it can show right after every single post. Thanks
Mary
The WordPress plugin worked perfect. Thanks for tutorial.
soshail akash
I am unable to make the plugin work on Archives
It works perfectly fine on Single Posts.
Your help would mean a lot
Jonathan
You said “You can leave the URL field empty, as we will dynamically fill in the URL in WordPress.”
I was expecting to article to then say what code to put in in order to dynamically fill the URL.
¿La URL se llena dinámicamente si dejamos el data-href en blanco, sin necesidad de más acciones?
Vipin
¿Cómo muestro los recuentos de "Me gusta" de Facebook en los metadatos de la publicación.
Así: Publicado por Admin en Tecnología el Fecha | 2 comentarios | 5 Me gusta
Sandeep kumar
El plugin Jetpack también ofrece el botón de 'me gusta'.
Ahmed
quiero cambiar el tamaño del botón para que sea más grande
Toon
Hasta ahora todo bien, esto funciona.
Pero, ¿cómo puedo deshacerme de esa ventana emergente tan pronto como presionas el botón?
Len Vanderlinde
He configurado un sitio web personal (sin fines de lucro) en lugar de un blog usando Wordpress. Estoy muy impresionado de haber podido hacerlo con mi conocimiento web muy limitado. Me gustaría agregar un botón de "Me gusta" de Facebook, pero ¿mis instrucciones no funcionan para mi página de inicio?
Gracias Len
suzannah
GRACIAS. Esto funcionó a la perfección. ¿Alguna idea de cómo hacer esto en una página en lugar de solo en una publicación? ¡¡¡Gracias!!! ¡Este es mi nuevo sitio favorito!
Patrick
Hola,
Este tutorial me suena a chino. Usas vocabulario que asume ciertos conocimientos que los principiantes no tienen.
"Primero abre tu archivo single.php en la carpeta de tu tema. Luego pega el siguiente código dentro de tu bucle de publicación:"
¿Qué significa eso?
Entiendo que mantienes tus publicaciones cortas, ¡pero muy a menudo son realmente demasiado cortas!
Gracias
mark
Hola,
pregunta, ¿cómo pongo en línea el 'me gusta' de FB con Google +1 y otros botones, más o menos como lo hiciste aquí?
Gracias,
Mark