Integrating Facebook* Functionality into Hybrid Apps Using the Intel XDK

This document will illustrate how to add Facebook functionality to your hybrid application written using the Intel XDK.

Tweet Like

This document will illustrate how to add Facebook functionality to your application using the Intel XDK. It will start by introducing the commands in the intel.xdk JavaScript Bridge Library used to access Facebook, continue on to demonstrate how to set up the features on Facebook's developer page, and then conclude by demonstrating how to build an app for iOS or Android using the Facebook featutres. This article includes a sample application, a helper library, and detailed instructions on how to use your Facebook developer account to accept requests from a mobile application.

The JavaScript Bridge APIs

The Intel® XDK allows developers to build hybrid apps that take advantage of native functionality through a JavaScript bridge API. This JavaScript library includes a Facebook object that will trigger the native Facebook API within a native application built using the XDK. For more information on the Facebook technology that is used in the build system, see Facebook’s site here.

Login to Facebook

The login command (intel.xdk.facebook.login(permissions)) is used to log the user into Facebook. When it is run, a dialog generated by Facebook should appear allowing the user to enter their credentials. Depending on the result of that interaction with Facebook, the application will receive a JavaScript event (intel.xdk.facebook.login) indicating whether the login was successful or not. The user would then log in to Facebook with the requested permissions. If no permissions are specified, defaults will be used instead. For more information about Facebook login permissions, see Facebook’s site here. Here is a block of sample code to illustrate how the login process works:

Logout of Facebook

This command (intel.xdk.facebook.logout()) is used to log the user out of Facebook. Here is a block of sample code to illustrate how the logout process works:

Request with Graph API

This API command (intel.xdk.facebook.requestWithGraphAPI(path, method, parameters)) is used to make requests from the Facebook Graph API. For more information on this particular API, see Facebook’s documentation here. Here is a block of sample code that illustrates how one might use the Facebook Graph API to get the pictures of all the friends of a particular Facebook user. Alternatively, use Facebook’s “me” placeholder to refer to the Facebook ID of the user currently logged in.

Test out a path/method/parameters with the Facebook Graph Explorer.

Show Application Request Dialog

This API command (intel.xdk.facebook.showAppRequestDialog(parameters); ) is used to bring up Facebook’s application request dialog. The Request Dialog sends a request from one user (the sender) to one or more users (the recipients). The Request Dialog can be used to send a request directly from one user to another or display the Multi Friend Selector Dialog, allowing the sending user to select multiple recipient users. Find more information on Facebook’s request dialog here. Here’s an example code block:

Show News Feed Dialog

This API command (intel.xdk.facebook.showNewsFeedDialog(parameters);) is used to prompt the user to publish an individual story to a profile’s feed. Find more information about the feed dialog here. Here’s a sample code block:

Enable Frictionless Command

This command ( intel.xdk.facebook.enableFrictionlessRequests(); ) ensures that news feed requests are “frictionless” in that they enable users to send requests to specific friends without having to click on a pop-up confirmation dialog. This command option is for the Apple iOS* platform only since Google Android* requests are automatically set to be "frictionless".

Facebook Developer Page Setup

The first step to integrating Facebook functionality into your application is to create a Facebook application. This setting can then be used to add Facebook functionality to your HTML5 hybrid application or allow you to build your application for Facebook.

Navigate to the Facebook developer site (http://developer.facebook.com) and set up a new Facebook application. Set up the basic information including the display name and category.

Set the App Domains

Set the App Domains field to html5tools-software.intel.com.

Add Website Platform

After setting up the Facebook application, click on Add Platform and select Website.

Set the Mobile Site URL to:

http://html5tools-software.intel.com

Copy the Facebook App ID

Once the Mobile Web URL is set, copy down the Facebook Application’s App ID for the next step. The App ID is a unique 15-digit number generated by Facebook to identify an application running on their system.

Testing Facebook Integration on Mobile Devices

Testing the Facebook Integration on device requires a few more settings to the application on Facebook’s side, as well as setting up a Facebook test application to host the application code. It will work with both iOS and Android devices.

Building for iOS

Get the iOS Application ID

The first step to enabling iOS applications to integrate with Facebook is to find your application’s bundle ID. This information is available in step 1a of the XDK build process.

Give Facebook the Application ID

Return to the Facebook developer’s site. Click on Add Platform and select iOS. Paste the bundle ID into the field for Bundle ID. Copy the App ID from Facebook and paste it into Step 4b of the build process (Facebook Application ID). In step 4b of the build process enter fbXXXXXXXXX (where XXXXXXXX is your App ID from 4a). Save your changes.

Once your application is in the Apple Appstore, copy down the store ID Apple assigns to the application once it has been submitted to the appstore, and drop them into the appropriate App Store ID fields. That way, Facebook can redirect iOS users to your app.

Building for Android

Get the Android Application ID

The first step to enabling Android applications to integrate with Facebook is to find your application’s Package Name. This information is available in step 1a of the XDK build process.

Copy the Android Key Hash from the XDK Build Procedure

Take your application's 15-digit Facebook Application ID copied from earlier in this tutorial and drop it into step 4a of the XDK build process. That should allow the XDK to generate a Facebook Application Signature. Copy this information to your clipboard.

Copy the Android Key Hash and Package Name into Facebook

Return to the Facebook developer’s site. Click on Add Platform and select Android. Paste thepackage name into the field for Bundle ID. Paste the Android Key Hash into the Key Hashes portion of the page. Save your changes.

Download the Sample App

Download a copy of the sample "Awesome Possum" sample app here.