Tag Archives: FB Connect

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

Feb200911

Saidur Rahman

3

dealing with ajax on FBConnect

problem :
need to store users information by ajax call while on connect . but face problems using fbjs ajax calls using on connect .some times face the problem to send ajax request  in the forum also get related type of problems . like:

http://forum.developers.facebook.com/viewtopic.php?id=28153
http://forum.developers.facebook.com/search.php?search_id=92171720

let’s see a quick solution by a common example.

solution:

here we look at the after connect get user profile picture and name by connect.

we create a script connect.php and include the  config  file .connect.php


<?php
/*
* include config file
*/
?>

<div id="user"> </div>
<fb:login-button onlogin="update_user_box();"></fb:login-button>
<script type="text/javascript">FB.init("key", "xd_receiver.php"); </script><span style="display: block; padding-left: 6em;"><span>

now it’s look like that:

fb_conn_ajax
here in the connect button add onlogin function update_user_box().while click on connect then this function will call and update user by profile picture and name in the user id div.

in that update_user_box() function we will get the profile picture and name by calling ajax. So later on we can do anything by ajax.to call the ajax we will do it by jquery. Here I cannot do it by the fbjs  ajax method. For that reason I add jquery and other scripts.


<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>

now update update_user_box


<script type="text/javascript">
function update_user_box()

{

Var url = “http://www.t...com.display.php”; // ajax url which is here display.php

$.ajax({
type: "POST",
url:url,
data: "save=yes",
success: function(msg){
var user_box = document.getElementById("user");
user_box.innerHTML =msg;

}
});
}

now create the display.php Which call by ajax.

In the display php also include config file which include facebook client library

here is code

<?php
define(MAIN_PATH, realpath('.'));
include_once MAIN_PATH.'/init.php';
$fb_uid = facebook_client()->get_loggedin_user();
echo '<span> <fb:profile-pic uid='.$fb_uid.' facebook-logo=true></fb:profile-pic> Welcome, <fb:name uid='.$fb_uid.' useyou=false></fb:name>. You are signed in with your Facebook account.</span>';</span></span></span></span>

?>
<span style="display: block; padding-left: 6em;"><span>

this display.php returns the user profile picture and name. and it’s look like that.

fb_conn_ajax3

that’s it :)

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 :)