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 complemento oficial de Facebook para WordPress. Lo primero que debe hacer es instalar y activar el Facebook enchufar. Después de activar el complemento, vaya a 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 los complementos sociales de Facebook 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 complemento. 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.
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 las personas que usan otros complementos de Facebook que usan XFBML para mostrar botones de Facebook. Utilice iframe si las dos primeras opciones no le funcionan.
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 complemento de encabezados y pies de página. 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 eres experto en código, puedes pegarlo en tu 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 el 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 complemento de encabezados y pies de página. 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.