Integrar Facebook Connect en tu WordPress

Como podéis comprobar, en Berriart ya se pueden realizar comentarios usando el login de Facebook. Es algo que TechCrunch lleva haciendo ya un tiempo y que poco a poco veremos en muchos más sitios web gracias a Facebook Connect. Se trata de que la gente no necesite meter sus datos para comentar, sino de que lo pueda hacer usando su cuenta de Facebook, además cuando el usuario comente aparecerá una pequeña nota en el feed dentro de Facebook. La integración en mi blog la he realizado con un plugin para wordpress creado por la propia gente de Facebook, WP-FBConnect, y ahora voy a explicar como lo he hecho, pero si usáis otra plataforma de blogs o preferís probar otro plugin, podéis buscar el vuestro en el directorio de plugins para Facebook Connect.

Lo primero es crear nuestra aplicación en Facebook, esto lo haremos desde nuestra cuenta de Facebook en la aplicación desarrolladores. Solo hay que ponerle un nombre, en este caso el nombre del blog, y listo. No hace falta rellenar ningún dato más, aunque es aconsejable ponerle los logos. Una vez hecho, nos hara falta la clave de API de nuestra aplicación y la clave secreta para poder configurar el plugin para wordpress.

Ahora nos descargamos el plugin. Para hacerlo hay que utilizar SVN, sino sabes puedes descargartelo de aquí, pero estaría bien que aprendieras a utilizar subversion. Ya sabéis descomprimir, subir a la carpeta de plugins del blog y finalmente activar desde el panel de control, como hubieramos hecho con cualquier otro plugin. Para configurarlo hay que ir a ‘Opciones’->’Facebook Connect’ y escribir las claves de la aplicación que acabamos de crear en Facebook.

Lo tenemos casi instalado, pero antes hay que hacer algunas comprobaciones y modificaciones en tu theme. Tienes que comprobar que en el header de tu theme se llama a la función ‘wp_head’ y que en el footer a ‘wp_footer’. También es necesario que en el header, en la etiqueta para abrir html, se llame a la función ‘language_attributes’. Si tu theme no lo hace, deberás incluirlas tu mismo, para hacerlo puedes usar de ejemplo el theme ‘default’. Una vez comprobado todo eso, tienes que añadir la siguiente línea en tu plantilla de comentarios, normalmente ‘comments.php’:

<?php do_action('fbc_display_login_button') ?>

Colócalo en el lugar donde quieras que aparezca el login de Facebook. Puedes hacer varias pruebas hasta que encuentres el lugar que más te gusta. Con este último paso, terminaríamos la instalación habitual del plugin, y nuestro blog estaría preparado para soportar Facebook Connect en los comentarios.

Personalización

Pero a mi personalmente no me gustaba la caja de login que te crea, ni la caja que aparece en la esquina superior derecha cuando estás logueado. Además que los mensajes aparecen en inglés y era necesario traducirlos. Así que os cuento lo que he hecho para dejarlo a mi gusto.

Lo primero es editar el archivo ‘config.php’ del plugin, y traducir los mensajes que se envían al minifeed de Facebook. Además como voy quitar la caja de usuario logueado de la esquina superior derecha, hay que poner la variable ‘FBC_USER_PROFILE_WINDOW’ a falso:

define('FBC_USER_PROFILE_WINDOW', false);

Al hacer esto último no se muestra la caja con los datos del usuario cuando está logueado en ningún sitio, pero tampoco es lo que queremos. Lo que yo he hecho es mostrarla dónde aparece el botón de login antes de loguearte, y si quieres hacer lo mismo lo que tienes que hacer es escribir lo siguiente justo debajo de la línea que hemos metido antes en la plantilla de comentarios:

<?php echo fbc_render_login_state(); ?>

Por último, tendrás que editar el CSS de tu blog y el del plugin (fbconnect.css) para que todo quede tal como tu quieres.

Espero que me hayáis entendido, si tenéis alguna duda ya sabéis, loguearos con vuestra cuenta de Facebook y dejarme un comentario.