:: By Alejandro Cimas ::For some time now, I’ve wanted to be able to integrate Facebook with GeneXus and, in fact, we showed something about it at the presentation we gave with Javier Larrosa at the XVIII GeneXus Meeting in 2008. At the time we used GeneXus' external objects, and a library developed by Microsoft to interact with Facebook. It was quite a good idea and, actually, we could easily communicate through that library. The problem with it was that we were using a third-party product when we could have done it directly through the Facebook API. This had a disadvantage in the sense that every time that this third party changed, we would have to change our External Object to update the list of methods/properties. That’s exactly what happened to us after the Meeting. Because Microsoft changed several interfaces of that library due to changes in the Facebook API itself, what we had shown running in a demo during our presentation no longer worked.
The interesting thing about using an External Object was that we had the Facebook API encapsulated in that object and it was very easy to use.
We could continue to use a third-party library or we could interact with the Facebook API ourselves with no need for a third party, and that's precisely what we decided to do, which was to develop a series of User Controls for communicating with Facebook from our objects.
In any case, whether by using a third-party library or accessing the API directly, we have to create an application on Facebook. To do so, we need to add the Developer application to our Facebook profile. Developer. Next, we create a new Application in order to obtain an ApiKey that will enable us to access the API. You can find more information about it here. The purpose of User Controls is to use the JavaScript Client Library so as to access the API through javascript code.We don’t want to host an application on Facebook, so when we create our app in Developer we will only be interested in the following: Basic - API Key, Key needed to interact with the API
Connect - Connect URL, URL where Facebook will send a valid session to communicate with them:
As you can see, I’ve also configured a value for Base Domain, which in this case is localhost. This is due to the fact that communication will take place between our app and Facebook through js, and that’s why there will be Cross Domain Communication. Therefore, we have to create a Channel between our app and Facebook, for which we need to create an xd_receiver.htm file and store it in our server. You can obtain more information here, but in order to use User Controls in GeneXus we just have to take two things into account: 1. When creating the app in Facebook we have to indicate a Base Domain, with which we indicate the domain name, where the xd_receiver.htm file will be located.
2. When using the User Control: FacebookConnect that will allow us to connect with Facebook, we have to indicate the route to this file using the xdChannelUrl property, whose default value is "/xd_receiver.htm".
Therefore, if in the UC we indicate the "/xd_receiver.htm" value as xdChannelUrl, then for the case of .Net we should save the file at: C:\Inetpub\wwwroot, and for Java using tomcat as webserver, in: C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\ROOT.
The three User Controls that we have today are as follows:
FacebookConnect: It is necessary to establish the connection between our app and Facebook.
Text: text of the button that will be added to our form and that will allow us to establish communication with Facebook; default value: "Connect with Facebook."
ApiKey: as we mentioned before, it’s the Key associated with the app that we created on Facebook.
xdChannelUrl: URL or route to the xd_receiver.htm file that will allow us to establish a cross domain communication between our app and Facebook; default value: "/xd_receiver.htm."
Size: size of the button; possible values: small, medium, large, or xlarge; default value: "medium".
FacebookLoggedUser: It shows the profile photo and the name of the user logged in to Facebook.
Width: width of the photo; default value: 50.
Height: height of the photo; default value: 50.
FacebookLogo: true/false, indicates if you want to show the Facebook logo in the photo or not; default value: true.
Linked: true/false, indicates if you want to have a link to the Facebook profile in the profile photo; default value: true.
FacebookShare: It allows sharing a link in the logged in user’s wall.
Link: link to share once the user clicks on the associated button.
Type: type of button; possible values: box_count, button_count, button, icon, or icon_link; default value: button_count.
The controls can be obtained in the GeneXus Gallery.
If you look closely, the code of these User Controls is very simple, so you can read the documentation of the Facebook JavaScript Client Library and develop your own one according to your needs.