New Facebook Modules

In this guest blog, Mark Mokryn introduced us to his new Facebook modules for Titanium. Appcelerator’s Facebook modules haven’t been updated for a long time, partly because the newer SDKs couldn’t simply be dropped into the Titanium wrapper modules but needed lots of adjustments. Mark just got several PRs accepted for Titanium 3.5.0 to make it easier to use third-part SDKs as-is. But using his private fork of Titanium 3.4.0 you can already use his new modules today! Read on to learn how..


Titanium’s Facebook modules are about two years old, and are missing many features developers and users expect from a Facebook-integrated app.
This post will introduce new modules to help you update your app.

Background

In April 2014 Facebook introduced a new login mechanism and Graph API 2.x, which are missing from the Titanium modules.
Other missing features are the Share Dialog, which enables sharing the user experience via the Facebook app, the Like button, App Events, and more.
The new modules enable these features for Titanium apps, and are available for both Android and iOS.

The modules are documented in the READMEs on the repositories, so in this post I will mostly provide an overview of the features as well as points to look out for.
The APIs are similar to those in Titanium’s modules, with the differences noted in the READMEs.

Login Notes

Like the original modules, these modules will also generate a “login” event if the module found a previously active session with Facebook.
An enhancement over this is that the modules allow you to control when this will occur, so you can set up your UI and event listeners prior to this event. Thus, to kick off the module, after setting your login and logout event listeners and requested permissions, call the module’s initialize() method. The login event will not occur before this.

Permissions

Facebook’s new login mechanism provides users full control over which permissions may be granted to your app. The only permission the user cannot turn down when logging in is public_profile. Therefore if you request any additional permissions, it is highly recommended that following the login event you read the module’s permissions property to get the actually granted permissions.

iOS Notes

Following the move to the new login mechanism, Facebook made the default login mechanism to be through the Facebook app, with a webview fallback (for both iOS and Android). You may however decide to use the device Facebook account login (i.e. in iOS settings) as the first option, with a fallback to the Facebook app, and then the webview. The device account login does not allow user control over the requested permissions, which may annoy users who by now are used to this. Additionally, if you request additional permissions with the device account you may also see strange wording presented to the user. Therefore, if you decide to use the device login the module is hard coded to request only the public_profile permission. On iOS this permission also include email and user_friends – unlike the app or webview login. The only advantage of the device login is that it is faster than the Facebook app. If you wish to use the device login as the preferred login method, initialize the module by fb.initialize(true);

Also note that in the case of a user changing her Facebook password, or initially refusing to login with Facebook, recovery from the device login is more complex and will often require the user to enter the iOS Facebook settings.

The iOS module works and is tested with SDK 3.4.0.GA

Install the module locally to your Titanium project, since when you build your project Xcode will look for the Facebook SDK framework in a path relative to your project path ($(SRCROOT) in module.xcconfig). If you want to install the module globally then you will need to change that line to point directly to the folder containing FacebookSDK.framework.

Android Notes

Unlike iOS apps which function as a single “process”, in Android apps use Activities, with only a single Activity running at any time. In Titanium, each standalone Window (i.e. not a Tab Window) or TabGroup corresponds to a unique Activity. Since the Facebook SDK needs to keep track of status as the app transitions between Activities, we need to create a proxy per Window or TabGroup, for example:

 win1.fbProxy = fbModule.createActivityWorker({lifecycleContainer: win1});

Note that it may be needed to attach the proxy to some other object such as the Window (e.g. this example) to prevent it from being garbage collected prior to the Window being closed.

You should create this proxy object for each standalone Window or TabGroup in your app. Note that this proxy has no APIs – the Javascript functionality is entirely on the module object.
Due to this requirement, the Android module requires SDK 3.5.0 which contains new features for Activity lifecycle events. Since 3.5.0 development is not currently stable, you may use my branch off the production 3_4_X branch. You can download this SDK prebuilt here.

App Events

Facebook provides lots of metrics for your app: number of installs, activations, informations on sessions, and more. For iOS you don’t need to do anything besides require the module. For Android, you just need to create Facebook module proxies for each Window or TabGroup. The user does not even need to be logged in with Facebook. Then visit Facebook Insights for your app and browse your data.

You can also create custom events which will be monitored, for example:

 fb.logCustomEvent('handsClapped');

Share Dialog

The Share Dialog provides a uniform sharing experience through the Facebook app for both iOS and Android. This is unlike the Share Sheet, for example, which is supported only on iOS and by this module.

It is also more powerful than the Share Sheet, see the Facebook docs for the differences. The details are spelled out in the READMEs, and again this particular API does not require the user to login with your app to Facebook.

Next Steps

I strongly urge any apps using the Facebook modules today to upgrade now, since apps will stop working soon as Facebook removes support for Graph API 1.0. So please try out the modules, and provide feedback. And of course, help in the form of pull requests is always welcome.

Mark Mokryn is the founder and creator of Juko.fm, a music video jukebox app, and is currently also working freelance in various fields ranging from semiconductors, storage systems, to full-stack web and mobile app development. In the app space Mark currently focuses on full-stack Javascript: Titanium, Node.js, Angular.js, and more.


Comments

  • Mark Mokryn Post author

    Note on the required Android SDK: 3.5.0 will apparently be the target for 64-bit iOS, so the required SDK for this module is 3.6.0 (same targeted release date as the original 3.5.0). Or just use my 3.4.x fork, noted above.

  • Mark Mokryn Post author

    The post has been updated to reflect changes in the Android module, version 3.20.05. The module was refactored to move all APIs to the module object, and not the proxy, in order to simplify and improve event handling on the Javascript side.

  • Gopi Reddy

    Hi Mark, thanks for your SDK/FB module/this blog. Q: if we need iOS 64-bit support plus the Graph2-based FB module, we need to wait for Titanium SDK 3.6, correct? Is there an interim solution?

  • Stevo8800

    Can your module send app requests? I can’t seem to find out if it does or not and it’s pretty much the only thing holding me back from trying your module. My apps already active right now but the Titanium Facebook module actually has a bug with the request dialog as well along with the out dated Facebook SDK.

  • mokesmokes

    Hi Gopi, my latest iOS version supports 64-bit with SDK 3.5.0.RC and up, so you should be all set.

  • mokesmokes

    Stevo, app requests are not yet implemented. To be honest, I’m not a fan of this mechanism since it requires a web login, and users want to just use the Facebook app. Additionally, there are several conditions that the app must meet to qualify for requests to work… So the bottom line is: I don’t see myself implementing this soon. However, if someone turns in a well tested pull request for this feature I will gladly accept it.

  • mokesmokes

    Like Button now supported for both iOS and Android.

  • Claus Stilborg

    Wow, I really need this module, thx Mark:)

    But I am kinda stuck on implementation. because when I do a fresh empty project (two tabs alloy in 3.5) and install the module i get this:

    [ERROR] : Script Error Couldn’t find module: com.facebook for architecture: x86_64

    when i require the module in the index controller. var fb = require(“com.facebook”);

    Any idea what I am doing wrong?

  • Claus Stilborg

    The above was from the simulator, on the device i get the obvious:
    [ERROR] : Script Error Couldn’t find module: com.facebook for architecture: armv7

  • mokesmokes

    My first guess is that you included the module globally rather than local to your project (e.g. in Studio, Help -> Install Mobile Module, choose “Mobile App Project” and not “Titanium SDK”. If you do want to install it globally, you will need to modify the FRAMEWORK_SEARCH_PATHS variable in module.xcconfig to match the path to the Facebook SDK that is included in the module. Let me know if this helps :)

  • Claus Stilborg

    Hi Mark
    Thank you for the fast reply
    I did install to the specific project, but after installation I got some url error twice: “Unable to download module from the specified URL. Is the URL valid?”

    The FRAMEWORK_SEARCH_PATH is set at “FRAMEWORK_SEARCH_PATHS=$(SRCROOT)/../../modules/iphone/com.facebook/3.21.10/platform”

    That location is inside the com.facebook-iphone-3.21.10.zip file in the module folder, is that correct?

  • Claus Stilborg

    Oh btw I am using version 3.5.0.GA, do I need to change anything for that?

  • mokesmokes

    Claus, here is how I install:
    1. Make sure you don’t have a directory such as this one: ~/Library/Application\ Support/Titanium/modules/iphone/com.facebook
    2. Download the module zip file
    3. In Studio, Help -> Install Mobile Module to a specific project, and use the zip file location in the browse dialog
    This works for me…. And no issues I am aware of in 3.5.0.GA, nothing special required.

  • Claus Stilborg

    Got it working, I think

    I was trying to directly install the entire github repo zip file.
    The zip file that actually needs to be installed is IN the repo root and is called com.facebook.iphone-3.21.10.zip (at the time of this writing)

    Hope this will help other clueless noobs out there

  • mokesmokes

    I suggest cloning the repo, and in the installation dialog instead of referencing a URL reference the path to the zip file in your local repo copy.

  • Claus Stilborg

    Yes, it works beautiful now. User error all the way :) Thank you Mark.

  • Rodion Mamin

    Mark,
    Is your module tracks app installs?

    From the facebook’s manual there should be string:
    com.facebook.AppEventsLogger.activateApp(context, YOUR_APP_ID);
    but I didn’t found it in your module.

  • Rodion Mamin

    Mark,
    I’ve got on error:
    [WARN] : dalvikvm: Link of class ‘Lcom/ti/facebook/ActivityWorkerProxy;’ failed
    [ERROR] : JNIUtil: Couldn’t find Java class: com/ti/facebook/ActivityWorkerProxy
    [WARN] : W/System.err: java.lang.NoClassDefFoundError: com/ti/facebook/ActivityWorkerProxy
    [WARN] : W/System.err: at org.appcelerator.kroll.runtime.v8.V8Object.nativeFireEvent(Native Method)
    [WARN] : W/System.err: at org.appcelerator.kroll.runtime.v8.V8Object.fireEvent(V8Object.java:62)
    [WARN] : W/System.err: at org.appcelerator.kroll.KrollProxy.doFireEvent(KrollProxy.java:884)
    [WARN] : W/System.err: at org.appcelerator.kroll.KrollProxy.handleMessage(KrollProxy.java:1107)
    [WARN] : W/System.err: at org.appcelerator.titanium.proxy.TiViewProxy.handleMessage(TiViewProxy.java:347)
    [WARN] : W/System.err: at org.appcelerator.titanium.proxy.TiWindowProxy.handleMessage(TiWindowProxy.java:99)
    [WARN] : W/System.err: at ti.modules.titanium.ui.WindowProxy.handleMessage(WindowProxy.java:415)
    [WARN] : W/System.err: at android.os.Handler.dispatchMessage(Handler.java:95)
    [WARN] : W/System.err: at android.os.Looper.loop(Looper.java:137)
    [WARN] : W/System.err: at org.appcelerator.kroll.KrollRuntime$KrollRuntimeThread.run(KrollRuntime.java:112)
    [WARN] : W/System.err: Caused by: java.lang.ClassNotFoundException: com.ti.facebook.ActivityWorkerProxy
    [WARN] : W/System.err: at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:61)
    [WARN] : W/System.err: at java.lang.ClassLoader.loadClass(ClassLoader.java:501)
    [WARN] : W/System.err: at java.lang.ClassLoader.loadClass(ClassLoader.java:461)
    [WARN] : W/System.err: … 10 more
    [INFO] : libc: Fatal signal 11 (SIGSEGV) at 0x00000000 (code=1), thread 3636 (KrollRuntimeThr)

    With Titanium 3.5.0.GA. Could you help me please to solve it?

  • Rodion Mamin

    Mark,
    Thanks. I’ve also found the solutions for my problem in your repository.
    Sorry for disturbing you and THANKS for your module!

  • Zsolt Papp

    Hey, Im trying to use the new iOS facebook module, but Im getting an error everytime. The erro is:
    [INFO] : Image optimization complete
    [ERROR] : ** BUILD FAILED **
    [ERROR] : The following build commands failed:
    [ERROR] : Ld build/APP-NAME.build/Debug-iphoneos/APP-NAME-universal.build/Objects-normal/armv7/APP-NAME normal armv7
    [ERROR] : Ld build/APP-NAME.build/Debug-iphoneos/APP-NAME-universal.build/Objects-normal/arm64/APP-NAME normal arm64
    [ERROR] : (2 failures)

    If I use the original facebook module than everything is OK. In the tiapp.xml I did everything as it was written.

    Thanks for the help!

  • mokesmokes

    @Zsolt Papp please open an issue at Github. If you build for iPhone only target in tiapp.xml does this still occur?

  • john mohan

    Installed as per instructions on Studio 3.4.0 on W7 (took almost 3 hours) and ran a simple test to send link to FB friend. But execution failed due to instal error.
    ERROR] : TiExceptionHandler: (main) [846,846] —– Titanium Javascript Runtime Error —–
    [ERROR] : TiExceptionHandler: (main) [3,849] – In ti:/module.js:280,9
    [ERROR] : TiExceptionHandler: (main) [28,877] – Message: Uncaught Error: Requested module not found: facebook
    [ERROR] : TiExceptionHandler: (main) [3,880] – Source: throw new Error(“Requested module not found: ” + request);
    [ERROR] : V8Exception: Exception occurred at ti:/module.js:280: Uncaught Error: Requested module not found: facebook

  • mokesmokes

    John, how are you requiring the module? require(‘com.ti.facebook’);

  • john mohan

    i did this first require(‘com.ti.facebook’ and got same error so in tried it with just ‘facebook’

  • john mohan

    The install created 2 directories: “titanium_mobile-3_4_M” in my app and “titanium_modules-master” in the workspace

  • mokesmokes

    John, you need to read the Titanium documentation on installing a new SDK and installing modules. Your issue is not specific to my module.

  • mokesmokes

    Folks, as a general suggestion: please post usage questions to the Titanium Q&A or if you suspect a real problem then file an issue on Github. Thanks.

  • Gus

    HI Mark,
    Thank you for the modules.
    I have tried but cannot get the fbproxy statement to work on Android.
    I am using an Alloy based TabGroup app and tried adding the fbproxy in alloy.js as well as index.js
    each time I reference the id of the window or Tabgroup, I get errors as to Object being undefined.

    Any tips on how to get the Module to work in Android Alloy?

  • Mark Mokryn

    You must use SDK 3.5.1.GA or later.
    See the sample app here: https://github.com/mokesmokes/facebook-titanium-sample
    And in your controller code create the proxy prior to calling tabGroup.open()
    create the proxy like this:
    tabGroup.fbProxy = fb.createActivityWorker({lifecycleContainer: tabGroup});

  • Gus

    Thanks Mark, it os working now!
    Still having some issues with Like Button..
    I added to Appcelaerator Q&A at
    http://developer.appcelerator.com/question/181449/facebook-like-button-using-mark-mokryn-module

  • Daniel

    Thanks Mark, it worked perfect. Great module.

  • Hetal Patel

    Hi Mark, i am too facing the same build error as Zsolt Papp..
    {INFO] : Image optimization complete
    [ERROR] : ** BUILD FAILED **
    [ERROR] : The following build commands failed:
    [ERROR] : Ld build/APP-NAME.build/Debug-iphoneos/APP-NAME-universal.build/Objects-normal/armv7/APP-NAME normal armv7
    [ERROR] : Ld build/APP-NAME.build/Debug-iphoneos/APP-NAME-universal.build/Objects-normal/arm64/APP-NAME normal arm64
    [ERROR] : (2 failures)
    And even i targetted for as you told for IOS as i am making the app for IOS.
    com.facebook

  • Chetan

    Hi Mark,
    I saw this new Facebook module. I think in this new module Titanium is not supporting feed dialog for sharing post on user’s friends wall. There are only 2 dialogs supported send and share.

    You have any idea, how we can post on somebody else’s wall using dialog..??

    Thanks