Facebook 2010 (ish): March 2010

Friday, March 26, 2010

You have no friends! What!? That's not right.

Just a reminder that
A) The wiki is out of date.
FBApi.friends_get(null, function(result, exception), callback) now works and
FBApi.friends_get([], function(result, exception), callback) does not.

B) From time to time when you make the call
FBApi.friends_get(null, function(result, exception){
FBApi.users_getInfo(result, [...attribs you want...], function(result, exception){...};
};

Occasionally, result will be {} instead of a list of friends and attributes.
If that's the case, just call again. You'll get the right results eventually (I have mine loop whenever an empty object is the result and I no longer have problems).

How to get the UID of the current user

Why don't we do a quick scan of the documentation to see what makes the most sense?
FB.SessionRecord.uid looks like our man!
What!? FB.SessionRecord.uid is undefined?
Maybe we need to call it from within or after the FB.Connect.requireSession(callback) callback.
Nope. Still undefined.

Or maybe this: FB.Connect.get_loggedInUser
It reads good... and, as an added bonus, it isn't guaranteed to exist! It may be null! And no callback! w00t!

Wait... now, back to the outdated wiki we find: FB.Facebook.apiClient.get_session().uid();
What the return value actually contains is undocumented in the api, but
I guess the difference between wrong documentation and none is kind of a 6-of-one-half-dozen-of-the-other deal.

Rock on facebook... rock on...

Rant: Why is it that the jslib api gives no explanation of what the functions do? It just gives the signature... ugh...

Wednesday, March 10, 2010

Creating an iFrame App

From the main developer page click "+ Set Up New Application"

Give it a name

Make note of you API Key

Define the canvas page

Create the canvas page
(how to get this on your server is being left as an exercise for the reader)

Make some files:

mkdir stylesheets javascripts
touch canvas.html stylesheets/main.css javascripts/app.js

Make the canvas page:

<!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" >
  <head>
    <script src="javascripts/json2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="javascripts/underscore-min.js" type="text/javascript"></script>
    <script src="javascripts/pure.js" type="text/javascript"></script>
    <link rel=stylesheet href="stylesheets/main.css" type="text/css" media=screen>
    <style>
      body {
        background-color: #238;
        color: white;
      }
    </style>
  </head>
  <body>
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
    <script src="javascripts/helpers.js" type="text/javascript"></script>
    <script src="javascripts/app.js" type="text/javascript"></script>
    <h1>My App</h1>

    <div id="params_log"><%=h @params %></div>
  </body>
</html>

Don't give yourself a headache and, most importantly, don't reinvent the wheel: Use jQuery, UnderscoreJS, PURE, Sammy, (or even JavaScriptMVC) etc.
(At this point if you visit the page you should see that it shows "My App" and nothing else.)

Require users to add your application in app.js:

var fb_api_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

var fb_channel_path = '/xd_receiver.htm';
var FBApi;
var XFBML;

$(document).ready(function(){
  FB_RequireFeatures(["Api","XFBML"], function(){
      FB.XFBML.Host.autoParseDomTree = false;
      // Create an ApiClient object, passing app's API key and 
      // a site relative URL to xd_receiver.htm
      FB.Facebook.init(fb_api_key, fb_channel_path, null);

      FBApi = FB.Facebook.apiClient;
      XFBML = FB.XFBML.Host;

      // Forces Facebook Connect / Login
      //FBApi.requireLogin(function(exception){
      FB.Connect.requireSession(function(){
        alert("Current user id is " + FBApi.get_session().uid);
      },
      function(){
        alert("Didn't add the app, can't get data");
      },
      true); // MUST be true? What's the point?
  });
  alert("Hello World!");
});

Get a Developer Account

Add the developer app here:
http://apps.facebook.com/developer/

Which directs here:
http://www.facebook.com/developers/apps.php

Frustrated Rant

Bearing in mind that by the time I get my app done the Facebook Wiki and Documentation will probably be up-to-date with what it should be today and out of date with whatever actually is.... I begin...

Facebook 2010 (ish)