Friday, February 15, 2008

A Little More JavaScript and FaceBook Hacking

Facebook's JavaScript example is pretty minimal, so I thought I'd do a little more hacking around. I'm not a great JS programmer, so I like to unroll the function definitions.

You should grab the very minimal JS API documentation from here: http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library. It is the "zipped archive" link near the bottom. This guide is very unfriendly at the current time, but in general you should see that the JS equivalents of the API list at http://wiki.developers.facebook.com/index.php/API replace the "." with a "_". So users.getInfo becomes users_getInfo(...).


Here's an example that uses the users_getInfo() method and some other stuff to get a user's profile information.

<!-- Output area to show the output from Facebook API -->
<textarea style="width:500px;height:300px;" id="_traceTextBox">
</textarea>
<script src="http://static.ak.facebook.com/js/api_lib/FacebookApi.debug.js" type="text/javascript">
</script>
<script type="text/javascript">

// Create an ApiClient object, passing app's api key and
// a site relative url to xd_receiver.htm
var api = new FB.ApiClient('<your_key_here>', '/xd_receiver.htm', null);

// Get friends list
function getResults(result,exception) {
Debug.dump(api.get_session().uid,'you');
Debug.dump(result,'The stuff');
}

function getInfo(result,exception) {
Debug.dump(result,'The info');
}

// require user to login
api.requireLogin(function(exception) {
api.friends_get(null,getResults);
var myinfo='last_name,first_name,hometown_location,work_history,pic_small';
api.users_getInfo(api.get_session().uid,myinfo,getInfo);

});
</script>

You need to update this stuff above to use your application's key, as indicated.

The output of this will be something like
---------------------
you: 627774031

The stuff: {Array}
[Deleted]

The info: {Array}
[0]: {Object}
first_name: Marlon
hometown_location: {Object}
city:
state:
country:
zip:
last_name: Pierce
pic_small: http://profile.ak.facebook.com/profile6/1797/98/t627774031_2463.jpg
uid: 627774031
work_history: {Object}

friendsResult from batch execution: {Array}
[Deleted]
notificationsResults from batch: undefined
----------------------

I guessed the values for the myinfo array by looking at the big XML file example shown at http://wiki.developers.facebook.com/index.php/Users.getInfo. That's the real URL for the tiny version of my FaceBook photo.

So in summary, you can use this approach to embed FaceBook profile information in your own web application. You'll of course have to do a bit of work to format all of this stuff. Note also that you can substitute another user's numeric ID in the users_getInfo() call (ie that of one of your friends). I used this to spy on Dave De Roure, who spends a lot more time on FaceBook than I do. And I won't even start on Dan Katz.

FQL and JS
Finally, note that all of the FaceBook API is basically a set of wrappers around their SQL like FQL query language. So you can, if you prefer, make custom methods out of FQL query strings. For example

var myQuery='SELECT name FROM user WHERE uid='+api.get_session().uid;
api.fql_query(myQuery,getFQLResponse);

will execute the indicated query string from JavaScript and pass it to your (developer defined) function getFQLResponse().

Groups
To list information about groups you are a member of, use the following. You can replace your uid with another UID.
api.groups_get(api.get_session().uid,null,getGroups);
api.groups_getMembers(18629081888,getGroupMembers);

In the second line, 18629081888 is the GID for the very inactive OGF Web 2.0 group.



10 comments:

Gerard said...

Hi Marlor,

I try to copy your example, but obly appears mi id... in the error console of the Firefox appears the error: executeUnit has no properties in the FacebookApiDebug.js file.

Thank you so much for the support

Gerardo T

Marlon Pierce said...

I don't know what your problem might be but I did see a typo in my example above--I forgot to escape the angle brackets in the login. Should be

var api = new FB.ApiClient('<your_key_here>', '/xd_receiver.htm', null);


Also make sure xd_receier.htm can be found--try changing the relative path.

Gerard said...

Hi Marlon,

I change this properties... my error is the same that's in http://wiki.developers.facebook.com/index.php/Talk:JavaScript_Client_Library
Thanks for your help

Marlon Pierce said...

Check the last line of the link to the Facebook dev wiki. Your xd_receiver.htm file is probably not being found. Try giving it a full URL.

Subhash said...

Hi Marlon,
great info...
one question:
What does Debug.dump do? I dont want to use it. I want to use some javascript function which could format the output. It should take the 'result' and format it... I used some object dump functions in JS.. .but nothing gives any output....

danny said...

Do you know how to interpret the object returned by the Javascript fql_query method?

In other words, can you provide a simple implementation of your getFQLResponse method that, say, prints the returned user name?

The returned object doesn't seem to be of any known Javascript type.

Marlon Pierce said...

Danny, to get started, just use a Debug.dump in your callback function to see the results. These results will be either an object (a JavaScript var, that is) or an array of objects. Use this for clues. Toss each object into a var and try operations from there.

danny said...

Marlon, I've tried the usual solutions already :)

Printing the object displayes the standard "javascript object" string.

Iterating throught its members ("for var i in obj") shows there are no members.

Trying to call xml document methods (e.g. getElementsByTagName) fails as if they don't exist.

I simply thought you might know the proper way to do this, as you posted the fql_query example code... I guess you didn't bother to check it, did you? :)

Marlon Pierce said...

I left it as an exercise for the reader. Perhaps perusing Debug.dump and Debug.dumpCore http://static.ak.facebook.com/js/api_lib/FacebookApi.debug.js will help. But this can't be what the facebook devels intended.

kushagra said...

hi,

when i simply tried to run your code, i get an error with Debug.dump being not found.. is there any FB JS file that i am not including..

Error: Object doesn't support this property or method

any help is much appreciated..
thanks,