Integrate Facebook Connect Plugin (Android* & iOS*) in Intel® XDK Project

Introduction:

While building applications in Intel® XDK this article provides step by step instructions to include Facebook Connect  Plugin for Android and iOS devices to inorder to enable Facebook functionalities in your application like Login, Logout, Get status, Show a dialog etc. 

Requirements:

  1. Android and iOS Device(Testing).
  2. Intel App Preview Installed on your Device.
  3. The Intel XDK installed on your workstation.

To include Facebook Plugin follow the below mentioned steps:

  1. Create a new project by clicking start a new project.
  2. Select HTML + Cordova. Check the box Use App Designer.
  3. If you hit Continue a new window will pop up which consists of two fields Project directory and Project name. Once you provide the project name click Create.
  4. Select App Framework.
  5. To use this plugin you will need to make sure you've registered your Facebook app with Facebook and have an APP_ID in short register the app to get app id.
  6. Now go to list of projects and select the newly created project.
  7. Enlarge the plugin section, go towards feature and custom Cordova plugins and select Facebook Connect.
  8. A window will pop up prompting for Facebook App Id and Facebook App name fill in these fields.
  9. Once you will click save you can see the plugins are included.

 

How to get Facebook App Id?

  1. Visit:  https://developers.facebook.com/apps and login with your Facebook credentials. (If you don’t have one you can sign up for).
  2. Now click Add a New App and select Android or iOS.
  3. In text space enter the name of your app and hit Create New Facebook App ID.
  4. And after entering few selections like Category of the app and all you will be able to click Create App ID.
  5. If you want to see your App ID number you can simply select Skip Quick Start.

 

Test - To verify that the included plugin works. Let’s try out sample.

  1. Download Sample Zip from: https://github.com/Wizcorp/phonegap-facebook-plugin and unzip the entire folder.NOTE: No need to install Cordova CLI because it comes along with the Intel XDK listed in the featured plugins.
  2. Go back to XDK and Start a new project and Select Import your HTML5 code base.
  3. On the right hand side of the window you can click to the file Icon and select from which location file needs to be imported, hit continue.
  4. Provide a project name and hit create and then continue.
  5. Go to Index.html and copy the app Id in this following line of code:

var appId = "Enter FB Application ID";

  1. Now build your app and run and you will be able to see bunch of buttons like Login with Facebook and so on. This signifies that Plugin can perform Facebook functionalities and as it is running the sample by referencing that you can run own project.

NOTE: Instead of Testing or Debugging try to build your Application. Testing on device will successfully show the expected behavior instead of testing on Emulator.

Screenshot of the Sample App

Let's build our own app which has Login functionality for Facebook:

  1. For this just follow the  above instruction  for Including Facebook Plugin from step 1-9.
  2. Click the develop tab and select the Design view.( I have included a header which displays app name and button which triggers login action).
  3. From the code view switch to the code view. 
  4. Now on the left side bar there are several files listed, open the index.html and include this function and call that function as mentioned below.
    <div class="upage vertical-col panel" id="mainpage" data-header="af-header-2" data-footer="none">
                    <div class="event listening button" onclick="login();">Login with facebook</div>// Create a button, which is when clicked calls Login function
    
    
    
    var login = function () {
                    if (window.cordova.platformId == "browser") {
                        var appId = "Your app Id"
                        facebookConnectPlugin.browserInit(appId);
                        alert(JSON.stringify(facebookConnectPlugin))
                    }
                    facebookConnectPlugin.login( ["email"], 
                        function (response) { alert(JSON.stringify(response)) },
                        function (response) { alert(JSON.stringify(response)) });
                }
  5.   Now build your app and run on the device.NOTE: Go through the documentation for guidance on how to build for apple devices.https://software.intel.com/en-us/xdk/docs/building-cordova-ios-apps-intel-xdk

  6. Screenshots of the app.

Good Luck & Enjoy!

References

 

 

 

 

 

 

For more complete information about compiler optimizations, see our Optimization Notice.