Anteriormente, compartimos tutoriales para agregar el gráfico abierto de Facebook, el botón «Me gusta Facebook» y los comentarios de Facebook a WordPress. En este post, vamos a ver cómo añadir una caja parecida a la de Facebook a un sitio de WordPress.
Post relacionado: Cómo agregar la insignia de Google+ a WordPress
Antes de que te explique los pasos para añadirlo a los archivos de plantillas de tu tema, veamos cómo se ve una caja parecida a la de Facebook (también conocida como caja de fans de Facebook)…
Lo puedes encontrar en nuestra barra lateral, se ha vuelto muy popular, por eso lo usan casi todos los blogs de WordPress. Hoy, vamos a ver paso a paso la guía para añadir esta caja de fanáticos a un sitio web de WordPress.
Hay dos maneras de tener la caja parecida a Facebook en tu blog de WordPress.
1) Método manual
2) El plugin de WordPress para añadir Facebook como caja
1) Método manual
Consigue el código de la caja.
Ir a la página de Facebook Like box – desarrolladores. Proporciona la dirección de la página de fans de Facebook y configura las demás opciones como altura, peso, combinación de colores. También puedes controlar qué es lo que quieres que se incluya en la casilla «Me gusta» seleccionando las casillas de verificación para mostrar el encabezado, mostrar el flujo, mostrar las caras y mostrar el borde.
Haz clic en «Obtener código«. Obtendrás una pantalla emergente como esta.
En realidad, Facebook proporciona cuatro tipos de código para el cuadro similar. Te guiaremos a través de cómo cada tipo de código puede ser añadido a tu sitio web, tú eliges uno de ellos.
Agregar la caja similar de Facebook a WordPress usando HTML 5…
Pegue el siguiente código en el archivo header .php o footer.ph p, recomendamos que se añada en footer.php. El 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/es_US/all.js#xfbml=1&appId=Your-FB-App-ID"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk');</script>
Reemplaza tu FB-App-ID con tu actual ID de la aplicación de Facebook, que contiene valores numéricos. Si no tienes uno, puedes consultar esta guía para crear un nuevo ID de aplicación de Facebook.
Y agrega el código de abajo donde quieras mostrar el cuadro similar. Si prefieres tenerlo en la barra lateral entonces ve a Apariencia « Widgets « Widget de texto, pega el código. Nota: Reemplaza la dirección por la dirección de tu página de fans de Facebook en el campo de datos de abajo.
<div class="fb-like-box" data-href="https://www.facebook.com/es2bw"data-width="292" data-show-faces="true" data-header="true"data-stream="false" data-show-border="true"></div>
Añadiendo Facebook como caja a WordPress usando XFBML
Paso 1: Pegue el código de abajo en el header.php o en el footer.php como hicimos en el último y reemplace el Your-FB-AppID con el ID de la aplicación.
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; si (d.getElementById(id)) devuelve; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_US/all.js#xfbml=1&appId=Your-FB-AppID"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk');</script>
Paso 2: necesitas añadir el siguiente espacio de nombres XML a la etiqueta.
<html xmlns_fb="http://ogp.me/ns/fb#">
Para añadirlo en WordPress puedes usar la siguiente función en el archivo functions.php de tu tema
/*Esto es necesario para que el XFBML funcione en las versiones anteriores de Internet Explorer*/función add_XML_Namespace( $output ) { return $output . ' xmlns_og="http://ogp.me/ns#" xmlns_fb="http://ogp.me/ns/fb#"';}add_filter('atributos_de_lenguaje', 'add_XML_Namespace');
Paso 3: En este paso, vamos a añadir el código donde queremos que se renderice la caja similar. Ir a Apariencia « Widgets « dejar un Widget de texto en la barra lateral en la posición deseada para el cuadro similar de Facebook y pegar el código de abajo –
<fb:like-box href="https://www.facebook.com/es2bw"width="292" show_faces="true" header="true" stream="false" show_border="true"></fb:like-box>
Reemplaza la dirección de la página de fans de Facebook por la tuya.
Añadir Facebook like box a WordPress usando IFRAME
Esta es una de las formas más fáciles de añadir Facebook como caja en los temas de WordPress. Esto no requiere la edición de los archivos del tema, todo lo que necesitas hacer es tener el siguiente código en la barra lateral (Apariencia « Widgets y el código en Widget de texto). Recuerda, para reemplazar el valor correcto en el campo appId del código de abajo.
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fes2bw&width=292&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true&appId=Your-FB-App-ID" scrolling="no"frameborder="0" style="border:ninguno; desbordamiento:escondido;ancho:292px; altura:290px;" allowTransparency="true"></iframe>
2) El plugin de WordPress para añadir Facebook como caja
Para aquellos que no quieran añadir manualmente el código en su tema pueden usar plugins. Todo lo que tienes que hacer es instalar y activar el plugin oficial de Facebook. Una vez que lo tengas activado en tu blog, añadirá unos cuantos widgets en la sección Widget (Ruta: Apariencia « Widgets). Como puedes ver en la siguiente captura de pantalla que este plugin por sí mismo añade los siguientes widgets-
- Widget del botón de seguimiento de Facebook
- El widget de Facebook como caja
- Facebook Widget de actividad reciente
- Widget de recomendaciones de Facebook
- Widget del botón de envío de Facebook
Ya que, necesitamos añadir «like box», arrastrar y soltar el widget «like box» de Facebook en la barra lateral y configurar los ajustes. Eso es todo, ya has terminado de añadir «like box» en tu tema.
Si crees que hay alguna otra forma más fácil de añadir la caja similar a Facebook en WordPress, entonces háznoslo saber a través de los comentarios.
