Facebook Fan Box WordPress Plugin

ATENCIÓN: Facebook ha cambiado sus widgets de socialización y el Fan Box a pasado a ser el Facebook Like Box. Hemos creado un plugin alternativo para quienes no tengan el Fan Box todavía instalado. Por favor visita http://www.dolcebita.com/wordpress/facebook-like-box/ para más información.

Hemos desarrollado un plugin muy sencillo y fácil de utilizar para incluir una caja de Facebook Fan Box en vuestro blog de WordPress. Estas cajas muestran la última información del muro de una página de Facebook y los seguidores que tiene:

Lo primero que tendréis que hacer es, como no, crear la página de nuestro blog en Facebook. Para ello vamos a la siguiente dirección y seguimos los pasos necesarios. Una vez finalizado estaremos listos para usar el plugin.

Vamos a necesitar el ID de la página que hemos creado. Para ello editamos la página y recuperamos el identificador de la barra de direcciones del navegador:

screenshot 2 Facebook Fan Box Wordpress Plugin

Tras activar el plugin en la administración de WordPress tenemos dos opciones para mostrar el Fan Box en nuestro blog:

1.- Usando el modo de widget a través del menú de apariencia de WordPress.

2.- Añadiendo la siguiente llamada la zona de nuestro tema donde queramos que aparezca el Fan Box. Si no conoces tu API_KEY deja en blanco este valor:

<?php if (function_exists('facebook_fan_box')): ?> <?php facebook_fan_box('API_KEY', 'PROFILE_ID'); ?> <?php endif; ?>

Reemplazando los campos obligatorios. Además he añadido una serie de parámetros adiccionales para modificar el Fan Box:

<?php facebook_fan_box('API_KEY', 'PROFILE_ID', 'STREAM', 'CONNECTIONS', 'WIDTH', 'CSS', 'IFRAME', 'HEIGHT', 'LOGO', 'LANG'); ?>

Donde:

STREAM: (1) activa o (0) desactiva el listado de últimos eventos (por defecto 1).
CONNECTIONS: el número máximo de seguidores que se mostrarán (por defecto 10).
WIDTH: el ancho máximo del Fan Box (por defecto 300).
CSS: formato alternativo de la caja.
IFRAME: (1) activa o (0) desactiva la carga del Fan Box usando un iframe (pro defecto 0).
HEIGHT: la altura máxima del widget.
LOGO: activa/desactiva la barra con el logo de Facebook.
LANG: Facebook locale (en_US, es_ES…)

Por ejemplo, si quieramos mostrar un Fan Box sin eventos (mostrando solo los seguidores de la página), con un máximo de 75 fans visibles, que la caja ocupe 400 pixeles y que use un archivo CSS personal haríamos:

<?php facebook_fan_box('', 'PROFILE_ID', 0, 75, 400, 'http://url.es/fanbox.css'); ?>

Descargar Facebook Fan Box…

http://charles.nouyrit.com/2010/01/14/ma-configuration-wordpress/ Charles Nouÿrit » Blog Archive » MA configuration Wordpress

[...] Facebook Fan Box me permet d’afficher la liste des dernier articles publié sur la Fan Page de mon entreprise sur Facebook, ainsi qu’un aperçu des Fans. Un bon moyen d’assurer la promo de cet outil de gestion de communauté. [...]
http://www.hnkweb.com/2009/08/03/facebook-fan-box-wordpress-plugin/ HNK » Archivo del Blog el blog de marcosesperon

[...] Toda la información sobre el plugin ahora está en dolcebita… [...]
http://www.johnwalldunks.com/ JohnWallDunks

I'm seeing some problems with the height using different browsers. For example on Chrome, the bottom of the box gets cut off. The default fanbox API doesn't specify a height and allows Facebook to decide the height based on the amount of content (stream, number of connections). It seems like the plugin will default to 550 pixels if nothing is entered. Is it possible to invoke the Facebook API with no height setting if that field is left blank?
http://www.matrosphera.com/?p=742 Matrosphera » Cómo hacer tu blog más social

[...] Facebook Fan Box.- Se utiliza para mostrar un cuadro en tu blog con los usuarios que son fans de tu página en Facebook , y dar la oportunidad al visitante de apuntarse. Podéis encontrar información sobre su implementación aquí. [...]
http://www.zoharurian.com/02/how-to-use-facebook-for-business-part-one/ How to Use Facebook for Business Part One | Active & Marketing

[...] העמוד אל מחוץ למתחם Facebook: ניתן לייצר ווידגיט המסתנכרן אל האתר שכם ומראה את הפעילות המתקיימת בדף [...]
http://www.methodphotography.com/ Method

I have the same issue (the bottom of the box gets cut off) in IE8, Chrome and Mozilla – this is only if the “become a fan” button is displayed.
http://www.deliciosoyligero.com/ Nerise Suriel

Buenas,
Tengo un blogs bajo wordpress, estoy tratando de de instalar la Facebook box fans y me da un error de comunicación con la página.
Me podrían orientar cual sería la razón.
Agradezco me respondan a mi e.mail.
saludos
Josue

Dos pequenos detalles:

1) Por alguna razon, el widget no aparese dentro de la caja de widget de acuerdo al diseno de mi “theme”. La verdad no se porque y no es gran cosa.

2) En Facebook, me permite decidir si quiero ensenar el logo de Facebook. (logobar=”1″). Talves seria bueno anadir esta funcion en la proxima version del plugin.

Mil gracias por tu labor. Me a servido el plugin.
jmsierra

Dos pequenos detalles:

1) Por alguna razon, el widget no aparese dentro de la caja de widget de acuerdo al diseno de mi “theme”. La verdad no se porque y no es gran cosa.

2) En Facebook, me permite decidir si quiero ensenar el logo de Facebook. (logobar=”1″). Talves seria bueno anadir esta funcion en la proxima version del plugin.

Mil gracias por tu labor. Me a servido el plugin.
http://www.dolcebita.com/ Marcos Esperón

Gracias por tu comentario.

Lo del posicionamiento del plugin en la caja dependerá del tema que uses en tu blog. Ahí no te puedo ayudar mucho.

En lo otro, acabo de actualizar el plugin para que permita activar/desactivar la visualización de la barra de Facebook.

Saludos.
http://www.twobackpackers.com/ Jason

Why do I receive this error when I place the Code (<?php if (function_exists('facebook_fan_box')): ?>
<?php facebook_fan_box('API_KEY', 'PROFILE_ID'); ?>
<?php endif; ?>) in any location? The error I receive is:

Warning: Missing argument 8 for facebook_fan_box(), called in /home1/twoback1/public_html/wp-content/themes/irresistible/custom-home.php on line 93 and defined in /home1/twoback1/public_html/wp-content/plugins/facebook-fan-box/facebook-fan-box.php on line 36
http://www.dolcebita.com/ Marcos Esperón

It was an issue with height parameter. Solved in version 1.4.1

Thanks for your help!
scottshowers

I need some instructions that are more detailed and clear.
coachsarahnovak

My fan box was working just fine for months until a few days ago. I upgraded to the new version but now I can't get it to show up on my page. Do I need to change something with the set-up? Thanks.

Sarah
http://Ezenlaweb.com/ Fernanda

Muchísimas gracias por el plugin, nos resultó muy útil. Lo único que le cambié es lo siguiente: para que en lugar de decir “Become a fan” dijera “Hazte fan”, modifiqué la línea:

'<script src=”http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>'

por

'<script src=”http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA” type=”text/javascript”></script>'

Saludos y gracias!
http://www.dolcebita.com/ Marcos Esperón

Gracias, lo tendré en cuenta para la próxima versión.
http://www.blinkinteractive.co.nz/blog Blink Interactive

Hi, First of all thanks for this great plug-in. I really like it. Also can I please suggestion a small feature?
Is it possible to have a Title field on the top of the box? So that I can have a title like “Find us on facebook” on top of that. Because I intend to have a title for each of my widgets so this one without could be a bit inconsistent. Hope this make sense, and looking forward to your response. Cheers.
http://www.dolcebita.com/ Marcos Esperón

Of course, no problem. It will be avaliable in next version.
http://www.blinkinteractive.co.nz/blog Blink Interactive

that's great thanks.
http://arterreta.com/ maaike

Hola he puesto el plugin en mi página pero no consigo que muestre los comentarios que hacen los admiradores de las entradas, existe la posibilidad, gracias
http://www.dolcebita.com/ Marcos Esperón

Hola, eso no es posible, de momento no lo permite Facebook.
http://www.gadget.com/ Greg

Glad to hear! Because of the way the CSS and HTML framework around widgets on my site works, we rely on the before_title and after_title arguments to be displayed. For my part, simply outputting those in the current version fixes my issues. Could I beg for a 1.4.2 release that at least includes those, even if you're saving titles for 1.5? Without those, the layout of my page breaks with improper tag opening/closing.
http://infobaleari.it/ giorgio accinasio

Hola, acabo de instalar el plugin, muy facil y muy útil. Gracias.
Lo que quería hacer, si es posible, es eliminar no sólo el logo (ya hecho con las opciones), también la portada donde aparece ” (nombre pagina) en facebook…hazte fan…”. Lo que quiero es mostrar sólo los seguidores (sólo el numero y los avatars), ya que tengo una portada mia de queda mucho mejor en mi blog. No sé si me explico…
http://www.dolcebita.com/ Marcos Esperón

Hola: eso mediante el plugin no es posible porque no es una opción que permita Facebook.
Lo único que puedes intentar (si no usas la versión por iframe) es incluir en tu archivo de estilos un CSS para ocultar ese bloque, por ejemplo:
.fan_box .connect_top {display:none;}
Y ver si así te lo oculta.
Saludos.
Jorge

Hola,

Me gustaría poner el plugin en mi blog, pero no consigo encontrar mi API Key de mi página.

te dejo el link a la misma por si me puedes ayudar: http://www.facebook.com/pages/Paraiso-Futbol/10...
coachsarahnovak

I figured it out. I was using the API key from my WordPress page instead of the API given in the code from FB when creating the Fan Box. The diagram in step 2 really helped…
http://www.fstock.es/ fstock

Hola Jorge. En el texto que hay al principio de esta página esta perfectamente explicado como encontrar la API. En el tercer párrafo hay un texto sombreado en azul que dice “accedemos a esta página”. Haz cick ahí y en la página que te sale sigue los pasos de las indicaciones
AlevolveD

Hola pues vereis tengo un problemilla aver si me sacais de la duda.

Pues vereis tengo el plugin Wordbook el cual te permite actualizar tu muro con tus post una vez que los has escrito en tu wordpress, yo tengo un facebook mio, pero a traves del mio he creado una pagina en plan “Hazte fan” de esas de Facebook para mi blog, pero cuando configuro el plugin con mi api key y toda esa parafernalia se me actualiza mi facebook y no la pagina (habiendole dado antes en la configuracion permiso solamente a la pagina para actualizar).

Que puedo ahcer al respecto?? He probado borrando la aplicaicon de facebook haciendolo otra vez y ya no me da esa opcion, no hay manera de crear una pagina de facebook por libre y sin necesidad de estar sujeta a un usuario??

Espero que me entendais y me ayudeis, asi que nada, un saludo y gracias por todo!
http://wpthemesdir.com/wordpress-news/facebook-fan-box-wordpress-plugin-dolcebita/ Facebook Fan Box Wordpress Plugin | dolcebita | WordPress News

[...] See the original post: Facebook Fan Box WordPress Plugin | dolcebita [...]
http://www.flasheves.com/ eveevans

Cual es la diferencia entre este plugin y el codigo que te da facebook?
http://www.dolcebita.com/ Marcos Esperón

Ninguna, solo que de este modo tienes la posibilidad de incluir el Fan Box en tu blog desde la sección de Widgets, sin tener que tocar el código del tema.
http://www.flasheves.com/ eveevans

entiendo, muchas gracias
Halim

It says on the wordpress plugin page that this is compatible up to 2.8 only. Is this just not updated, or does it not work with 2.9+ ?
http://www.dolcebita.com/ Marcos Esperón

Just not updated, it works fine with 2.9+
http://4clubbing.ro/ Grigo

Hi
I have a problem with this plugin.
I put the code in the sidebar, everything is ok,
but when i pres the button “Become a fan”,
something is wrong, is not working.
say : “Verification is needed to connect.”
How can i resolve this bug?
http://www.dolcebita.com/ Marcos Esperón

Are you having this problem in http://4clubbing.ro/? Because I tried right now and it works fine for me…
http://4clubbing.ro/ Grigo

Hi
I have a problem with this plugin.
I put the code in the sidebar, everything is ok,
but when i pres the button “Become a fan”,
something is wrong, is not working.
say : “Verification is needed to connect.”
How can i resolve this bug?
http://www.dolcebita.com/ Marcos Esperón

Are you having this problem in http://4clubbing.ro/? Because I tried right now and it works fine for me…
http://www.equicktips.com/wordpress-plugins-best-facebook-widgets-for-wordpress/ Wordpress Plugins: Best Facebook Widgets for Wordpress

[...] Facebook Fan box : If you have a page in Facebook about your blog and want to show the Facebook Fan Box with the recent updates and fans, just activate this widget [...]
http://wpmash.com/facebook-fan-box-wordpress-plugin-dolcebita/ Facebook Fan Box Wordpress Plugin | dolcebita | WpMash – WordPress News

[...] Go here to see the original: Facebook Fan Box WordPress Plugin | dolcebita [...]
http://topsy.com/trackback?utm_source=pingback&utm_campaign=L1&url=http://www.dolcebita.com/wordpress/facebook-fan-box-wordpress-plugin/ Tweets that mention Facebook Fan Box Wordpress Plugin | dolcebita — Topsy.com

[...] This post was mentioned on Twitter by Dante Cavero. Dante Cavero said: Como crear tu Fan Box en tu WordPress! http://bit.ly/dwuig7 [...]
ivancast

Necesitaría un poco de ayuda… tengo un css externo pero no cambia la apariencia en el modulo de widget, ¿hay algún ejemplo de css para comparar y ver que hago mal? El que yo estaba modificando lo tengo en http://www.dirtybike.es/wp-content/plugins/face...
http://www.dolcebita.com/ Marcos Esperón

Tienes la información oficial en http://wiki.developers.facebook.com/index.php/F...
ivancast

Gracias por la información, todavía no manejo bien todo este tema…
Marco Mundarain

Quiero colocar la fans page de alguién a quien no conozco, y que no me dará su Api y su Id…. Cristina Aguilera por ejemplo.Cómo hago?
http://www.dolcebita.com/ Marcos Esperón

Pues está claro que no puedes.
http://www.360aventuras.com Fede!

Hola,

te quería preguntar una cosa. Desde hace tiempo lo tengo instalado el plugin, pero ayer me dejó de funcionar. No es un tema de browser, ya que lo he probado con FF, Safari y Opera, y en ninguno de los tres se ve. Lo único que hace es “cargar” (las tres o cuatro barritas azules digamos) y más nada. Después no aparece.

Y fijándome veo que debo crear una página. Y yo lo tenía configurado para un grupo en FB… es lo mismo? funciona igual? O debo crear una página para que funcione?

Desde ya, gracias!
http://www.dolcebita.com/ Marcos Esperón

Hola,
Como puedes ver en la página oficial del Fan Box de Facebook este widget se basa en páginas. No se si hasta ahora funcionaba también con grupos como comentas, pero Facebook te obliga a seleccionar una página.
Saludos.
http://www.360aventuras.com Fede!

Gracias por su respuesta Marcos! Crearemos una página entonces a ver si funciona
http://www.marketingbabble.com/2010/04/posting-your-blog-to-a-facebook-fan-page/ Posting Your Blog to a Facebook Fan Page | Marketing Babble

[...] installed the fan box you can now see on the sidebar of the blog. Using wordpress, I opted for the plugin here and it works really [...]
http://www.juegos-trucos.com.ar eliseo

tengo un wordpress 2.8.6 y luego de instalar el plugin, como no tengo widget, debo usr la segunda opcion, pero al colocar el codigo wordpress no me funciona me tira un error

<?php if (function_exists('facebook_fan_box')): ?>
<?php facebook_fan_box('API_KEY', 'PROFILE_ID'); ?>
<?php endif; ?>

Podria ser el wordpress 2.8.6 o que la API y el PROFILE, son el mismo numero segun lo que me da facebook.
Perdon por la molestia
http://www.dolcebita.com/ Marcos Esperón

Facebook ha cambiado el Fan Box por el Like Box, por lo que he creado un plugin nuevo para añadir esta nueva caja. Puedes descargarlo en: http://www.dolcebita.com/wordpress/facebook-lik...

Saludos.
Robles

hola me gusta mucho el plugin pero tengo el un problema, querría hacer más pequeña la caja para que solo me apareciera hazte fan y nada de seguidores, pero no se ya que <?php facebook_fan_box('API_KEY', 'PROFILE_ID', 'STREAM', 'CONNECTIONS', 'WIDTH', 'CSS', 'IFRAME', 'HEIGHT', 'LOGO', 'LANG'); ?> el height aparece depues del css e iframe y en css no se que poner porque no quiero cambiar la hoja de estilo. solo querria poner un heigh de unos 60 px
http://www.dolcebita.com/ Marcos Esperón

El parámetro en el que cambias el número de seguidores que aparecen es el Connections. Con poner ese valor a cero debería ocultarlos.
Robles

ante todo muchísimas gracias. Con lo que dices me desaparecen los seguidores pero el problema es que es que también me desaparece el me gusta de facebook. Eso si que me gustaría que se viese. mi página es tublogdeoposicones.com, ahí se puede ver como queda
http://www.dolcebita.com/ Marcos Esperón

Eso es porque le tienes el height fijo y te corta el espacio (queda oculto). Dale más altura o simplemente deja ese valor en blanco para que sea automático.
Robles

siento ser el más pesado del lugar me sigue pasando igual yo lo tengo así:

<div style=”margin-bottom: 10px;”>

<?php if (function_exists('facebook_fan_box')): ?>

<?php facebook_fan_box('xxxxxx', 'xxxxxx', 0, 0, 180); ?>
<?php endif; ?>
</div>
http://www.dolcebita.com/ Marcos Esperón

Pues debe ser problema de Facebook que por defecto te manda 65px como altura. Prueba a mandarle tu un valor, por ejemplo:

<?php facebook_fan_box('xxxxxx', 'xxxxxx', 0, 0, 180, '', 0, 125); ?>
Robles

Muchas gracias lo hemos conseguido, aunque para que me deje he tenido que cambiar el iframe y darle el valor de uno.
Ha quedado genial, mil gracias, A continuación dejo como lo tengo por si a alguien le vale

<div style=”margin-bottom: 10px;”>

<?php if (function_exists('facebook_fan_box')): ?>

<?php facebook_fan_box('xxx', 'xxxx', 0, 3, 180, '', 1, 125); ?>
<?php endif; ?>
</div>
http://www.rajneesh.me/wordpress-support/list-of-useful-wordpress-plugins/ List of useful wordpress Plugins

[...] Comment Reply Notification Contact Form 7 Facebook Fan Box FaceBook Share (New) Math Comment Spam Protection New Tag Cloud Platinum SEO Pack SexyBookmarks [...]
http://www.dlokura.com Adrian

como hago para saber cual es mi API_KEY de mi Pagina de facebook que tengo creado ¿?
http://www.dlokura.com Adrian

y como obtengo el AP_KEY de mi la pagina que tengo en Facebook ?
http://www.mylifegps.com Bryn

I have installed the widget but it seems to be cutting off the bottom of the box for the names of the last 5 connections please advise on how to fix this. Thank you.
http://www.dolcebita.com/ Marcos Esperón

Hi,
Just change the HEIGHT parameter with a higher value.
http://play.x8smile.net Kevin

THanks for this great plugin :X
http://www.savethegeek.es/2010/05/26/meme-mis-plugins-wordpress/ Meme: Mis plugins de Wordpress | Save The Geek

[...] Facebook Fun Box: Gracias a este plugin colocar una caja de fans del blog en Facebook es realmente sencillo. [...]
Stef78

Hi,

for some reason my fanbox stopped showing the images. Only the images of friends are visible.
Any idea how to solve this?
thanks!
http://reparaciondepc.cl/blog DoctorPC

Efectivamente hace unos días en todos los sitios ha dejado de mostrar la foto de los seguidores de Facebook :/, alguna actualización de seguridad de FB?
Kindai Tourstravel

What an API KEY?? My FB Fan Box does not like what I expected. Please visit my homepage http://www.kindaitours.co.cc/ and tell me, what I have to do to fix it?? Thx
http://www.actualite-buzz.fr/buzz/le-best-40-des-plugins-wordpress-a-installer-au-lancement-dun-blog/ Buzz, High-Tech, Réseaux Sociaux Le Best 40 des plugins Wordpress à installer au lancement d’un Blog | Actualité Buzz

[...] Facebook Fan Box : Avoir un encart pour favoriser les surfeurs à devenir fan de votre « like page » Facebook. [...]
http://sexisgood.es/blog/ Mireia

Es perfecto! Simple y efectivo. Gracias.
Mireiazorin

Hola, hay alguna manera para que cuando mi cuenta de facebook esté desconectada el perfil de la página en facebook esté visible para el resto de “fans”? Gracias.
Mireiazorin

Me refiero al perfil público que aparece en la fanbox del blog. Gracias
http://www.dolcebita.com/ Marcos Esperón

Hola,

No depende de tu cuenta de Facebook, dependerá de si el usuario que
está viendo el Fan Box está logueado en Facebook. Si está verá las
fotos de los fans.

Es política de Facebook, el plugin no puede cambiar eso.

Saludos

El 20/06/2010, a las 04:00, Disqus <notifications-
BWKXHEH4DF@disqus.net> escribió:
Yusef

Where do you enter the API key when using a widget?
Dazajga

Se me borra al introducir el código!! Copio todo en un widget de texto y al guardarlo se me borra todo y no sale nada. Que puede pasar?
mw247

Hi, How can I call an external css file to style the box? Doesn’t seem to work.