JavaScript SDK: .Event.subscribe()

This method allows you to subscribe to a range of events, and define callback functions for when they fire.

FB.Event.subscribe(event, callback)

Examples

edge.create and .remove

Here's an example of a callback that can handle either the edge.create or edge.remove event:

var page_like_or_unlike_callback = function(url, html_element) {
  console.log("page_like_or_unlike_callback");
  console.log(url);
  console.log(html_element);
}

// In your onload handler
FB.Event.subscribe('edge.create', page_like_or_unlike_callback);
FB.Event.subscribe('edge.remove', page_like_or_unlike_callback);

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 in:

"logout_event"
"unknown"
[object Object]

You will get the following console output when logging out:

"login_event"
"connected"
[object Object]

comment.create and .remove

// In your HTML, include the comments plugin
<div
  class="fb-comments"
  data-href="http://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]

message.send

// In your HTML
<div class="fb-send" data-href="http://url.to.your.page/page.html" data-colorscheme="dark"></div>

// In your onload method
FB.Event.subscribe('message.send', message_send_callback);

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

When run, this will result in the following output to your console:

"message_send_callback"
"http://url.to.your.page/page.html"