Fb:login-button

From Facebook Developer Wiki

Jump to: navigation, search

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).

Note: While Facebook recommends you use XFBML to render a login button, we don't require it. You can render the button manually by choosing the appropriate image and then using the code below. You must use a Facebook-provided image for the Connect button.

<a href="#" onclick="FB.Connect.requireSession(); return false;" > <img id="fb_login_image" src="http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_medium_long.gif" alt="Connect"/> </a>


Attributes

RequiredNameTypeDescription
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 small, medium, or large. (Default value is large.)
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.)
length string Specifies which text label to use on a button with size specified as medium or large. Specify short for the text label Connect only or long for the text label Connect with Facebook. (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).


Examples

Check out XFBML login tags in action. The default button looks like this:

<fb:login-button></fb:login-button>
Image:connect_light_medium_short.gif


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:

<fb:container condition="FB.XFBML.Conditions.ifCanSee('1160', 'profile')"> <span>This text should be visible only if I can see the profile of user 1160.</span> </fb:container>


The following are some pre-built condition objects.

reference