Cómo agregar un cuadro de Me gusta / Fan Box de Facebook en WordPress

Te has esforzado mucho para aumentar tus seguidores en Facebook, pero los visitantes de tu sitio web no se conectan con tu página. Frustrante, ¿verdad?

Hemos probado varias formas de integrar Facebook con WordPress y hemos descubierto que un simple cuadro de Me gusta puede marcar una gran diferencia en el crecimiento de tus seguidores sociales.

Un cuadro de Me gusta de Facebook bien ubicado une tu sitio web y tus redes sociales, permitiendo a los visitantes interactuar con tu página de Facebook sin salir de tu sitio. Es una de esas pequeñas adiciones que pueden tener un gran impacto en tu prueba social.

En esta guía, te mostraremos dos métodos sencillos para agregar un cuadro de Me gusta de Facebook a tu sitio de WordPress: un enfoque con un plugin de cuadro de Me gusta de Facebook y una solución de código.

¿Por qué agregar un cuadro de Me gusta de Facebook en tu sitio web de WordPress?

Agregar un cuadro de Me gusta de Facebook a tu sitio web de WordPress tiene algunas ventajas geniales.

Primero, ayuda a atraer personas al permitirles dar me gusta fácilmente a tu página de fans o página de negocios de Facebook. Esto significa que tus publicaciones aparecerán en su feed de Facebook, por lo que puedes seguir llegando a personas más allá de tu sitio web.

Además, el cuadro de Me gusta de la página de Facebook muestra cuántas personas han dado me gusta a tu página de Facebook. Esto puede funcionar como prueba social y animar a más visitantes a hacer clic en 'Me gusta'.

Este tutorial te mostrará dos formas de agregar un cuadro de Me gusta de Facebook: una usando un plugin social y la otra con código. Puedes usar los enlaces rápidos a continuación para navegar por nuestro artículo:

• Método 1: Usando un Plugin de Caja de Me Gusta de Facebook para WordPress (Fácil para principiantes)
• Method 2: Adding a Facebook Like Box With Code

Método 1: Usando un Plugin de Caja de Me Gusta de Facebook para WordPress (Fácil para principiantes)

Este primer método es la forma más fácil y recomendada para que los principiantes agreguen una Caja de Me Gusta de Facebook a sus sitios. También te permitirá mostrar tu feed de Facebook en tu sitio web si lo deseas.

Este método utiliza Smash Balloon, que es un plugin de WordPress fácil de usar que te permite incrustar varios feeds de redes sociales en WordPress, junto con una Caja de Me Gusta.

Para este tutorial, puedes usar la versión gratuita del plugin Smash Balloon Social Post feed. Pero si deseas más funciones además de la Caja de Me Gusta (como mostrar videos, fotos y eventos), te recomendamos actualizar a la versión Pro.

Configurar el Plugin Smash Balloon Facebook Feed

Primero, necesitas instalar el plugin de WordPress en el área de administración. Después de eso, ve a Facebook Feed » All Feeds y haz clic en ‘Add New.’

Ahora, selecciona el tipo de feed 'Timeline'.

Luego, simplemente haz clic en el botón ‘Siguiente’.

En esta etapa, necesitarás conectar tu página de Facebook a tu sitio web de WordPress.

Lo que necesitas hacer es hacer clic en el botón 'Add New'.

Smash Balloon te dirigirá a una nueva pantalla.

Aquí, simplemente selecciona 'Page' para el tipo de origen y luego haz clic en 'Connect to Facebook'.

Ahora, necesitas iniciar sesión en tu cuenta de Facebook.

Después de eso, elige qué página(s) para las que deseas mostrar el Like Box en tu blog de WordPress o sitio web. Luego, haz clic en 'Next'.

Ahora verás la configuración de permisos de Smash Balloon. Recomendamos habilitarlos todos para asegurarnos de que todo funcione bien.

Ahora, procede y haz clic en 'Done'.

El último popup simplemente confirmará que has vinculado exitosamente Smash Balloon con Facebook.

Simplemente haz clic en 'OK' para continuar.

Smash Balloon ahora te redirigirá al área de administración, donde deberás seleccionar una página de Facebook para usar en tu feed de línea de tiempo.

Simplemente elige una página y haz clic en 'Agregar'.

Ahora verás la página de Facebook que acabas de conectar como una fuente en la página del plugin Smash Balloon.

Simplemente selecciona esa y haz clic en 'Siguiente'.

Personaliza el cuadro de 'Me gusta' de Facebook

En esta etapa, Smash Balloon te llevará al editor de feeds de Facebook.

El primer paso es hacer clic en 'Diseño del feed' encima de la opción Esquema de color.

Simplemente desplázate hacia abajo hasta la sección 'Número de publicaciones'.

Después de eso, establece el número tanto para Escritorio como para Móvil en 0. Esto eliminará la visualización de tus publicaciones recientes y hará que el feed muestre solo el cuadro de 'Me gusta'.

Alternativamente, si también deseas mostrar tu feed de Facebook junto con el cuadro de 'Me gusta', puedes seguir nuestro tutorial sobre cómo crear un feed personalizado de Facebook en WordPress.

Ahora, regresa.

Luego, haz clic en 'Personalizar' para volver a la página del editor de feeds.

En esta etapa, puedes eliminar la cabecera de tu feed de Facebook.

Lo que necesitas hacer es bajar a la parte de 'Secciones' y seleccionar 'Cabecera'.

Esta configuración de Cabecera determina cómo se verá la cabecera de tu feed de Facebook.

Pero en este caso, necesitas ocultarla, así que simplemente desactiva el interruptor 'Habilitar'.

Ahora volvamos a la página principal del editor de feeds y abramos la configuración de 'Cuadro de Me gusta'. Después de eso, simplemente activa la función 'Cuadro de Me gusta'.

En esta página, también puedes ajustar el tamaño del cuadro de 'Me gusta', la posición, la visualización de la foto de portada, el ancho personalizado, el texto de llamada a la acción personalizado, etc.

Una vez hecho esto, simplemente presiona el botón 'Guardar' en la esquina superior derecha.

Incrusta el cuadro de 'Me gusta' de Facebook en tu página o publicación de WordPress

En esta etapa, puedes mostrar el Facebook Like Box en una página o en un área lista para widgets, como una barra lateral.

Para hacer esto, haz clic en ‘Embed’ en la esquina superior derecha. Ahora, aparecerá la ventana emergente Embed Feed, dándote dos opciones para mostrar el Like Box.

Una es usar un shortcode y la otra es agregarlo directamente a una página o a un área lista para widgets. La segunda opción es mucho más fácil, así que te mostraremos ese método primero.

Si deseas agregar el Like Box a una página específica, haz clic en el botón ‘Add to a Page’.

Ahora, simplemente selecciona una página a la que agregar la función y haz clic en ‘Add’.

Ahora llegarás al editor de bloques de Gutenberg.

Continúa y haz clic en el botón ‘+ Add a Block’, como indica Smash Balloon.

Una vez que la biblioteca de inserción de bloques esté abierta, necesitas encontrar el bloque Facebook Feed.

Luego, simplemente arrastra y suelta donde mejor se vea en la página.

En el bloque, selecciona el feed de Facebook con el Like Box que acabas de crear anteriormente.

El bloque mostrará entonces el cuadro de Me gusta.

Pero, ¿qué pasa si tienes varias páginas de Facebook y has configurado un cuadro de Me gusta para cada una usando Smash Balloon?

También puedes cambiar entre ellas en la barra lateral de configuración del bloque eligiendo una fuente del menú desplegable ‘Seleccionar una fuente’.

Todo lo que necesitas hacer ahora es hacer clic en el botón ‘Actualizar’ para que los cambios sean oficiales.

Así es como se ve nuestro cuadro de Me gusta en nuestro sitio de demostración:

Si usas un tema de WordPress basado en bloques, entonces también puedes usar el Editor de Sitio Completo para agregar el bloque de cuadro de Me gusta de Facebook a las plantillas de página de tu tema.

Para más información sobre el Editor de Sitio Completo, simplemente lee nuestra guía para principiantes sobre la edición completa del sitio.

Incrustar el widget del cuadro de Me gusta de Facebook en WordPress

Si usas un tema de WordPress clásico, entonces quizás quieras mostrar el cuadro de Me gusta de Facebook en un área lista para widgets, como una barra lateral, encabezado o pie de página. Es una excelente manera de mostrar el cuadro de Me gusta sin distraer a los usuarios del contenido principal de la página.

En la ventana emergente Incrustar fuente, selecciona ‘Agregar a un widget’ para ir al editor de widgets basado en bloques.

Ahora, al igual que en el método anterior, simplemente haz clic en el botón ‘+ Agregar bloque’, busca el bloque de Fuente de Facebook y arrástralo a tu área deseada.

En nuestro sitio de demostración, queremos usar el cuadro de Me gusta como un widget de barra lateral de WordPress.

En el bloque, selecciona la Fuente de Facebook con el cuadro de Me gusta que creaste anteriormente.

Luego, haz clic en ‘Actualizar’ para que los cambios se publiquen.

¡Y listo!

Así se ve la barra lateral de nuestro sitio de prueba con el widget de Caja de Me Gusta:

Incrusta el widget de Caja de Me Gusta de Facebook con un shortcode

Si los dos métodos anteriores no funcionan, te recomendamos agregar la Caja de Me Gusta o Caja de Fans de Facebook usando un shortcode.

Simplemente copia el shortcode del popup Incrustar feed anterior y agrégalo en cualquier parte de tu sitio web.

Para más información sobre el uso de shortcodes, puedes leer nuestra guía sobre cómo agregar shortcodes en WordPress.

Método 2: Agregar una Caja de Me Gusta de Facebook con código

Si solo te interesa mostrar una Caja de Fans o Caja de Me Gusta de Facebook sin agregar ningún otro tipo de feed de Facebook, entonces usar un plugin de página de Facebook puede parecer excesivo. En este caso, puedes agregar la Caja de Me Gusta usando código en su lugar.

Este método puede parecer intimidante para los principiantes, pero te mostraremos una forma infalible de insertar código usando WPCode. Es un plugin de WordPress que facilita la adición de fragmentos de código personalizados a WordPress sin dañar tu sitio.

Para esta guía, la versión gratuita de WPCode es suficiente, aunque puedes actualizar a la versión Pro para funciones avanzadas como el modo de prueba y una biblioteca de fragmentos de código basada en la nube.

Primero, vamos a instalar el plugin en WordPress. Una vez que esté activo, ve a Fragmentos de código » + Agregar fragmento. Luego, selecciona ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en ‘+ Agregar fragmento personalizado’.

Ahora llegarás al editor de código. Primero, demos un nombre a tu fragmento de código personalizado para que puedas identificarlo fácilmente más tarde. Para este, lo llamaremos ‘SDK de JavaScript de Facebook’ porque eso es lo que agregaremos aquí.

Ahora, mantén esta pestaña abierta y crea una nueva pestaña en tu navegador para ir a la página de desarrolladores de Facebook.

En el menú, haz clic en ‘Iniciar sesión’ para acceder a tu cuenta de Facebook.

Si esta es la primera vez que accedes a la página, completa el asistente de incorporación para crear una cuenta gratuita.

Luego serás dirigido al panel de desarrolladores de Facebook. Hagamos clic en el botón ‘Crear aplicación’.

En la siguiente página, simplemente selecciona 'Otro' para el caso de uso.

Después de eso, haz clic en el botón 'Siguiente'.

Ahora, verás todas las diferentes aplicaciones que puedes crear para tu página de Facebook.

Para crear una Caja de Me Gusta, puedes simplemente seleccionar 'Negocio' y luego hacer clic en 'Siguiente'.

Ahora, vamos a darle un nombre a tu aplicación. Puede ser cualquier cosa que te guste, ya que esto es solo de referencia. También puedes ingresar tu dirección de correo electrónico y seleccionar una Cuenta de Negocios opcional.

Finalmente, simplemente haz clic en 'Crear aplicación'.

Ahora vamos a la página de desarrolladores de Facebook para plugins sociales.

Luego, desplázate hacia abajo hasta que encuentres una sección como en la siguiente captura de pantalla:

Aquí, asegúrate de completar la URL de tu página de Facebook, vacía el campo 'Pestañas' y especifica el ancho y alto de la Caja de Me Gusta si es necesario.

También puedes optar por usar un encabezado más pequeño, deshabilitar la foto de portada y más. También hemos optado por adaptar la Caja de Me Gusta para que encaje en el ancho del contenedor, de modo que el tamaño se ajuste de forma receptiva a donde se coloque en el sitio web.

Una vez hecho esto, haz clic en el botón 'Obtener código'. Luego verás una ventana emergente que te muestra dos tipos de fragmentos de código: SDK de JavaScript y iFrame. Ambos mostrarán tu Caja de Me Gusta, pero en general, el SDK de JavaScript es una opción mucho mejor.

Los SDK de JavaScript suelen ser más rápidos porque están integrados directamente en la página web, lo que les permite cargarse como parte del documento principal. Los iFrames requieren la carga de un documento HTML completo, lo que puede ralentizar el tiempo de carga de la página.

En la pestaña SDK de JavaScript, asegúrate de que se haya seleccionado el nombre de la aplicación que creaste anteriormente.

Luego, procede a copiar el código de la API del SDK de JavaScript del Paso 2. Ahora, mantén esta pestaña abierta, pero cambia a la pestaña WPCode y pega el código allí.

Puedes dejar el Tipo de código como 'Fragmento HTML'.

Ahora, desplázate hacia abajo hasta la sección ‘Inserción’.

El Método de inserción se puede dejar como 'Inserción automática', mientras que la Ubicación debe cambiarse a 'Cuerpo de todo el sitio'.

Finalmente, simplemente activa el código y haz clic en 'Guardar fragmento'.

A continuación, crearás un segundo fragmento de código. Puedes seguir los mismos pasos que antes y llamarlo algo así como 'Caja de Me gusta de Facebook'.

Después de eso, cambia a la página de Desarrolladores de Facebook para plugins sociales de antes y copia el código del Paso 3.

Navega de nuevo a la pestaña WPCode y pega el código del Paso 3 en el cuadro de Vista previa del código. El Tipo de código puede ser 'Fragmento HTML'.

Desplancémonos hacia abajo hasta la sección 'Inserción'.

Si usas 'Inserción automática', entonces puedes hacer que la Caja de Me gusta aparezca automáticamente en varios lugares que se ajusten a la categoría de Ubicación.

En nuestro ejemplo, hemos decidido elegir la ubicación 'Pie de página de todo el sitio', lo que significa que la Caja de Me gusta aparecerá en el pie de página.

También hay otras opciones, como Insertar antes de la publicación, para mostrar la Caja de Me gusta antes de todas tus publicaciones de blog de WordPress.

Por otro lado, el método ‘Shortcode’ te permite crear un shortcode personalizado.

Luego puedes agregarlo a partes específicas de tu sitio web usando el bloque de shortcode.

Una vez que hayas configurado los ajustes de Inserción, simplemente activa el código y haz clic en ‘Guardar Fragmento’.

¡Eso es todo! Luego puedes visitar tu sitio web para ver cómo se ve el Like Box:

Para más guías sobre cómo mostrar feeds sociales en tu sitio de WordPress, consulta nuestro artículo sobre cómo agregar feeds de redes sociales en WordPress.

Bono: Más formas de integrar Facebook con WordPress

¿Quieres llevar tu integración de Facebook al siguiente nivel? Consulta estas guías adicionales:

• Cómo crear un popup de cuadro de 'Me gusta' de Facebook en WordPress – Aumenta la interacción con un popup de cuadro de 'Me gusta' estratégicamente programado.
• Cómo incrustar publicaciones de estado de Facebook en WordPress – Comparte actualizaciones específicas de Facebook directamente en tu sitio.
• Cómo incrustar un feed de grupo de Facebook en WordPress – Muestra las discusiones de tu comunidad en tu sitio web.
• Cómo mostrar las reseñas de tu página de Facebook en WordPress – Muestra prueba social con reseñas de clientes de Facebook.
• Formas rápidas de conseguir más 'Me gusta' en Facebook usando WordPress – Implementa estas estrategias para aumentar tus seguidores en Facebook.
• Cómo mostrar el Twitter y Facebook del autor en la página de perfil – Conecta a tus lectores con tus colaboradores en las redes sociales.
• Cómo agregar reacciones de Me gusta de Facebook a tus publicaciones de WordPress – Incorpora la popular función de reacciones de Facebook a las publicaciones de tu blog.
• Cómo crear una página de destino para anuncios de Facebook en WordPress – Diseña páginas de destino de alta conversión para tus campañas de anuncios de Facebook.
• Cómo publicar automáticamente en Facebook desde WordPress – Optimiza tu estrategia de redes sociales con publicaciones automáticas.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un cuadro de Me gusta o un cuadro de fans de Facebook en WordPress. También te puede interesar consultar nuestra hoja de trucos definitiva de redes sociales y nuestra lista de 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.