Creating a Custom Login Button
From Facebook Developer Wiki
If you do not want to use XFBML to render the Facebook Connect login button, you can also create a login button manually in one of two ways:
- By choosing the appropriate image and manually wrapping it in an anchor tag with JavaScript.
- By using PHP with JavaScript the login code.
Wrapping the Login Button within an Anchor Tag
<!--
You can invoke FB.Connect.requireSession() to require a session. If a session already
exists, this call is a no-op. Otherwise, the user is prompted to connect their accounts.
-->
<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>
Because FB.Connect.requireSession takes a callback on state change, you can use it in a similar way to XFBML's onlogin:
FB.Connect.requireSession(function() { window.location='http://example.com'; });
Using PHP and JavaScript
<?php
if (!$fb->get_loggedin_user()) {
echo '<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>';
} else {
// display content for logged in user
}
?>
