Bits & Babble

A blog in development.

Using the Titanium Facebook Module

March 31, 2014  

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.

Create a Facebook App

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.

app.js
raw download
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();

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.

4 Comments

By SPENCER SOKOL
  • About
  • Twitter
  • Studio 27

Categories

  • Alloy
  • Android
  • Appcelerator Titanium
  • Babble
  • Debugging
  • Genesis
  • iOS
  • s2Member
  • Woocommerce
  • Wordpress

About Spencer Sokol

Spencer co-founded Studio 27, a small web and application design and development company in Indianapolis. He has spent many years in both the development and testing side of the software industry, and generally avoids talking to people face to face.

Comments

  1. Richard says

    April 30, 2014 at 6:16 pm

    How do you post a reply on a comment? I have the post_id but I’m not sure how to load up the dialog so that I can post a reply to it.

    Reply
    • Spencer Sokol says

      May 4, 2014 at 12:04 pm

      Hrm, I’m not an expert on the Facebook graph, but you could try using the comment id you want to reply to instead of the post id. As far as a dialog, you’d have to create your own for user input and pass the results to the graph.

      Reply
  2. Max says

    May 20, 2014 at 9:17 am

    Don’t you need to call reauthorize in order to post to Facebook?

    Reply
    • Spencer Sokol says

      May 20, 2014 at 10:42 am

      That is correct. I have updated the example accordingly.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • About
  • Indianapolis Design & Development
Copyright © 2019 Spencer Sokol