Ajax Tutorial With Fbjs In Facebook Application


Original source: http://buzzknow.com/2010/03/13/ajax-tutorial-with-fbjs-in-facebook-application/

Facebook has set the programming language of their own property diadapsi from other types of programming languages. Examples are JavaScript turned into FBJS (Facebook JavaScript). This change makes some standard function can not walk, such as the innerHTML is replaced with setInnerFBML.

Therefore here we will try to run AJAX through FBJS. The example is here is simple, you can develop further through the article in http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax.

Make sure you register as develepor Facebook, to get the API Key and Secret API. Read the article “http://buzzknow.com/2010/03/04/creating-a-simple-facebook-application-tutorial-with-php/” for more information.

The first step you need to create a function to run on FBJS AJAX, here we use the function “go_ajax“. Here’s the code, save as “index.php” in your canvas url.

URL used as a callback to be “absolute path” or easier to use the full URL of your domain name. Here are a few things to note from the process on FBJS AJAX.

  • Note that url must be full, absolute path to file on your server — not a canvas page (apps.facebook…).
  • One you should note that there is no “setInnerHtml” call in FBJS for security reasons. If you want to add dynamic HTML you must add it on the server side and pass it using the setInnerFBML call. (Beta. You can now use setInnerXHTML to pass HTML back from Ajax calls. You can also use FBJS_LocalProxy to bypass the Facebook server hop.)
  • Don’t pass HTML with setTextValue because it won’t work.
  • Ajax has an apparent short ~10 second max timeout! –Does anyone have an alternative for queries that may take longer for some users?
  • Be aware of silent 5000 byte size limit to JSON replies if JSON is not perfect (use json_encode to avoid this bug) http://bugs.developers.facebook.com/show_bug.cgi?id=363
  • Ideally the url will point to a non-static location that has content sent through some form of CGI. In formal language, the url must respond to a request for application/x-www-form-urlencoded content.
  • When using JSON and setInnerFBML, the prefix of the FBML parameter has to be ‘fbml_’. The parameter will then be sanitised, and passed on to setInnerFBML.

Currently, only FBJS able to send POST data, so I suggest the script callback to use the variable $ _REQUEST to obtain data that is sent. Then for the server side, we will only make a simple script that will restore the data that is sent. Copy this code and save as “callback.php“.

When you running this script, then server will return data in array with alert javascript.  For demo check my music application in http://apps.facebook.com/mpthreeecho/, I’ve use it for “send to friend” feature. Hopefully this article can help in running the AJAX in your Facebook applications.

Recommended for you

Leave a Reply