Set up Adobe AIR app with Facebook

Posted: September 10, 2015

AIRFacebook offers a rich and cross-platform API to the latest Facebook SDK for iOS and Android.

Let’s see how you can easily implement social interaction in your Adobe AIR app and make it available to the millions of people using Facebook today!

Adding the extension to your project

The first step is to add the extension package to your project and add it to your build path so that you can reference it in your code. This process is a bit different for every IDE. If you are not sure how to do this with your IDE, and you are using one of the following IDEs, navigate to the links below which describe this process for IDEs most used in development with AIR:

If you are still having problems with your particular IDE, please let me know and I will gladly assist you.

Creating Facebook app ID

Next, you will need a Facebook app ID. Please, follow the official guide on how to create Facebook app. After creating your app in the Facebook developer profile, add the platforms you wish to support.

Platform settings for iOS

Making the extension work with your iOS app requires setting your bundle ID in the Facebook app. You can find this value in your AIR descriptor file in the <id> tag. Then set the iPhone/iPad Store ID to ID of your published iOS app, or if your app has not been published to the App Store you can use ID of any published iOS app (you do not have to be developer of this app – just remember to change the ID to your app once you are about to publish). If you plan on using single Facebook app ID with multiple iOS apps, you can set URL Scheme Suffix – you can read more about shared app ID by navigating to Facebook docs. Lastly, enable Single Sign On and Deep Linking to be able to authenticate user using the Facebook app instead of web dialogs only.

Platform settings for Android

Setting up the extension with Android requires a couple more steps. First things first, set the Google Play Package Name value to your app ID, as it is set in your AIR descriptor file. If you are packaging your APK with captive runtime, you will need to prefix this value with air. (notice the dot). Now copy this new value (that is, including the air. prefix), paste it into the Class Name input and add .AppEntry (including the dot at the beginning) suffix. This makes sure your app will be launched from Facebook requests. So for example, if your app ID was com.example.app the values for the inputs would be as follows:

Facebook on Android uses key hash to authenticate interactions between your app and the Facebook app. If you run apps that use Facebook Login, you need to add your Android development key hash to your Facebook developer profile. Please, navigate to the Facebook docs to see how to do this. Finally, as in the case of iOS settings, enable Single Sign On and Deep Linking.

Modifying AIR descriptor file

Open your descriptor file in text editor, look for the <extensions> tag and put the following in between this tag:

<extensionID>com.marpies.ane.facebook</extensionID>

If you are targeting Android, you will also need to include these two extensions from this repository. You can use one of the available releases without having to clone or download the repository:

<extensionID>com.marpies.ane.androidsupport</extensionID>
<extensionID>com.marpies.ane.androidsupport.cardview</extensionID>
If you are using AIRFacebook v1.4.5 or older then make sure to use the Android support v24 release.

If you are using AIRFacebook 1.5.0+ then also include the following extensions:

<extensionID>com.marpies.ane.androidsupport.appcompat</extensionID>
<extensionID>com.marpies.ane.androidsupport.vectordrawable</extensionID>
<extensionID>com.marpies.ane.androidsupport.animatedvectordrawable</extensionID>
If using AIR 24 or older with AIRFacebook v1.5.0+ then make sure to read Upgrade notes for AIRFacebook v1.5.0.

Optionally, you can improve Android users experience by including Chrome Custom Tabs library (available in the same repository). This library provides better login experience for users without native Facebook app, by showing Chrome tab directly in your app. Thus, if a user has logged in to Facebook in Chrome browser before he will not have to enter his email and password again. To support this feature, simply include the following extension in your app descriptor (as well as CustomTab activities, see below):

<extensionID>com.marpies.ane.androidsupport.customtabs</extensionID>

Now navigate to <android> and the nested <manifestAdditions> tag and add the following:

<![CDATA[
<manifest android:installLocation="auto">
   <uses-permission android:name="android.permission.INTERNET"/>

   <application>
      <activity
         android:name="com.facebook.FacebookActivity"
         android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
         android:theme="@android:style/Theme.Translucent.NoTitleBar"
      />

      <provider
         android:authorities="com.facebook.app.FacebookContentProvider{FACEBOOK_APP_ID}"
         android:name="com.facebook.FacebookContentProvider"
         android:exported="true"
      />

      <activity
         android:name="com.marpies.ane.facebook.LoginActivity"
         android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
         android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
      />

      <activity
         android:name="com.marpies.ane.facebook.ShareActivity"
         android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
         android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
      />

      <!-- OPTIONAL: Chrome custom tabs for Facebook login -->
      <activity
         android:name="com.facebook.CustomTabActivity"
         android:exported="true">
         <intent-filter>
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" />
             <data android:scheme="fb{FACEBOOK_APP_ID}" />
         </intent-filter>
      </activity>
      <activity
         android:name="com.facebook.CustomTabMainActivity"
         android:exported="true">
      </activity>

   </application>

</manifest>
]]>

Note you need to replace {FACEBOOK_APP_ID} with the app ID as specified in your Facebook app.

Now look for <iPhone> and the nested <InfoAdditions> tag. Add the following snippet to <InfoAdditions>:

<key>CFBundleURLTypes</key>
<array>
   <dict>
      <key>CFBundleURLSchemes</key>
         <array>
            <string>fb{FACEBOOK_APP_ID}</string>
         </array>
   </dict>
</array>

<key>FacebookAppID</key>
<string>{FACEBOOK_APP_ID}</string>

<key>FacebookDisplayName</key>
<string>{FACEBOOK_DISPLAY_NAME}</string>

Again, replace {FACEBOOK_APP_ID} and {FACEBOOK_DISPLAY_NAME} with the values from your Facebook app.

If you’re using URL scheme for your iOS apps then also add the following, where {URL_SCHEME} is your selected suffix:

<key>FacebookUrlSchemeSuffix</key>
<string>{URL_SCHEME}</string>

If you’re using AIRFacebook v1.3.0+ or AIR SDK 20+ then also make sure to add the following to <InfoAdditions>:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>facebook.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>                
            <key>NSExceptionRequiresForwardSecrecy</key>
            <false/>
        </dict>
        <key>fbcdn.net</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <false/>
        </dict>
        <key>akamaihd.net</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <false/>
        </dict>
    </dict>
</dict>

Running your app

Finally, jump into your IDE and add the following code:

import com.marpies.ane.facebook.AIRFacebook;

/* Somewhere in your constructor */
AIRFacebook.init("FACEBOOK_APP_ID", false, "URL_SCHEME", true);

Compile and run your project in debug mode on a device. If you have setup everything correctly, you should see Facebook SDK initialized message in your console.

What to do next

See the getting started guide to learn how to use some of the ANE’s APIs.