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:
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, include Android Support extensions provided by Distriqt in this repository:
<extensionID>com.distriqt.androidsupport.V4</extensionID>
<extensionID>com.distriqt.androidsupport.CardViewV7</extensionID>
<extensionID>com.distriqt.androidsupport.AppCompatV7</extensionID>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.distriqt.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>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>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>Automatic event logging
If you want to disable auto-logging made by the Facebook SDK, add the following information.
For iOS:
<iPhone>
<InfoAdditions>
<![CDATA[
...
<key>FacebookAutoLogAppEventsEnabled</key>
<false/>
...
]]>
</InfoAdditions>
</iPhone>For Android:
<android>
<manifestAdditions>
<![CDATA[
<manifest>
...
<application>
...
<meta-data android:name="com.facebook.sdk.AutoLogAppEventsEnabled"
android:value="false"/>
...
</application>
</manifest>
]]>
</manifestAdditions>
</android>Running your app
Finally, jump into your IDE and add the following code. Don’t forget to use your Facebook app id in place of FACEBOOK_APP_ID:
import com.marpies.ane.facebook.AIRFacebook;
import com.marpies.ane.facebook.events.AIRFacebookEvent;
// Optional settings
AIRFacebook.instance.settings
.setShowLogs( true )
.setUrlSchemeSuffix( null );
// Somewhere in your constructor
if( AIRFacebook.instance.isSupported ) {
AIRFacebook.instance.addEventListener( AIRFacebookEvent.SDK_INIT, onFacebookSDKInit );
AIRFacebook.instance.init("FACEBOOK_APP_ID");
private function onFacebookSDKInit( event:AIRFacebookEvent ):void {
AIRFacebook.instance.removeEventListener( AIRFacebookEvent.SDK_INIT, onFacebookSDKInit );
trace( "Facebook SDK initialized" );
}
}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.