Facebook Cookbook

how to trigger multiple onload functions when divs are loaded by FBJS

facing trouble to trigger multiple onload event to work FBJS does not allow acess to the window object. So how can onload event fire when <div> is loaded on canvas. also FBJS is executed after the entire page has been loaded. so really shouldn’t matter where you call the function within your canvas page file. however let’s see how can we trigger on load for multiple div.

In this example we create two div which load by onload. One <div=’msg’> is for content a message and another <div=’ ajax’> which load the value by ajax way.

For that reason in FBJS we create a varraible array and pushing two functions on that array variable.

var onload = [];

onload.push(function() {
//ONLOAD STUFFS HERE
msg_laod();
do_ajax();

});

</script>

now we define the two functions. The message load function just simply display a text message on <div id=’msg’>. and do_ajax() function display the value by ajax call.

<script>
function msg_laod()
{
document.getElementById('msg').setInnerHTML('test message content');

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById('req').setInnerFBML(data);
}
ajax.requireLogin = 1;
ajax.responseType = Ajax.FBML;
ajax.post('http://www.techsmashing.com/banglakeyboard/adduser.php');
}            ajax.post(.....display.php'); // ajax callback url
}</script>

now we trigger on the onload event . by pushing functions into an array and executing them at the bottom of the page it ensures that the elements are indeed in the dom tree.  here we add setTimeout function to to make sure the browser is fully loaded. It allows 100 miliseconds. because the rest of the page to load (facebook footer and such).   increasing the 100 milisecond limit can solve some of these problems.

</p></p>

<script>
//the very last thing on the page
setTimeout (function() {
for(var a = 0;a < onload.length;a++) {onload[a]();}
}, 100);
</script>

in this way we can easily load onload functions in the div. we combine the whole code and looks like that:

<?php
include_once 'config.php';
?>
<script>
var onload = [];
onload.push(function() {
//ONLOAD STUFFS HERE
msg_laod();
do_ajax();

});

function msg_laod()
{
document.getElementById('msg').setInnerHTML('test message content');

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById('req').setInnerFBML(data);
}
ajax.requireLogin = 1;
ajax.responseType = Ajax.FBML;
ajax.post('ajax callback url');
}

</script>
<div id="msg" style="width:398px;height:298px;">test message content</div>
<div id="ajax" style="width: 398px; height: 298px;"> </div>

<script>
//the very last thing on the page
setTimeout(function() {
for(var a = 0;a < onload.length;a++) {onload[a]();}
}, 100);
</script>

reference :

http://forum.developers.facebook.com/viewtopic.php?id=5117

embedding google map in canvas

ever tried to embed static google map in your facebook application canvas? wait a bit, i think you are firing a question at me “whats the difference, its all the same, a static image, eh?” – nope! it wont work the way you think . whenever you try to embed a static google map image, google parse it as a “Bad Or Malformed” request and returns nothing! and in canvas url you can’t directly import any javascript but fbjs. so all we have to do is embed google map using a <fb:iframe /> object

enough said, lets see it in action. first try to embed a google static map in regular way and see the result.

<php
include_once("config.php");
?>
Here is the map of Dhaka <br/>
<img src='http://maps.google.com/staticmap?center=23.70991,90.407&amp;amp;zoom=14&amp;amp;size=400x300&amp;amp;key=<api_key>=23.7099,90.407,green' /> <br/>
Pretty cool, ya?

output is

Here is the map of Dhaka
Pretty cool, ya?

you will be surprised that this code will render only the texts and no image in your application canvas, though the image url is fully valid.

now here is the revised version using <fb:iframe />

<?php
include("config.php");
?>
Here is the map of Dhaka <br/>
<fb:iframe width='400' height='300' style='border:0' frameborder='0' src='http://sandbox.ofhas.in/fbtest/map.php?lat=23.7099&amp;amp;lon=90.407' ></fb:iframe>
<br/>
Pretty cool, eh?

we are using a map generator (map.php) using the latitude and longitude of a specific location, as the source of our iframe. so here is the source code of map.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Map Markers</title>
    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=<api_key>"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>), 13);

          var point = new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>);
          map.addOverlay(new GMarker(point));
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style='margin:auto;padding:0px;>
    <div id="map_canvas" style="width: 398px; height: 298px;margin:10 0;border:1px solid #ccc;"></div>
  </body>
</html>

this time output is pretty cool have a look

so this is it! in our next article we are coming with the complete source code of a standalone twitter like application, developed using FBConnect to allow you to monitor your friend’s status and also to change yours. stay tuned