Graph API Version

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

Name Type Description

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

Vector

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]

comment.create and .remove

// In your HTML, include the comments plugin
<div
  class="fb-comments"
  data-href="https://url.to.your-page/page.html"
  data-numposts="5"
  data-colorscheme="light">
</div>

// In your onload method
FB.Event.subscribe('comment.create', comment_callback);
FB.Event.subscribe('comment.remove', comment_callback);

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

When creating or removing a comment, you will get the following response:

"comment_callback"
[object Object]