Facebook Connect Login Buttons

From Facebook Developer Wiki

Revision as of 21:52, 29 October 2009 by Pete Bratach (Talk | contribs)
(diff) ←Older revision | Current revision (diff) | Newer revision→ (diff)
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.

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>

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