views:

229

answers:

1

i am starting to build a facebook extension app. i got the api auth part working. now as i request anything using the javascript api, i am unable to.

for example:

<div id="profile_pics"></div>
<script type="text/javascript">
var widget_div = document.getElementById("profile_pics");
FB.ensureInit(function () {
  FB.Facebook.get_sessionState().waitUntilReady(function() {
  FB.Facebook.apiClient.friends_get(null, function(result) {
    var markup = "";
    var num_friends = result ? Math.min(5, 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);
  });
  });
});
</script>

the above sample code should display square thumbnail images of my friends. it just shows square thumbs (BLANKS) with the facebook logo over it. where am i going wrong?

FYI: i have the files located in the localhost. in the facebook application settings, i gave the connect url as the address of the 'localhost/dir/index.html' url. is there something i am doing wrong? please help me out.

EDIT this the code i am using to make login:

<script type="text/javascript"> 
//<![CDATA[ 
var api_key = 'myapikey'; 
var channel_path = '/xd_receiver.htm'; 
FB_RequireFeatures(["Api"], 
function(){ 
 // Create an ApiClient object, passing app's API key and 
 // a site relative URL to xd_receiver.htm 
 FB.Facebook.init(api_key, channel_path); 
 var api = FB.Facebook.apiClient; // require user to login 
 api.requireLogin(function(exception)
 { 
  FB.FBDebug.logLevel=1; 
  FB.FBDebug.dump("Current user id is " + api.get_session().uid); 
  // Get friends list 

  //5-14-09: this code below is broken, correct code follows //
  //api.friends_get(null, function(result){ 
   // Debug.dump(result, 'friendsResult from non-batch execution '); 
   // }); 

  api.friends_get(new Array(), function(result, exception){ 
   FB.FBDebug.dump(result, 'friendsResult from non-batch execution '); 
   }); 
  }); 
 }); 
//]]>
+3  A: 

The sample code you posted works fine... I just tested it in one of my devel FB apps and it created profile pictures of my friends.

You might want to throw a console.log(result) into your code and examine the results of the API call with Firebug. Perhaps it will have an error message for you. It sounds to me like there could be an issue here, because an fb:profile-pic created without a valid uid would show a blank square.

I would double-check that the URL you gave the application under the "Connect URL" setting is a valid URL that Facebook can reach. Also double-check that the path you gave for the xd_reciever.htm file is working. A third thing worth double-checking is that you have the correct xml namespace set on your document:

<html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
zombat
the connect url i have given is for localhost, ie, 127.0.0.1/dir/index.html. i really think this is the root of the problem. please let me know what url to give as callback for developing from localhost?
amit
and where to put the console.log(result) ?
amit
Yes, that would definitely be a problem. Remember, 127.0.0.1 always points to the local machine, so from Facebook's point of view, it would try to access itself and *not* your machine. Give it your external IP address. If you develop from home, like I do, it's the address your service provider assigns you. Go to http://www.whatismyip.com/ to find it, or check your router status page.
zombat
`console.log()` is a debugging call that you can use with the Firebug extension for Firefox. Use it right after the `var markup = "";` line if you want to see what `result` contains.
zombat
i just checked the firebug console. and it can correctly retrieve my friends' uids. in xml that is. also the fact that the thumbnails do not show the pictures of my friends. i should give the IP address a shot and report back.
amit
As an example, I set the Connect URL for my dev apps to the IP address my ISP gives me, `http://123.12.1.123/`
zombat
i tried that too...i mean with my IP address. it still doesnt work.i put the IP whatismyip.com gave me. no go. when i put that ip in my browser window, it asks for authentication.
amit
Do you have your dev site behind a router or using an `.htaccess` file that requires HTTP Authentication? Because Facebook will be getting exactly the same response when it tries to access your dev site. You might need to allow it through your router somehow.
zombat
i am behind a DSL provider. then a wireless router as well. i have not modified my .htacess. it is same as it came with XAMPP. and i am using a mac. what should i do? when u use this code, does your friends profile images show up?
amit
i am receiving this error in Firebug:10 </script><div id="error" class="UIMessageBox error"><h2 class="main_message" id="standard_error">Invalid Argument</h2><p class="sub_message" id="standard_explanation">The Facebook Connect cross-domain receiver URL (http://127.0.0.1/tswitch/127.0.0.1/tswitch/xd_receiver.htm) must have the application's Connect URL (http://www.facebook.com/) as a prefix. You can configure the Connect URL in the <a href="http://www.facebook.com/developers/editapp.php?app_id=366907045194">Application Settings Editor</a>.</p></div></body></html>
amit
Yes, the code works for me, my friends show up. That Firebug error is showing you exactly what is wrong. You **cannot** have 127.0.0.1 as part of your Connect URL. That is not a valid internet address. What is the main Canvas Callback URL you are using for your application? The Connect Url is generally the same as the Canvas Callback Url.
zombat
The Facebook Connect cross-domain receiver URL (127.0.0.1/tswitch/127.0.0.1/tswitch/xd_receiver.htm) must have the applcation's Connect URL as a prefix. i am concerned why the 127.0.0.1/tswitch comes twice. i dont have a canvas URL as i am creating a browser extension here.
amit
it finally worked. i have no idea what did it. but somehow. it works now. ;)) thank you soooo much. reallly appreciate it.
amit
None of your URLs should be using 127.0.0.1. *Facebook cannot resolve 127.0.0.1 to your machine*. If you have this as part of the URL to your `xd_receiver.htm` file, then you need to change that URL to something Facebook can access. Generally the `xd_receiver.htm` is specified using the relative path only, such as `/xd_receiver.htm`, with no "http://" part.
zombat
Nice, glad you got it working! Good luck with the rest of it.
zombat