Event Subscription

The method FB.Event.subscribe() allows you to subscribe to a range of events, and define callback functions for when they fire.

FB.Event.subscribe(event, callback)

Parameters

Examples

xfbml.render

This example will log when the page has finished rendering plugins:

var finished_rendering = function() {
  console.log("finished rendering plugins");
}

// In your onload handler
FB.Event.subscribe('xfbml.render', finished_rendering);

auth.authResponseChange and auth.statusChange

The following example shows how you can track these events with a simple Facebook Login button.

// In your HTML.  You must also initialize the Facebook JavaScript SDK
<fb:login-button autologoutlink="true"></fb:login-button>

// After your onload method has been called and initial login state has
// already been determined. (See above about not using these during a page's
// init function.)
FB.Event.subscribe('auth.authResponseChange', auth_response_change_callback);
FB.Event.subscribe('auth.statusChange', auth_status_change_callback);

// In your JavaScript
var auth_response_change_callback = function(response) {
  console.log("auth_response_change_callback");
  console.log(response);
}

var auth_status_change_callback = function(response) {
  console.log("auth_status_change_callback: " + response.status);
}

After logging in you will get the following response:

"auth_response_change_callback"          <-- auth response change
[object Object]                          <-- auth response change
"auth_status_change_callback: connected" <-- status change - connected == logged in

After logging out you will get the following response:

"auth_response_change_callback"        <-- auth response change
[object Object]                        <-- auth response change
"auth_status_change_callback: unknown" <-- status change - unknown == logged out

auth.login and .logout

In this shortened example, you can use a small HTML fragment and the FB.login() and FB.logout() methods to trigger these events.

// In your HTML:
<input type="button" value="Login" onclick="FB.login();">
<input type="button" value="Logout" onclick="FB.logout();">

// In your onload method:
FB.Event.subscribe('auth.login', login_event);
FB.Event.subscribe('auth.logout', logout_event);

// In your JavaScript code:
var login_event = function(response) {
  console.log("login_event");
  console.log(response.status);
  console.log(response);
}

var logout_event = function(response) {
  console.log("logout_event");
  console.log(response.status);
  console.log(response);
}

You will get the following console output when logging out:

"logout_event"
"unknown"
[object Object]

You will get the following console output when logging in:

"login_event"
"connected"
[object Object]