Cómo agregar Facebook Like Box / Fan Box en WordPress

Facebook like box también conocido como Facebook fan box se ha convertido en un elemento indispensable 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 recibir actualizaciones directamente en su feed de noticias de Facebook. Recientemente, uno de nuestros usuarios señaló a nuestra atención que no hemos cubierto el tema de cómo agregar el cuadro Me gusta de Facebook en WordPress. Aunque hemos explicado 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 una caja de fans de Facebook en WordPress.

Agregar Me gusta usando el plugin oficial de Facebook para WordPress

Quizás la forma más fácil de agregar un cuadro similar a Facebook a su sitio de WordPress es usar el plugin oficial de Facebook para WordPress. Lo primero que debe hacer es instalar y activar el archivo. Facebook conectar. Después de activar el plugin, vaya a Apariencia »Widget. Simplemente arrastre y suelte el widget de cuadro de Me gusta de Facebook en la 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 plugins 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 claros y oscuros disponibles.

Agregar manualmente Like Box sin usar ningún plugin

Puede agregar manualmente el cuadro Me gusta de Facebook sin utilizar ningún plugin. Ir El cuadro Me gusta del plugin social de Facebook página. Proporcione la URL de su página de Facebook y configure la apariencia del cuadro Me gusta.

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

presione el Obtén el 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 basados ​​en WordPress. XFBML es útil para las personas que usan otros plugins de Facebook que usan XFBML para mostrar los botones de Facebook. Utilice iframe si las dos primeras opciones no le funcionan.

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

Se agregó el código HTML5 del cuadro Me gusta de Facebook en WordPress

Haga clic en la pestaña HTML5 de la ventana de código y copie la primera parte del código. Te aconsejan que lo pegues justo después <body> etiqueta que generalmente se encuentra en el archivo header.php. Sin embargo, funcionará en cualquier parte del cuerpo. Para facilitarle las cosas, simplemente puede agregarlo al pie de página usando el nuestro. Plugin Insertar 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 vincula 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="#" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Esta parte del código le dice al javascript previamente cargado que muestre el cuadro similar en esta posició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 »Widget. Arrastre y suelte un widget de texto en la barra lateral y pegue el código en él. Guarde su widget y consulte su sitio web.

También funcionará en cualquier otra área de su sitio. Si eres un experto en código, puedes pegarlo en el pie de página, después de la publicación, etc.

No olvide cambiar la URL de la página de fans de Facebook por la URL de su 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 de Facebook. Para agregar un XFBML de Me gusta en Facebook, debe agregar tres pequeños fragmentos de código en WordPress.

Copie el primer fragmento de código y péguelo en su tema header.php archivo inmediatamente 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 al pie de página usando el nuestro. Plugin Insertar 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 vincula 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 agregarse al archivo <html>la etiqueta de su sitio. La forma más sencilla sería abrir tu tema. 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');

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

<fb:like-box href="#" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

Este código le dice al javascript que cargó en el primer paso, que muestre el cuadro similar en esta posición y con estos parámetros. Ir Apariencia »Widget. Arrastre y suelte un widget de texto en la 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 »Widget y arrastre y suelte un widget de texto en la 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 / Fan de Facebook en su sitio de WordPress. Si tiene preguntas y comentarios, deje un comentario. Tú también puedes Síguenos en Facebook.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *