Hi folks,
I'm working on a Facebook Connect app. I have the Connect button up and running and users can successfully authenticate via Facebook. However, I'm having trouble getting their profile picture and name to display with XFBML. Here is what I'm doing:
<script type="text/javascript">
function fb_login_handler() {
var userbox = document.getElementById( "fb_userbox" );
userbox.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();
}
</script>
...
<div id="fb_userbox">
<fb:login-button onlogin="fb_login_handler();" autologoutlink="1" length="long"></fb:login-button>
</div>
...
<!-- Facebook Connect initialization -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript">
</script>
<script type="text/javascript">
FB.init("[MY_API_KEY]", "/xd_receiver.htm",
{ "ifUserConnected" : fb_login_handler } );
</script>
I can successfully login with the Connect button, and the Javascript callback gets run, but I just end up with this:
So neither the picture nor the name is getting populated. The same thing happens even if I hardcode my FB profile ID in place of loggedinuser.
Update: It seems (after randomly messing around) that I can get it to work if I turn off the facebook-logo attribute from the fb:profile-pic tag. Setting it to false (or removing it) causes the user box to render correctly. But I need to Facebook logo to work, too. :(