Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating the Login Button
You can invest a lot of time and effort into styling the Facebook Connect login button, but it's best to use the one provided by Facebook; the use of their icon is dictated by the Facebook Connect policies anyway. The login button is created with the Facebook Markup Language (FBML) tag fb:login-button embedded in your web page.
The FBML tags are automatically rendered into their HTML equivalents by the Facebook Connect JavaScript library. However, you must take special precautions to ensure that all browsers recognize the extra namespace required by FBML; otherwise, the Facebook Connect library cannot find the FBML tags:
- The web page using FBML has to be XHTML-compliant and use the XHTML DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
After the fb namespace has been defined, you can use it in FBML tags. To include the Facebook Connect button on your website, simply use the following code:
<fb:login-button></fb:login-button>
You can style the button with size, background, and length attributes:
<fb:login-button size="large" background="white" length="long"> </fb:login-button>
You can also include an onlogin event handler, which is executed after the user has connected your application to her Facebook account. This is usually the same function that you've used as the ifUserConnected value in the FB.init call:
<fb:login-button onlogin='fb_login();' size="large" background="white" length="long"> </fb:login-button>
The FBML library sets the class of the fb:login-button tag to fb_login_ready after the user has logged in, making it very easy to hide the login button if the user is already connected to Facebook. All you need is a single CSS line:
.fb_login_ready { display: none; }