Change background color when user logs in and out - facebook

Question

Site could be found at http://trade.edicy.co/
Currently, it has the most basic implementation of the FB log-in button that automatically turns into a log out button after authentication. Now I want the background to change color once the user logs-in and revert back after the user logs-out.
Also is it possible to move the position and size of the Facebook picture far from the log-in button after log-in?
Thanks in advance.

Answer 1

You can capture the auth.statusChange event via the FB.Event.subscribe function of the JS SDK. See https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/#login-logout for a description. Additionally, you can have a look at https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
For example
var loginCallback= function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
document.body.style.background = "red";
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
document.body.style.background = "green";
}
}
// In your onload handler add this call
FB.Event.subscribe('auth.statusChange', loginCallback);