the namespace and methods are inconsistent in the way that they are named and used. To access the apiClient, you must use FB.Facebook.apiClient.
In short. Instead of calling:
FB.apiClient.get_apiKey();
call:
FB.Facebook.apiClient.get_apiKey();
Below, I have included a complete example, where I worked out several methods on the Connect and ApiClient APIs. This is working as of 1/22/09.
<!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">
<body>
<a target="_blank" href="http://developers.facebook.com/docs/?u=facebook.jslib">Facebook JavaScript API Documentation</a>
<div id="comments_post">
<h3>Post a comment to your Facebook Feed:</h3>
Demonstration to show what can be done with Facebook Connect, using the javascript API
<form name="comment_form" method="POST">
<div id="user">
Name: <input name="name" size="27"><br />
<fb:login-button length='long' onlogin="update_user_box();"></fb:login-button>
</div>
<br /><textarea name="comment" rows="5" cols="30"></textarea>
<br /><input type="button" onclick="submit_comment();" value="Submit Comment">
<br /><input type="button" onclick="updateStatus();" value="updateStatus">
<br /><input type="button" onclick="updateStatusWithImage();" value="updateStatusWithImage">
<br /><input type="button" onclick="postToFriendsWall();" value="postToFriendsWall">
<br /><input type="button" onclick="postAnImage();" value="postAnImage">
<br /><input type="button" onclick="alert(FB.Connect.get_loggedInUser());" value="get logged in user id">
<br /><input type="button" onclick="getFriends()" value="get friends">
<br /><input type="button" onclick="getEventMembers()" value="get event members">
<br /><input type="button" onclick="getEventInfo()" value="get event info">
<div id="profile_pics"></div>
</form>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
+ "Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>"
+ "</span>";
FB.XFBML.Host.parseDomTree();
}
function update_user_not() {
}
function submit_comment() {
comment_text = document.getElementsByName("comment")[0].value;
var template_var = { "post-title": "pakt.com",
"post-url": "http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_website",
"comment-text": comment_text,
"images": [{ "src": "http://images.pakt.com/images/user/chris/thumb_chris_5df0eb914796c68.jpg", "href": "http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_website"}]
};
FB.Connect.streamPublish(comment_text);
}
function ClearComments() {
document.getElementsByName("comment")[0].value = "";
}
function updateStatus() {
FB.Connect.streamPublish();
}
var attachment = { 'media': [{ 'type': 'image',
'src': 'http://bit.ly/AJTnf',
'href': 'http://bit.ly/hifZk'}]
};
function updateStatusWithImage() {
FB.Connect.streamPublish('', attachment);
}
function postToFriendsWall() {
FB.Connect.streamPublish('enjoying the Facebook javascript API much better than other versions', attachment, null, 1578234238);
}
function postAnImage() {
function stream_callback(post_id, exception) {
if (post_id) {
post_to_my_server(post_id);
}
}
FB.Connect.streamPublish('', attachment, null, null,
'What do you think?',
stream_callback);
}
function getLoggedInUser() {
var id = FB.Connect.get_loggedInUser();
alert(id);
}
function getFriends() {
var widget_div = document.getElementById("profile_pics");
FB.ensureInit(function() {
FB.Facebook.apiClient.friends_get(null, function(result) {
var markup = "";
var num_friends = result ? Math.min(10, result.length) : 0;
if (num_friends > 0) {
for (var i = 0; i < num_friends; i++) {
markup +=
'<fb:profile-pic size="square" uid="'
+ result[i]
+ '" facebook-logo="true">'
+ ' </fb:profile-pic>';
}
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
}); //end of friends_get
}); //end of ensureInit
}
function getEventMembers() {
var widget_div = document.getElementById("profile_pics");
FB.ensureInit(function() {
FB.Facebook.apiClient.events_getMembers(53288226963, function(result) {
var markup = "";
var num_friends = result ? Math.min(10, result.attending.length) : 0;
if (num_friends > 0) {
for (var i = 0; i < num_friends; i++) {
markup +=
'<fb:profile-pic size="square" uid="'
+ result.attending[i]
+ '" facebook-logo="true">'
+ ' </fb:profile-pic>';
}
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
}); //end of friends_get
}); //end of ensureInit
}
//this one doesn't work. don't know why yet.
function getEventInfo() {
var widget_div = document.getElementById("profile_pics");
var eids = new Array();
eids.push(53288226963);
FB.Facebook.apiClient.events_get('', eids, 0, 0, 'attending', function(result) {
var markup = "";
var num_friends = result ? Math.min(10, result.attending.length) : 0;
if (num_friends > 0) {
for (var i = 0; i < num_friends; i++) {
markup +=
'<fb:profile-pic size="square" uid="'
+ result.attending[i]
+ '" facebook-logo="true">'
+ ' </fb:profile-pic>';
}
}
widget_div.innerHTML = markup;
FB.XFBML.Host.parseDomElement(widget_div);
}); //end of friends_get
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "de57fdca3c665931e2a6b411f90a1cb4";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, { "ifUserConnected": update_user_box });
</script>
</body>
</html>