Note: I tested the issue and the solution using Windows Opera 11.01 build 1190 and confirmed the fix works. The Problem Calls to FB.api never executed their callbacks. For instance, in this code, Firefox and Chrome prints: window.fbAsyncInit (from line 4) and onGetLoginStatusResponse (from line 33), but Opera 11.01 only prints the window.fbAsyncInit. Fixing It […]

To check whether a particular user likes your Page or App, you can use this Graph API call /me/likes, after the user is logged in to your application. You need the page id or application id to check against.   Your application also needs to have an extended permission named user_likes to retrieve a list […]

This post will show you how to retrieve a list of the user Likes (i.e.: list of Applications, Pages that the user has clicked the Like button). You need to be familiar with setting up a Facebook Application and using the JavaScript Graph API to follow this tutorial. For an overview of the Graph API, […]

This guide assumes familiarity with setting up application susing Facebook Open Graph API in JavaScript, which is explained here: /blog/2010/11/facebook-open-graph-api-authenticating-in-iframe-applications/ Simple List To get the list of friends using Open Graph API, you can call: after the user is authenticated. Example: Note: FB.api(‘/me/friends’, onFriendsListLoaded) sends the request to Facebook and onFriendsListLoaded is the callback function. […]

The latest Facebook API, dubbed Open Graph API , is a powerful replacement to the old API. However, the documentation (in particular regarding authentication) is not very clear. Hopefully this will help you get up to speed with what it takes to authenticate users. This tutorial assumes that you have already setup your application on […]

This is a general outline of how to utilize HTML5 Canvas to do animation using the traditional cell-animations, aka: image-strips. Here’s the image that I am using for this example; as you can see, it consists of 8 frames of equal width. It’s an animation of someone walking, shows in a top-down view. To draw […]

In this tutorial, we will demonstrate methods of saving the content of a HTML5 Canvas object using server side scripting. PHP will be used in this example, but the technique can be applied in other languages as well. This post requires understanding of Javascript, HTML (especially forms and/or AJAX). PHP is used in the example […]

Continuing from: Base class for the objects in the game. Let’s consider what objects will be in our game. I can think of three-types: Player ship Enemy ship Bullet These objects have in commons these charateristics: They all have positions. They all can move (needs speed variable). Let’s call the base class GameObject from […]


Building from Part 1, 2, and 3, we’re now ready to create a canvas overlay that sits above a html page, and where user can draw on.  Here are the steps that we will use: Step 1: Create the canvas. Step 2: Create a function that draws on the canvas based on the mouse position. […]

For your reference, here’s Part 1 and Part 2. If the example doesn’t work, it was because Part 1 and 2 uses the same variables. Open this guide as a separate page to fix it. Also remember that you need a browser that supports Canvas, such as Firefox 3. Before you start drawing lines, you […]

We learned how to create Canvas objects in Part 1, and we also learned how to draw a simple shape on Part 1. You need a browser that support Canvas such as Firefox 3 to run the examples.   Now it’s time to show how to crate a canvas that “overlays” your web-page. By overlay, […]


Here’s a silly demo I made with HTML 5 Canvas object. You need a browser that supports Canvas such as Firefox 3. Warning: you will need to use the browser’s Back button to navigate away from the page. See the tutorial.