This document will illustrate how to add Facebook functionality to your application using the credentials component of Intel’s App Dev Center. It 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. For more information on how to use Facebook in an application, find the basic article here.
The JavaScript Bridge APIsThe Intel® HTML5 Development Environment JavaScript API includes a Facebook object that will trigger the native Facebook API within a native application built using the App Dev Center build system. For more information on the Facebook technology that is used in the build system, see Facebook’s site here.
Login
This command 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 (appMobi.facebook.login) indicating whether the login was successful or not. AppMobi.facebook.login(permissions) Log in to Facebook with the requested permissions. If none are specified, defaults will be used. 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:
document.addEventListener("appMobi.facebook.login",function(e){ if (e.success == true) { console.log("Facebook Log in Successful"); } else { console.log("Unsuccessful Login"); } },false); AppMobi.facebook.login("publish_stream,publish_actions,offline_access"); Logout
This command is used to log the user out of Facebook. AppMobi.facebook.logout() Here is a block of sample code to illustrate how the logout process works:
document.addEventListener("appMobi.facebook.logout",function(e){ if (e.success == true) { console.log("Logged out of Facebook"); } else { console.log("Unsuccessful Logout"); } },false); AppMobi.facebook.logout(); Request with REST API
This API command is used to make requests against the older Facebook REST API. This API is being deprecated by Facebook, and may not be available in the future. For more information on Facebook’s REST API see the Facebook documentation here. AppMobi.facebook.requestWithRestAPI(command, method, parameters);
Request with Graph API
This API command is used to make requests from the newer Facebook Graph API. For more information on this particular API, see Facebook’s documentation here. AppMobi.facebook.requestWithGraphAPI(path, method, parameters) 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.
var facebookUserID = "me"; //me = the user currently logged into Facebook document.addEventListener("appMobi.facebook.request.response",function(e) { console.log("Facebook User Friends Data Returned"); if (e.success == true) { var data = e.data.data; var outHTML = ""; for (var r=0; r< data.length; r++) { outHTML += "![]()
"; } document.getElementsByTagName("body")[0].innerHTML = outHTML; document.removeEventListener("appMobi.facebook.request.response"); } },false); AppMobi.facebook.requestWithGraphAPI(facebookUserID + "/friends","GET",""); Test out a path/method/parameters with the Facebook Graph Explorer.
Show Application Request Dialog
This API command 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 a Multi Friend Selector Dialog, allowing the sending user to select multiple recipient users. Find more information on Facebook’s request dialog here. AppMobi.facebook.showAppRequestDialog(parameters); Here’s an example code block:
document.addEventListener("appMobi.facebook.dialog.complete",function(e) { console.log("Permissions Request Returned"); if (e.success == true) { console.log("News feed updated successfully"); } else { console.log("permissions request failed"); } },false); var objParameters = {"to":"USER_ID_HERE","message":"My Awesome Message","title":"A title for this dialog would go here"} AppMobi.facebook.showAppRequestDialog(objParameters); Show News Feed Dialog
This API command is used to prompt the user to publish an individual story to a profile’s feed. Find more information about the feed dialog here. AppMobi.facebook.showNewsFeedDialog(parameters); Here’s a sample code block:
//This allows you to post to your Facebook Wall document.addEventListener("appMobi.facebook.dialog.complete",function(e) { console.log("News Feed Event Returned"); if (e.success == true) { console.log("News feed updated successfully"); } },false); var objParameters = { "picture":"http://fbrell.com/f8.jpg", "name":"Facebook Dialog", "caption":"This is my caption", "description":"Using Dialogs to interact with users.", "link":"http://www.appmobi.com/documentation" } AppMobi.facebook.showNewsFeedDialog(objParameters); <h2 This command 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". AppMobi.facebook.enableFrictionlessRequests();
Facebook Developer Page SetupThe 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 namespace.
Set the App Domains
Set the App Domains field to html5tools-software.intel.com and set Sandbox Mode to Disabled.
Set the Mobile Web URL
After setting up the Facebook application, edit the application and set the Mobile Web 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.
Give App Dev Center the Facebook App ID
Log into the App Dev Center at:
http://appcenter.html5tools-software.intel.com
If you haven’t used App Dev Center in the past, find out more about how to use it here.
If you haven’t yet set up an application to test Facebook Integration, click on the Add or Register an App button.Upload the sample application included with this document for the test.
Find the application to test Facebook integration within the Control Center, and click on the Credentials icon.
Select the Configure Facebook option, and then paste the Facebook App ID copied from the previous step into the appropriate edit field. Enter the same App ID with the letters ‘fb’ in front of it in the Protocol Handler field, unless the particular application uses a different protocol handler for some reason.
Please be aware that since the callback will be unique for each application, you may only have one Facebook App Id per App. Sharing a single Facebook App Id between HTML5m apps could break the process.
Testing Facebook Integration in the XDKThe first place to test Facebook integration is within the XDK. The XDK may be installed here:
http://xdk-software.intel.com/
Install the Facebook sample application found along with this implementation guide into a brand new application. If you run the game in the XDK, it should look something like this.
Touching the Facebook icon in the upper right-hand corner will allow the user to log into Facebook and make a post inviting other folks to play “Awesome Possum” with them. The code to make that post is delivered through a helper library, but the basic post command should look like this:
document.addEventListener("appMobi.facebook.dialog.complete",function(evt){ console.log("dialog post complete"); },false); AppMobi.facebook.showNewsFeedDialog({"name":"Awesome Possum","caption":"Join the crowd! Awesome Possum is real roadkill-munching fun. Click to try it out now!","link":"http://apps.facebook.com/awesomeaspossum/","picture":"http://dev.appmobi.com/documentation/images/possums.jpg"}); It is passed a JavaScript object with a variety of parameters. The valid parameters that Facebook accepts for news feed dialogs can be found on their documentation site. The app_id parameter is provided automatically.
When the user activates the code, they should be presented with a page like the one shown below once they log into Facebook:
Testing the Facebook Integration on device is pretty straightforward. It requires a few more settings to the application on Facebook’s side, as well as setting up a test application to host the application code. It will work with both iOS and Android devices.
Get the iOS Application ID
The first step to enabling iOS applications to integrate with Facebook is to find your HTML5m application’s bundle ID. The easiest way to do this is to mouse over the iOS Build Button and select Change Build Settings.
In the build settings, look at step 5c for the bundle ID. Copy it down for later.
Give Facebook the Application ID
Return to the Facebook developer’s site and reopen the Facebook application used for the application. Select the Edit Settings option to change how the application interacts with Facebook. Open up the settings for Native iOS Application. Paste the bundle ID into the field for iOS Bundle ID.
Next, 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. Finally enable both Configured for iOS SSO and iOS Native Deep Linking.
Copy the Android Key Hash from App Center
Next, you’ll want to set up Facebook integration for the Android version of your app. The first step to enabling Android applications to integrate with Facebook is to find your application’s Facebook Application Signature. The easiest way to do this is to mouse over the Android Build Button and select Change Build Settings.
During step 4b of the Android build process, copy the Facebook Application Signature from App Center. The Facebook Application Id should already be in the field for 4a.
Give Facebook the Application Signature
Log back into the Facebook Developer page, and open up the settings for a Native Android App. Enable the setting for Facebook Login: and paste the application signature taken from the App Center build process into the field marked Key Hash. Also, you will need to paste your BundleID (you can access this from the iOS build, step 5c).
Once you feel confident that the application is working appropriately in the XDK, build the application for iOS or Android (including Amazon and Nook Android builds).
Select the app building drop down to reveal the list of potential build targets.
Select the appropriate build button to start the process for building the application for iOS, Android, Amazon, or Nook. Follow the onscreen instructions. For more information on using the cloud build system, check out this document.
Building your Application for FacebookThe Facebook build button will allow you to create a version of your application appropriate for the Facebook Canvas. For more information from Facebook about the canvas, read Facebook’s documentation on the subject here.
Clicking on the build for Facebook button will give you the ability to size your application appropriately for the Facebook canvas. For best results, consider setting the height and width to match the AppMobi.device.useViewPort command. For example, the sample application uses the following function to handle the appMobi.device.ready event.
var onDeviceReady=function(){ //Size the display to 768px by 1024px AppMobi.display.useViewport(768,1024); //put the app in Landscape mode AppMobi.device.setRotateOrientation("landscape"); AppMobi.device.setAutoRotate("false"); } The Facebook application should then use the following settings when it is built:
The result of the build is a URL that carries some query string parameters. The following parameters are simply generated by the build settings:
•fbh – Height of the sized Facebook application
•fbw – Width of the sized Facebook application
•fbs – Scale of the Facebook application, use this to resize the entire application. A value of ‘1’ indicates no scaling (or scaling at 100%).
Any other query string parameters added to this string will be passed through normally to the application.
When the Facebook build completes, download the zip file. At this point you can host it on your own server, or you can host the files with appMobi. If you choose to host with appMobi, click the button to do so. You will need to setup your application with appMobi. After you upload your Facebook build to appMobi, you will be provided with a Content URL. Use this URL (or the URL that you host your application with) to populate the App on Facebook settings.
Reopen the Facebook developer site and edit the settings for the sample application. Take this URL generated by the Facebook build and insert it into the App on Facebook section of the page. Use the same URL with an https:// rather than an http:// for the Secure Canvas URL entry.
