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.
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.
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.
Don’t you need to call reauthorize in order to post to Facebook?
That is correct. I have updated the example accordingly.