Hola, en este articulo voy a explicar como insertar el conocido Fanbox o ahora llamado «Page Plugin» de la red social mas dominante: Facebook, en una página web cualquiera.

Page Plugin o Fanbox de Facebook

Este widget no por nada es muy utilizado, seguro lo haz visto incluso en algunas webs muy relevantes y visitadas en el mundo.

La verdad es que es la forma mas dinámica y a la vez mas simple de incorporar nuestra «Fan Page» dentro de la estructura del sitio que tenemos.

Con la ultima gran actualización que tuvo presenta un diseño aun mas moderno y por supuesto mas adaptativo.

Tal vez puedes estarte preguntando:

¿Funciona perfectamente en mi web?

1. No importa la plataforma con la que esté creada, este widget se añade mediante un simple código HTML por lo que se puede insertar sin problemas en gestores de contenido como Blogger, Webnode, Wix, Emiweb, Jimdo, etc.

2. Si aun eres muy nuevo y no sabes como se pone un código como estos, puedes checar el tutorial donde explico como hacerlo en las plataformas mas usadas. Haz clic aquí

Ventajas y desventajas de usarse:

Como todo complemento puede llegar a afectar negativamente principalmente el tiempo de carga y la estructura de diseño de nuestro sitio. Aun asi, es muy facil optimizarlo para que no genere ningun problema grave.

Y bueno, su ventaja o mas bien su propósito es ayudarte a mantener ese lazo entre los dos canales y lograr hacer a tu audiencia lo mas grande posible.

Seguro lo que esta en tu mente es:

Bueno, ¿vas a enseñar a poner el Page Plugin o no?

Ya esta, lo primero es acceder a su página principal.

Después baja y ve al configurador.

Ahora fíjate muy bien en las opciones que hay. Vamos por partes.

En el primer y mas importante parámetro «URL de la página de Facebook» vas a colocar el link o la dirección de tu Fan Page, tal cual es.

En mi caso: https://www.facebook.com/todopatuweb/

Nota: Obivamente no funciona con perfiles personales.

El parametro «Pestañas» te permite definir que tipo de contenido quieres mostrar, por defecto esta «timeline» que es igual a mostrar los ultimos posts de tu página.

Aunque se ve bien, hace al widget al plugin muy pesado, y ademas favorece el que no vayan directamente a tu Fan Page.

Lo mas recomendado en serio es dejar el campo sin nada, es decir para mostrar solo lo basico.

Ok, los parametros «Alto» y «Ancho» son opcionales, te sirven para definir un tamaño en especifico y no elástico.

La casilla «Usar encabezado breve» permite simplificar aun mas el widget, ofreciendo un diseño igual de funcional pero un poco mas sencillo.

La siguiente casilla: «Adaptar el ancho del contenedor del plugin» te deja decidir si el complemento puede ser responsive o no.

Para ocultar la foto de portada tan solo hace falta marcar la casilla que creo, es obvia.

Finalmente, «Mostrar rostros de amigos» significa mantener las imagenes de perfiles.

Una vez terminada la configuración, el siguiente paso es hacer click en «Obtener código».

¿Donde poner el código HTML?

Aquí viene la parte que atrasa. tienes que instalar primero el SDK de Facebook en tu web, copiando y pegando en esta el primer código que aparece.

Hay que ponerlo de una forma en la que se sirva en todas las páginas, puede ser en el Body o Footer general.

Te dejo esta lista con enlaces hacia Gifs que muestra como hacerlo en las plataformas offsite de desarrollo web mas famosas como JIMDO o Webnode.

Una vez instalado el SDK for JavaScript, tan solo basta copiar el segundo código para insertarlo exactamente donde quieres que aparezca el widget.

Baala, si no se muestra intenta leer todo de nuevo.

Mas posiciones y otras estilos de Fanbox

Flotante y con un efecto deslizante

Este conocido estilo muestra el Page Plugin flotando estaticamente a un costado que se abre al pasar el cursor con un hermoso efecto deslizante.

El siguiente es el código que debes insertar en tu web para tenerlo, hay que modificar una linea para poder lograr que en el Fanbox se muestre tu página de fans de Facebook.

<style> #flotante1 { position:fixed; top:100px; right:-250px; float:right; width:288px; display:block; padding:0; z-index:1002; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } #flotante1:hover, #flotante2:hover, #flotante3:hover { right:0px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.likeboxwrap { margin-top:-5px; margin-left:-45px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; } </style>  <div id='flotante1'> <img src='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' style='float:left;'/> <div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpáginadefacebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe> </div></span></div></div>

Tienes que remplazar lo que esta de verde por lo que aparece al final en la dirección de tu fan page, es decir SOLO LO QUE ESTA DESPUÉS DE LA DIAGONAL: www.facebook.com/esto

Ej:
http://www.facebook.com/todopatuweb

En este caso quedaría la linea así:

http%3A%2F%2Fwww.facebook.com%2Ftodopatuweb&

Si tu página de Facebook NO tiene dirección personalizada (osea se ve mas larga y contiene números o simbolos adicionales…)

Ejemplo: http://www.facebook.com/pages/todopatuweb/230549305505

Lo que harias seria insertar esto:

<style> #flotante1 { position:fixed; top:100px; right:-250px; float:right; width:288px; display:block; padding:0; z-index:1002; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } #flotante1:hover, #flotante2:hover, #flotante3:hover { right:0px; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } div.likeboxwrap { margin-top:-5px; margin-left:-45px; width:238px; height:325px; background-color:#fff; overflow:hidden; border-radius:10px; } </style>  <div id='flotante1'> <img src='http://lh3.googleusercontent.com/-vq69jjHi_aA/UKxnEYWptDI/AAAAAAAADdU/1bjiSBYnRSo/fb_tab.png' style='float:left;'/> <div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Ftodopatuweb%2FLos números que aparecen al final de tu direcciónaquí&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe> </div></span></div></div>

Bueno una vez que hayas hecho todo esto,  guarda los cambios, publica y listo…. veras como aparece en tú pagina web el widget con este estilo:D

¿Como adaptarlo a moviles?

Aunque se ve muy bonito, no esta optimizado para moviles, desde un telefono no deja una muy buena experiencia, porque se tiene que hacer algo al respecto si se usa.

Lo que yo recomiendo es ocultarlo en dicha versión usando un poco de CSS. Puedes checar este tutorial.

En un popup OptIn centrado

Creo que es una excelente opción pues pone el Fanbox dentro de una ventana emergente con efectos de fundido, que la verdad se ven muy bien. Puede llegar a generar mas likes que el widget insertado de forma inline.

Para saber como obtenerlo checa este post, en donde lo explico detalladamente.

¿Y los demas widgets de Facebook?

Si buscas la caja de comentarios, el botón el like o follow, te invito a visitar el gran articulo en donde he recopilado todos los widgets de esta red social, hasta algunos que solo se parecen. La verdad te puede servir mucho.

Por favor, comparte el articulo, me ayudaría muchísimo 🙂