Jugando con Facebook

 :: Por Alejandro Cimas ::

Desde hace un tiempo tenía ganas de poder integrar Facebook con GeneXus, de hecho en la charla que dimos con Javier Larrosa en la XVIII GeneXus Meeting del 2008 algo habíamos mostrado. En esa oportunidad lo hicimos a través de los External Objects de GeneXus, utilizamos una librería desarrollada por Microsoft para interactuar con Facebook. La idea no estaba mal y de hecho pudimos comunicarnos muy fácilmente a través de dicha librería.

El problema con esto es que estábamos usando un producto de un tercero pudiéndolo hacerlo directamente a través de la API de Facebook. Esto tenía como inconveniente que siempre que ese tercero cambie nosotros debemos cambiar nuestro External Object para actualizar la lista de métodos/propiedades.

Eso fue justamente lo que nos pasó luego del evento, Microsoft cambió varias interfaces de dicha librería debido a cambios en la propia API de Facebook, y lo que nosotros teníamos funcionando y que de hecho mostramos en la demo de la charla, dejó de funcionar.

Lo interesante de utilizar un External Object era que teníamos la API de Facebook encapsulada en dicho objeto y era muy fácil su utilización.

Podíamos seguir en la línea de utilizar una librería de un tercero o podíamos nosotros mismos interactuar con la API de Facebook sin necesidad de un tercero, y esa es justamente la línea que elegimos, desarrollar una serie de User Controls que resuelvan la comunicación con Facebook desde nuestros objetos.

En cualquier caso, ya sea utilizando una librería de un tercero o accediendo a la API directamente, tenemos que crear una aplicación en Facebook, para lo cual primero que nada debemos agregar a nuestro perfil de Facebook la application: Developer. Y luego crear una nueva application, esto nos permitirá obtener una ApiKey con la cual podremos acceder a la API. Acá pueden saber un poco más al respecto.

La idea de los User Controls es utilizar la JavaScript Client Library, para acceder a la API a través de código javascript. No queremos hostear una app en Facebook, por lo cual cuando creemos nuestra app en Developer sólo nos interesará:

Basic - API Key, Key necesaria para poder interactuar con la API:



Connect - Connect URL, url donde Facebook enviará una session válida para comunicarnos con ellos:



Como pueden ver, también configuré un valor para Base Domain, en este caso localhost. Esto se debe a que tendremos una comunicación entre nuestra app y Facebook a través de Java Script, por lo cual habrá una Cross Domain Communication, por lo cual debemos crear un Channel entre nuestra app y Facebook, para lo cual necesitamos crear un archivo xd_receiver.htm y almacenarlo en nuestro server. Pueden obtener más detalles aquí, pero a los efectos de la utilización de los User Controls en GeneXus sólo tenemos que tener en cuenta dos cosas:

1. cuando creamos la app en Facebook indicar un Base Domain, con lo cual indicamos el nombre del dominio, donde a su vez estará el archivo xd_receiver.htm

2. cuando utilicemos el User Control: FacebookConnect, el cual nos permitirá conectarnos con Facebook, debemos indicar la ruta a dicho archivo a través de la property xdChannelUrl, cuyo valor por defecto es "/xd_receiver.htm".

Por lo cual si en el User Control indicamos como xdChannelUrl el valor "/xd_receiver.htm", entonces en el caso de .NET debemos almacenar el archivo en: C:\Inetpub\wwwroot, y en el caso de Java utilizando tomcat como webserver en: C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\ROOT.

Los tres User Controls que tenemos al día de hoy son:

FacebookConnect: necesario para establecer la conexión entre nuestra aplicación y Facebook.

Text: text del botón que se agregara a nuestro form y que nos permitirá establecer la comunicación con Facebook, valor por defecto: "Connect with Facebook".

ApiKey: como mencionamos antes es la Key asociada a la app que creamos en Facebook.
xdChannelUrl: url o ruta al archivo xd_receiver.htm que nos permitirá establecer una cross domain communication entre nuestra app y Facebook, valor por defecto: "/xd_receiver.htm"

Size: tamaño del boton, valores posibles: small, medium, large, or xlarge, valor por defecto: "medium".

FacebookLoggedUser: muestra la foto de perfil y el nombre del usuario logueado a Facebook.

Width: width de la foto, valor por defecto: 50.

Height: height de la foto, valor por defecto: 50.

FacebookLogo: true/false, indica si se quiere mostrar el logo de Facebook o no en la foto, valor por defecto: true.

Linked: true/false, indica si se quiere tener un link al perfil de Facebook en la foto de perfil, valor por defecto: true.

FacebookShare: permite compartir un link en el muro del usuario logueado.

Link: link a compartir una vez que el user hace click en el botón asociado.

Type: tipo de boton, valores posibles: box_count, button_count, button, icon, or icon_link, valor por defecto: button_count.

Pueden obtener los controles en la gallery de GeneXus.

Si se fijan el código de estos User Controls es muy simple, por lo cual pueden chequear la documentación de la JavaScript Client Library de Facebook y desarrollar el propio en base a sus necesidades.

* El presente post fue originariamente publicado en el Blog From Punta Espinillo to Tokio

GXplatform Gallery