soderlind.no

My favorite Remote Desktop for Mac OS X has finally gotten an update. New Features are:

More…

Ex Libris is a “this book I’ve read” application targeting the Norwegian Facebook community. On Ex Libris you can search for books written in and translated to Norwegian. You can add them to your book list, comment, recommend and rate books.

Coding Ex Libris was fun. It’s written in PHP and uses FBML, FBJS, Ajax, PHP MySQL wrapper, CSS The Star Matrix Pre-loaded and Bayesian Rating

As I said, it’s targeting the Norwegian Facebook community and hence in Norwegian. You’ll find it at http://apps.new.facebook.com/exlibris/

I’ve written an ajax rating snippet, you’ll find a demo at http://apps.new.facebook.com/ajaxrating/

It is based on Paul OB’s CSS Star Matrix Pre-loaded

The source code below, should be self explanatory, but if you need input on how to do fbjs ajax, you’ll find documentation and examples over at the facebook development site

< ?php
// the $callbackroot MUST point to your server, if you point it to your app.new.facebook.com/APPLICATION, ajax will fail.
$callbackroot='http://[PLACE_YOUR_CALLBACK_URL_HERE]'; // do not add a trailing slash e.g.: http://myserver.domain.com
//AJAX Response (should be first php or in a separate php file):
if (isset($_REQUEST['rate'])) {
    //do something and return "ok" if things are fine
    echo "ok";
    exit; //Important! Stops remaining php after AJAX request is processed
} 

//what ever apicall you use to authenticate, this one is from smiley: http://svn.facebook.com/svnroot/platform/samples/packages/smiley.tar.gz
$fb = get_fb();
$user = $fb->require_login();

?>
<!--  see rate.css below -->
<link rel="stylesheet" type="text/css" href="<?=$callbackroot?>/rate.css" />
<script type="text/javascript">
function save_rating(rate) {
    // array with the class names, used when you add the new class
    var ratings = [ "nostar", "onestar", "twostar", "threestar", "fourstar", "fivestar" ];
    var ajax = new Ajax();
    ajax.responseType = Ajax.RAW;
    ajax.ondone = function(data) {
        if (data == "ok") {
            // remove old class names (I don't know which one, so I remove all of them), and add the new
            document.getElementById('rating_1').removeClassName('nostar').removeClassName('onestar').removeClassName('twostar').removeClassName('threestar').removeClassName('fourstar').removeClassName('fivestar').addClassName(ratings[rate]);
        } else {
            new Dialog().showMessage('Dialog', 'set rating failed');
        }
    }
    ajax.onerror = function() {
        new Dialog().showMessage('Dialog', 'set rating failed');
    };
    ajax.requireLogin = 1;
    var params={"rate":rate };
    ajax.post('< ?=$callbackroot?>/rate.php',params);
}
</script>

<ul id="rating_1" class="rating nostar">
<li class="one"><a href="#" title="1" onclick="save_rating(1); return false;">1</a></li>
<li class="two"><a href="#" title="2" onclick="save_rating(2); return false;">2</a></li>
<li class="three"><a href="#" title="3" onclick="save_rating(3); return false;">3</a></li>
<li class="four"><a href="#" title="4" onclick="save_rating(4); return false;">4</a></li>
<li class="five"><a href="#" title="5" onclick="save_rating(5); return false;">5</a></li>
</ul>

A how-to and the rate.css are located at http://forum.developers.facebook.com/viewtopic.php?id=22547