Using the Titanium Facebook Module

Facebook is a big thing, I’ve heard. I’ve seen it used in dozens of apps to do things like telling other people what they’re doing in those apps. So let’s see what we can accomplish using the Titanium Facebook module.

The Setup

First off, head over to Facebook Developers, and create a new App. This is how Facebook will know which application is acting on their users’ behalf.

It’s an easy process, even if it may feel a little daunting. Your app will initially be in development mode, so you won’t have to worry about other people seeing it.

In your application settings, you’ll need to add a platform. For iOS, you’ll need to specify the bundle id from your Titanium project. For Android, you’ll need to specify the package name from your Titanium project. That should be all the important information your app needs for now.

On the main screen for your app settings, make sure to take note of the App ID. You’ll need it later.

Posting to your timeline

One of the more basic uses of the Facebook Open Graph is posting a message to a user’s timeline. Here is an example of how to accomplish said task.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

var facebook = require( 'facebook' );
 
facebook.appid = 'YOUR FACEBOOK APP ID HERE';
 
var facebookButton = Ti.UI.createButton( {
  height: 50,
  width: 100,
  top: 20,
  title: 'Facebook'
} );
 
facebookButton.addEventListener( 'click', function() {
 
 if ( facebook.loggedIn ) {
    shareToFacebook();
  } else {
    facebook.addEventListener( 'login', shareToFacebook );
    connectToFacebook();
  }
 
} );
 
function connectToFacebook() {
 
  var dialog = Ti.UI.createAlertDialog( {
    title: '',
    message: 'You must first connect to the Facebook.',
    buttonNames: [ 'OK', 'Cancel' ],
    cancel: 1
  } );
 
  dialog.addEventListener( 'click', function( e ) {
    if ( 0 == e.index ) {
      facebook.authorize();
    }
  } );
 
  dialog.show();
 
}
 
function shareToFacebook() {
 
  facebook.removeEventListener( 'login', shareToFacebook );
 
  facebook.reauthorize( 'publish_stream', 'everyone', function( e ) {
 
    if ( e.success ) {
 
      facebook.requestWithGraphPath( 'me/feed', { message: 'Look at me! I\'m a monkey in a tree!' }, 'POST', function( e ) {
 
        var result = '';
 
        if ( e.success ) {
          result = 'Status shared to Facebook.';
        } else {
          if ( e.error ) {
            result = e.error;
          } else {
            result = 'Something went wrong, but the Facebook could not confirm what.';
          }
        }
 
        var dialog = Ti.UI.createAlertDialog( {
          title: '',
          message: result,
          buttonNames: [ 'OK' ]
        } );
 
        dialog.show();
 
      } );
 
    }
 
  } );
 
}
 
var win = Ti.UI.createWindow( {
  backgroundColor: '#eee'
} );
 
win.add( facebookButton );
 
win.open();

There’s quite a bit going on in trying to use the Titanium Facebook module, so let’s break it down. First things first, on line 3 we need to specify the App ID from our Facebook Developer settings. Next, a quick glance over the whole file shows that we’re doing very little in the way of UI. We’re creating a button on line 6, a window on line 80, and adding the button to the window on line 84. It’s not much to look at.

The key concepts of making the Titanium Facebook module work are verifying when Facebook is authorized, logging a user in, and accessing the Graph. On the button event listener, we check to the see if the user is already logged in (line 15). If they aren’t, we need to listen for the module’s login event.

The login event happens at numerous times, even after the user has already authorized the app. So we need add the event listener only when we’re first authorizing the application.

Once the app has been authorized, our shareToFacebook function makes a request to the Graph. Specifically, to the ‘me/feed’ functionality. We specifically have to call reauthorize to gain write permissions as initial authorization does not permit write access. On line 50, our request passes a message to the Graph, and also passes a function to handle the return message from the Graph.

Our simple example uses an AlertDialog to pass information along to the user. You should let your users know the outcome in a way consistent with your app design. Those are the basics of the Titanium Facebook Module.

Updated 04.16.2014: Added the facebook.permissions information for writing to a user’s feed (line 4).

Updated 05.20.2014: Added the reauthorize method.