Facebook Connect Login Buttons

From Facebook Developer Wiki

Jump to: navigation, search

The Facebook Connect login button rendered by fb:login-button can be customized to suit your site.

The easiest way to style the button is to use the Facebook Connect Wizard.

Note: If you're developing a Facebook Connect for iPhone app, use the buttons below.

[edit] Rendering the Button Manually

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 file 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:

<a href="#" onclick="FB.Connect.requireSession(); return false;" class="fbconnect_login_button FBConnectButton FBConnectButton_Small"> <span id="RES_ID_fb_login_text" class="FBConnectButton_Text">Connect with Facebook</span> </a>

[edit] Facebook Connect for iPhone Buttons

If you're developing a Facebook Connect for iPhone app, use the following buttons. For usage guidelines, read the Facebook Connect for iPhone policies.

  • Image:connect_iphone.png: Use either this image or the Connect with Facebook image to connect users.
  • Image:connect_with_facebook_iphone.png: Use either this image or the Connect image to connect users.
  • Image:logout_iphone.png: Use this image as the button to let your connected users log out of your site and Facebook.
reference