LIMinescence: 4 steps to add facebook connect (xfbml) to google web toolkit (GWT) app

Adding facebook connect (XFBML) to your Google web toolkit (GWT) application

This is a fast track tips on how to add facebook connect to your GWT based application.

Step 1: add a facebook application.
If you don't have the facebook application. Just login to facebook and search for the word "developer" in the search field of the menu bar.

http://screencast.com/t/43OHbcLl9

select developer and add/install it. Select "Set Up New Application" , select an application name, select agree then save changes.
The next page is the application configuration. take note of your API Key, because you will be using it. In the left menu bar, select "Connect".
in the connect URL, add your URL. (e.g. http://localhost:8888/com.sample.facebookApp/ ). localhost will work, because facebook connect will not
ping your server.

Step 2: adding the facebook connect library
open your .html file and add the facebook connect name space and the javscript library.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

...

<body>
</body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript">

Facebook said that its faster to add the script tab below the closing body tag.

Step 3: add Cross Domain Communication Channel in your GWT app.

create a file called "xd_receiver.html" or download the file from http://www.somethingtoputhere.com/xd_receiver.htm and save it to the
public diretory of your google web toolkit app. You will reference this file later in your code.

Step 4: adding the code in your EntryPoint.

a) Add a static final String called FB_API_KEY and XD_RECEIVER_URL.

public static final String FB_API_KEY = "YOUR_KEY_FROM_FROM_YOUR_FACEBOOK_APP";
public static final String XD_RECEIVER_URL = "/xd_receiver.html";

b) build init method. This method initialize the facebook connect in your app. You should call this method in your onModuleLoad()


  private static native String initFacebook(String apiKey, String xd_receiver_url)
 /*-{
     $wnd.FB_RequireFeatures(["XFBML"], function(){
     $wnd.FB.Facebook.init(apiKey, xd_receiver_url); 
     });
 }-*/;

c) Define the loginHandler. The login handler gets executed after a user login has login to facebook connect. This method should be called
in your onModuleLoad().


  private native void defineFbLoginHandler() /*-{
     var fbConn = this;
     $wnd.facebookConnectLogin = function() {
    //The "@com.sample.facebookApp.XfbmlPrototype" is the fully qualified name of your GWT app EntryPoint.
    //The renderFriendsList is the method that will be executed after you login. (aka. login handler).

     @com.sample.facebookApp.XfbmlPrototype::SESSION_KEY =  $wnd.FB.Facebook.apiClient.get_session().session_key;
     fbConn.@com.sample.facebookApp.XfbmlPrototype::onLoginHandler()();
 }
 }-*/;

 public void onLoginHandler() {
     Window.alert("Login is successful!!");
     //You can start adding XFBML comments here, like welcome notes, friend selector, etc.
 }

d) define a parseDomTree method. Since facebook XFBML is not standard, you need to execute a method for them to render.


  private static native void parseDomTree() /*-{
     $wnd.FB.XFBML.Host.parseDomTree();
  }-*/;

e) define your login button.


 private Widget makeFbLoginButton() {
     String fblogin = "";
     HTML html = new HTML(fblogin);
     return html;
 }

As you can see, in the onlogin we point it to "facebookConnectLogin()". This method is define in defineFbLoginHandler() method we created in step c.

To sum it all up, your onModuleLoad() method will look like this:


public void onModuleLoad() {
 FlowPanel loginPanel  = new FlowPanel();
 RootPanel.get().add(loginPanel);

 Widget fbLoginButton = makeFbLoginButton();
 loginPanel.add(fbLoginButton);

 initFacebook(FB_API_KEY, XD_RECEIVER_URL);
 defineFbLoginHandler();
}

Take note that facebook widgets doesn't render in Google Hosted mode. I tried DeferredCommand but it doesn't work. Make sure to compile and test it in a
browser.

Here's the link to all the facebook connect tags that are available: http://wiki.developers.facebook.com/index.php/XFBML

These are the books that I recommend:
1) GWT in Practice
2) GWT in Action
3) Google Web Toolkit Applications (Paperback)

6 comments:

jvence said...: Great post. Thanks for sharing it with us. A couple of questions. I had to add public static String SESSION_KEY="";
and in addition, I am getting a javascript error: FacebookConnect is not defined
http://static.ak.fbcdn.net/rsrc.php/zDGIZ/lpkg/4biyy602/nu_ll/141/164075/js/connect.js.pkg.php
Line 651; 1:30 AM
Unknown said...: Hi Limenescence
How can i add facebook connect to my blogspot blog ..
ive been trying to do it.
but the problem is i cant host the xdm recieve file.
any ideas how to get through that.
any help will be appreciated.
saami; 11:33 AM
Unknown said...: JeanV,

The reason it wasn't working for me was because the Facebook script tag wasn't closed. I just added closing script tag at the end of the javascript include after the body.

Hope it helps you.; 6:10 PM
Unknown said...: This comment has been removed by the author.; 8:08 AM
Unknown said...: 1. can you show demo after user successfully authenticated , how to get user information rather than "login is successful" in gwt ?

2. where should be parseDomTree be called inside gwt? is it required to call it after login successful or before?; 6:13 AM
jvence said...: Hi! Is there any chance you can update this great tutorial to deal with Facebook's new API that uses: http://connect.facebook.net/en_US/all.js - it seems that
private static native String initFacebook(String apiKey, String xd_receiver_url) /*-{
$wnd.FB_RequireFeatures(["XFBML"], function(){
$wnd.FB.Facebook.init(apiKey, xd_receiver_url);
});
}-*/;

No longer works
Many thanks; 2:21 AM

Monday, May 18, 2009

4 steps to add facebook connect (xfbml) to google web toolkit (GWT) app

6 comments: