Add a Social Leaderboard to your HTML5 Game

We’ll be using Bebo, a mobile platform that lets you take websites and wrap social layers around it. Find out more info HERE

1) Setup the Bebo SDK — add this snippet to your index.html

<script>
  (function(_b,e,b,o){_b.Bebo={b:[],onReady:function(cb){this.b.push(cb)}}
    var s=e.createElement(b);s.type='text/javascript';s.async=1;s.src=o;
    var x=e.getElementsByTagName(b)[0];x.parentNode.insertBefore(s,x);})
  (window,document,'script','https://widgets.bebo.com/bebo.min.js');
</script>

2) Add Leaderboard.js to your index.html

<script type=”text/javascript” src=”https://widgets.bebo.com/leaderboard.min.js”></script>

3) Initialize Bebo — in your javascript code

Bebo.onReady(function(){
    // Bebo is initialized
});

4) Setup the Leaderboard

function someoneScored(data){
    var score = data.score;
    var username = data.username;
    var user_id = data.user_id;
    if(user_id === Bebo.User.getId()){
        //i got a score
    }else{
    }
}
function someoneGotAHighScore(data){
    var score = data.score;
    var username = data.username;
    var user_id = data.user_id;
    if(user_id === Bebo.User.getId()){
        //i got a high score
    }else{
    }
}
Bebo.onReady(function(){
    Leaderboard.setOnScore(someoneScored);
    Leaderboard.setOnHighScore(someoneGotAHighScore);
});

Leaderboard.setOnScore
This function executes when someone submits a score. These are real time events so they only get called when another player is playing at that moment. Use these events to display a real time leaderboard.

Leaderboard.setOnHighScore
This function executes when someone submits a high score. These are also real time events (like above). Use this to signal a high score for the player, or so show other players reaching their high score.

5) Submit Scores

var score = 100;
Leaderboard.setScore(score);

Use this when a player submits a score. The score is only saved if it’s a high score. When you set the score, the events we setup above (onScore and onHighscore) are also fired.

You’re all setup!

The basic setup is now there for the leaderboard. Each score is saved in the Bebo Database. The database is setup so that it is scoped within a server on Bebo.

Source code available on Github

Let me know if you find this interesting or if you have any other questions or comments. Always available on Twitter: @furqanr