I wanted to display my facebook notification information on my personal home screen.
I ended up with a single HTML file which I have hosted on Google Drive and embedded in an iframe in my personal home screen on Google Sites.
The end result is a single line where the numbers change if there are any notifications to report.
<html><head><title>Facebook Quick Check</title></head><body>
<style type="text/css">
body { margin: 0px; }
</style>
<div id="fb-root"></div>
<div>
<span id="login"><a href="javascript:doLogin()">FB Login</a>: </span>
Notice (<span id="notice">...</span>)
Friend (<span id="friend">...</span>)
Inbox (<span id="inbox">...</span>)
<a href="javascript:loadStatus()">refresh</a>
</div>
<div id="out"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
I wanted a fluent API that felt like Google Apps Script server calls instead of the regular Facebook API, so I made a quick one…
function FBRun(parent) {
this.successHandler = parent ? parent.successHandler : function(result) { };
this.errorHandler = parent ? parent.errorHandler : function(result) { };
};
FBRun.prototype.withSuccessHandler = function(handler) {
var obj = new FBRun(this);
obj.successHandler = handler;
return obj;
};
FBRun.prototype.withErrorHandler = function(handler) {
var obj = new FBRun(this);
obj.errorHandler = handler;
return obj;
};
FBRun.prototype.getHandler = function() {
var obj = this;
return function(response) {
if(!response || response.error) {
return obj.errorHandler(response);
}
return obj.successHandler(response);
}
};
FBRun.prototype.get = function(url, data) {
FB.api(url, 'get', data, this.getHandler());
return this;
};
FBRun.prototype.login = function(data) {
FB.login(this.getHandler(), data);
return this;
}
FBRun.prototype.loginStatus = function() {
FB.getLoginStatus(this.getHandler());
return this;
}
fbrun = new FBRun();
Load the Facebook API and check the login status on success…
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: 'APPLICATION_KEY',
});
fbrun
.withSuccessHandler(onLogin)
.loginStatus();
});
});
The code for the login link…
function doLogin() {
fbrun
.withErrorHandler(display)
.withSuccessHandler(onLogin)
.login({scope: 'manage_notifications,read_requests,read_mailbox'});
}
var perms = {};
function onLogin(response) {
if(response.status === 'connected') {
fbrun
.withErrorHandler(display)
.withSuccessHandler(function(response) {
perms = response.data[0];
if(perms.manage_notifications && perms.read_requests && perms.read_mailbox) {
$('#login').hide();
}
start();
})
.get('/me/permissions');
}
}
function display(response) {
$('#out').text(JSON.stringify(response));
}
Load the information and start the refresh timer…
function start() {
loadStatus();
if(start.active) {
return;
}
start.active = true;
function check() {
loadStatus();
setTimeout(check, 600000);
}
setTimeout(check, 600000);
}
function loadStatus() {
if(perms.manage_notifications) {
$('#notice').text('...');
fbrun
.withErrorHandler(display)
.withSuccessHandler(function(response) {
if(response.summary.unseen_count != undefined) {
$('#notice').text(response.summary.unseen_count);
} else {
$('#notice').text("0");
}
})
.get('/me/notifications', { limit: 0 });
} else {
$('#notice').text('-');
}
if(perms.read_requests) {
$('#friend').text('...');
fbrun
.withErrorHandler(display)
.withSuccessHandler(function(response) {
$('#friend').text(response.summary.unread_count);
})
.get('/me/friendrequests', { limit: 0 });
} else {
$('#friend').text('-');
}
if(perms.read_mailbox) {
$('#inbox').text('...');
fbrun
.withErrorHandler(display)
.withSuccessHandler(function(response) {
$('#inbox').text(response.summary.unseen_count);
})
.get('/me/inbox', { limit: 0 });
} else {
$('#inbox').text('-');
}
}
</script>
</body></html>
Update: limit the data returned to just the summaries by setting the item limit to zero.