Tag Archives: xfbml

Feb200912

Hasin Hayder

3

tips for successful XFBML rendering

if you are creating a FBConnect application and suffering from unexpected result of XFBML renedeing in your application, here is a cool tip for you. always close yoour tag in <tag></tag> style and not like <tag/>. check out the following example for the differnece  – :) 


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<div id="users"></div>
<fb:login-button></fb:login-button>
<script type="text/javascript">
 function renderXfbml(uid) {
 			document.getElementById("users").innerHTML = "<fb:name uid='loggedinuser' useyou='false' /> has sent a gift to <fb:name uid='1009983642' />";
 			FB.XFBML.Host.parseDomTree();
 	 	}
 FB.init("5b8d7fcc4d851e29908620757be663d1", "http://sandbox.ofhas.in/fbtest/xd_receiver.htm", {"ifUserConnected" : renderXfbml});
</script>
</body>
</html>

the output looks like the following one, which is no way an expected one – but the XFBML used in the example above is totally valid. it must show something like Hasin Hayder has sent a gift to Rajeeb Khan

picture-161

Now check out the revised XFBML block in the following example. 


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<div id="users"></div>
<fb:login-button></fb:login-button>
<script type="text/javascript">
 function renderXfbml(uid) {
 			document.getElementById("users").innerHTML = "<fb:name uid='loggedinuser' useyou='false'></fb:name> has sent a gift to <fb:name uid='1009983642'></fb:name>";
 			FB.XFBML.Host.parseDomTree();
 	 	}
 FB.init("5b8d7fcc4d851e29908620757be663d1", "http://sandbox.ofhas.in/fbtest/xd_receiver.htm", {"ifUserConnected" : renderXfbml});
</script>
</body>
</html>

and the output produced by the code above is perfect!

picture-17

hope you will take care of this issue and prevent yourself from stumbling. happy FBConnecting

Feb200910

Hasin Hayder

10

displaying a “friend selector” in FBConnect application – a custom component for you

ok, i have learned my lesson while integrating <fb:multi-friend-selector [condensed] /> and <fb:multi-friend-input /> in an iFrame app where i was rying to render it uwing <fb:serverfbml>. i was designing a page where users of your application can select an item, then some of their friends and finally submit the form to the handler script (might be javascript routine too!)

as <fb:serverfbml /> renders the <fb:request-form /> inside another iframe (thats right – iframe inside an iframe) so its quite tough job to pass external data to any of the DOM element inside those iframe. later, i tried to dynamically render the <fb:serverfbml /> with the help of AJAX and XFBML.parseDOMTree() but no luck. the surprising fact that everything out there was renedring properly but not the request form (when returned via ajax). so finally i did it with FQL and by building a custom friend selector component. so here it is


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Friend Selector</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<fb:login-button></fb:login-button><br/><br/>
Hello <span id="me" uid="503274632" useyou='false'></span> And here is your friend list<br/>

<div id="friends"></div>
</body>
</html>
<script type="text/javascript"> 

function loadFriends(uid) {

    FB.XFBML.Host.autoParseDomTree = false;
    FB.XFBML.Host.addElement(new FB.XFBML.Name(document.getElementById("me")));

    FB_RequireFeatures(["CanvasUtil"], function(){  FB.CanvasClient.startTimerToSizeToContent(); });
    var api = FB.Facebook.apiClient;
    api.fql_query("SELECT uid, first_name, last_name FROM user WHERE  uid IN (SELECT uid2 FROM friend WHERE uid1 = "+uid+") order by first_name", function(result, ex) {

        data = "<table>";
        for (i=0;i<result.length;i++)
        {
            data += "<tr><td><input type='checkbox' value='"+result[i].uid+"' name='friends[]' id = 'friend"+result[i].uid+"' /></td><td>"+ result[i].first_name + " " + result[i].last_name+"</td></tr>";
        }
        data +="</table>";
        $('#friends').css({"overflow-y":"scroll","height":"200px","width":"300px","border":"1px solid #ccc"});
        $('#friends').html( data);

    });
}

FB.init("api_key", "xd_receiver.php",{"ifUserConnected":loadFriends});

</script>

and here is how it looks,

picture-151

you will find it useful in your FBConnect applications :)

Feb200903

Mahmud Ahsan

9

fbml rendering in iframe application

before proceeding the main topic, at first i want to describe how to develop iframe based facebook application. i assume that, the reader have minimum knowledge of how to develop canvas based facebook application. if you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/creating_your_first_application

steps of developing iframe based facebook application:

1. when you setup a new application in facebook, choose “use iframe” for canvas page url.
2. now set the authentication code, at your bootstrap file:


<?php
include “facebook.php”;
$facebook = new facebook(’api_key’, ’secret_key’);
$user = $facebook->require_login();

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isappadded()) {
$facebook->redirect($facebook->get_add_url());
}
}
catch (exception $ex) { //this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect(callback_url);
}
?>

3. and don’t forget to place the necessary facebook php library. http://wiki.developers.facebook.com/index.php/php

now i’m describing the main topic, that is how to render xfbml or fbml in your iframe based application.

1. first create a file called xd_receiver.htm
2. place xd_receiver.htm in the root directory. suppose your application base directory is: http://myapp.com/iframeapp . then place xd_receiver.htm in iframeapp folder. now add the following html code to xd_receiver.htm .


<!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” >
<head>
<title>cross-domain receiver page</title>
</head>
<body>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/xdcommreceiver.debug.js” type=”text/javascript”></script>
</body>
</html>

now in your view file, or may be layout file, place this code. here i’m showing the layout files format for iframe application.


<!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:fb=”http://www.facebook.com/2008/fbml”>

<head>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/featureloader.js.php” type=”text/javascript”></script>

</head>

<body>

<!– here is the fbml code in iframe application –>

<fb:serverfbml>
<script type=”text/fbml”>
<fb:fbml>

<fb:request-form action=”<url for post invite action, see wiki page for fb:request-form for   details>” method=”post” invite=”true” type=”xfbml” content=”this is a test invitation from xfbml test app <fb:req-choice url=’see wiki page for fb:req-choice for details’ label=’ignore the connect test app!’ />  ” >  <fb:multi-friend-selector showborder=”false” actiontext=”invite your friends to use connect.”>  </fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>

<!– here is the xfbml code –>


this is <fb:name uid=”<?=$this->userid?>” useyou=’false’> </fb:name>
my photo <fb:profile-pic uid=”<?=$this->userid?>” > </fb:profice-pic>

<!– remember all xfbml tags should be placed before below javascript code –>

<script type=”text/javascript”>
fb_requirefeatures(["xfbml"], function(){
fb.facebook.init(”place here the api key of your application“, “xd_receiver.htm”);
});
</script>

</body>

</html>

** remember xfbml is nothing but a subset of fbml that are supported for iframe application.

<fb:serverfbml> : this tag is used to renders the fbml on a facebook server inside an iframe. details of this tag is here: http://wiki.developers.facebook.com/index.php/fb:serverfbml

references:

1. http://wiki.developers.facebook.com/index.php/xfbml
2. http://wiki.developers.facebook.com/index.php/cross-domain_communication_channel
3. http://wiki.developers.facebook.com/index.php/php
4. http://wiki.developers.facebook.com/index.php/creating_your_first_application