Cómo agregar la caja de me gusta de Facebook / caja de fans en WordPress

Facebook like box también conocido como Facebook fan box se ha convertido en un elemento imprescindible para muchos sitios web. Permite a los propietarios de sitios web proporcionar a sus usuarios una manera fácil de unirse a su comunidad de Facebook y obtener actualizaciones directamente en su feed de noticias de Facebook. Recientemente, uno de nuestros usuarios nos llamó la atención que no hemos cubierto el tema de cómo agregar el cuadro Me gusta de Facebook en WordPress. Aunque hemos cubierto cómo agregar el botón Me gusta de Facebook, el botón Enviar de Facebook y los comentarios de Facebook. En este artículo, le mostraremos cómo agregar el cuadro de fans de Facebook en WordPress.

Agregar cuadro Me gusta usando el complemento oficial de Facebook para WordPress

Quizás la forma más sencilla de agregar un cuadro Me gusta de Facebook a su sitio de WordPress es utilizando el Facebook oficial. plugin para WordPress. Lo primero que debe hacer es instalar y activar el Facebook plugin. Después de activar el plugin, ir Apariencia »Widgets. Simplemente arrastre y suelte el widget de cuadro de Me gusta de Facebook en su barra lateral. Deberá proporcionar la URL de su página de fans de Facebook en las configuraciones de widgets.

El widget tiene las mismas opciones que Facebook social. plugins para sitios web. Puede elegir mostrar una secuencia, mostrar caras, eliminar el encabezado, cambiar el color del borde. Actualmente solo hay dos temas disponibles: claro y oscuro.

Agregar como cuadro manualmente sin usar ningún complemento

Es posible agregar el cuadro Me gusta de Facebook manualmente sin usar ningún plugin. Ir Cuadro Me gusta del complemento social de Facebook página. Proporcione la URL de su página de Facebook y configure el aspecto del cuadro Me gusta.

Obtener el código para agregar manualmente el cuadro Me gusta de Facebook en WordPress

presione el Obtener código para obtener el código del cuadro Me gusta.

Facebook le ofrece varias formas de agregar el código del cuadro Me gusta en su sitio web. Puede elegir entre HTML5, XFBML e iframe. Le mostraremos cómo agregar cada uno de ellos, pero debe elegir uno. En nuestra opinión, HTML5 es una opción razonablemente buena para la mayoría de los sitios web con WordPress. XFBML es bueno para personas que usan otro Facebook plugins que usan XFBML para mostrar los botones de Facebook. Use iframe si las dos primeras opciones no le funcionan.

El cuadro Me gusta de Facebook está disponible en varios formatos de código

Agregar código de cuadro de Me gusta de Facebook HTML5 en WordPress

Haga clic en la pestaña HTML5 de la ventana de código y copie la primera parte del código. Recomiendan que lo pegue inmediatamente después <body> etiqueta que generalmente se encuentra en su archivo header.php. Sin embargo, funcionará en cualquier parte del cuerpo. Para facilitarle las cosas, simplemente puede agregarlo en el pie de página utilizando nuestro Insertar encabezados y pies de página plugin. La primera parte del código se vería así:


<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Este javascript conecta su sitio web a la biblioteca javascript de Facebook. Ahora copie la segunda parte del código, que se vería así:


<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Esta parte del código le dice al javascript que cargó anteriormente que muestre el cuadro similar en esta ubicación y con estos parámetros. Por el bien de este ejemplo, pegaremos este código en los widgets de la barra lateral. Ir Apariencia »Widgets. Arrastra y suelta un widget de texto en tu barra lateral y pega el código dentro de él. Guarde su widget y consulte su sitio web.

Esto también funcionará en cualquier otra área de su sitio. Si tiene conocimientos sobre el código, puede pegarlo en su pie de página, después de la publicación, etc.

No olvide cambiar la URL de la página de fans de Facebook a la URL de su propia página.

Agregar el código XFBML de Facebook Like Box en WordPress

Haga clic en la pestaña XFBML para obtener el código del cuadro Me gusta de XFBML en Facebook. Para agregar un cuadro Me gusta de Facebook XFBML, debe agregar tres pequeños fragmentos de código en WordPress.

Copie el primer fragmento de código y péguelo en la carpeta de su tema. header.php archivo justo después <body> etiqueta. Al igual que el anterior, este código funcionará en cualquier parte del cuerpo. Para facilitarle las cosas, simplemente puede agregarlo en el pie de página utilizando nuestro Insertar encabezados y pies de página plugin. A este código le gustaría algo como esto:


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Esta pequeña función de JavaScript conecta su sitio web a la biblioteca de JavaScript de Facebook.

La segunda línea de código es una declaración de espacio de nombres XML y debe agregarla en el <html>etiqueta de su sitio. La forma más sencilla sería abrir el functions.php archivo, pegue el siguiente código:


//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');

Por último, copie la tercera línea de código que se vería así:


<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

Este código le dice al javascript que ha cargado en el primer paso, que muestre el cuadro Me gusta en esta ubicación y con estos parámetros. Ir Apariencia »Widgets. Arrastre y suelte un widget de texto en su barra lateral y dentro de ese widget de texto pegue la tercera línea de código. Guarde sus cambios y obtenga una vista previa de su sitio web.

Agregar el iframe de la mesa de Facebook en WordPress

Haga clic en la pestaña IFRAME para copiar el código del iframe. Ir Apariencia »Widgets y arrastre y suelte un widget de texto en su barra lateral. Pegue el código del iframe dentro del widget de texto y guarde los cambios. Abra su sitio para obtener una vista previa del cuadro de fans de Facebook.

Esperamos que este artículo le haya ayudado a agregar el cuadro Me gusta / Cuadro de fans de Facebook en su sitio de WordPress. Si tiene preguntas y comentarios, deje un comentario. Tú también puedes Síguenos en Facebook.

.

Fuente: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *