Fb:login-button
From Facebook Developer Wiki
Contents |
Description
Renders a Facebook Connect login button image on your site. If the user is already logged in and has an active session, nothing is rendered (unless the autologoutlink attribute is specified).
The easiest way to style the button is to use the Facebook Connect Wizard.
If you are adding this tag to your code without the wizard, you can specify the text in one of two ways:
- By wrapping the text within the fb:login-button tags. Don't include the length attribute. If you are translating your Facebook Connect site, you can translate the text for your login button by wrapping the text in fb:intl tags.
- By specifying a length attribute. Use
length="short"for the text label Connect only orlength="long"for the text label Connect with Facebook. If you are translating your Facebook Connect site, you can translate the login button and all other Facebook Connect features by including the locale when you call the FeatureLoader script, as in:<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA" type="text/javascript"> </script>
Note: While Facebook recommends you use XFBML to render a login button, we don't require it. You can render the button manually by referencing this CSS on your page: http://www.facebook.com/css/connect/connect_button.css, then specifying the desired image from the style sheet as the class. For example:
If you are building with Facebook Connect for iPhone, use these buttons.
Attributes
| Required | Name | Type | Description | |
| optional | condition | string | Indicates whether the button is visible or hidden. See the Notes below for further explanation. | |
|---|---|---|---|---|
| size | string | Specifies the size of the button. Specify icon to display a favicon only, or small, medium, large, or xlarge. (Default value is medium.) | ||
| autologoutlink | bool | If true and the user is already connected and has a session, then the button image changes to indicate the user can log out. Clicking the button logs the user out of Facebook and all connected sessions. (Default value is false.) | ||
| background | string | Specifies the button image to use that is anti-aliased to match the background of your site -- whether it's pure white, light, or dark. Specify white, dark, or light. (Default value is light.)Note: You don't specify this attribute if you are using v="2". | ||
| length | string | Specifies which text label to use on a button with size specified as small, medium, large, or xlarge. Specify short for the text label Connect only or long for the text label Connect with Facebook. If you are rendering the login button text by including it within the fb:login-button tags, you don't specify a length at all. (Default value is short.) | ||
| onlogin | string | JavaScript code to execute when the user gains a Facebook session (that is, after logging into Facebook and authorizing the site). | ||
| v | string | Specify "2" to use the latest Facebook Connect login buttons, (examples available in the Facebook Connect wizard). Don't use the attribute if you need to use the original Facebook Connect login buttons. |
Examples
This tag is ready to be translated. You can also get the code for this login button using the Facebook Connect Wizard:
 |
The default button looks like this:
 |
Notes
Using the condition Attribute
All XFBML tags support the condition attribute. This attribute determines whether an XFBML element is visible or hidden. When condition is absent, the element is visible by default. The value of condition should be a string containing some JavaScript code. The JavaScript should be evaluated into either a boolean or an FB.Waitable object whose result field is a boolean. The FB.Waitable object is designed to allow asynchronous evaluation. For example, if you want to specify an element should be visible only if the current users can see the profile of another user, you can use this markup:
The following are some pre-built condition objects.
