To simplify your code, make sure to include the script reference only once and call init on the script when the page loads. Whether you are using the fb:like buttons or the login script, this method will work for both.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow server access
xfbml : true // parse XFBML
});
</script>
The crucial step is to set xfbml to true (this is equivalent to #xfbml=1). Without this setting, the like buttons will not render correctly.
If you wish to subscribe to the login event, simply add the following script after the FB.init() call:
FB.Event.subscribe('auth.login', function(response) {
window.location.reload(); // or any other action...
});
Below is the login script that will be triggered ONLY when a user clicks on a link, button, etc.
function doLogin() {
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// User is logged in and has granted permissions.
// Perms is a list of granted permissions
} else {
// User is logged in but did not grant any permissions
}
} else {
// User is not logged in
}
}, {perms:'read_stream,publish_stream,offline_access'});
}