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.
- Android and iOS Device(Testing).
- Intel App Preview Installed on your Device.
- The Intel XDK installed on your workstation.
To include Facebook Plugin follow the below mentioned steps:
- Create a new project by clicking start a new project.
- Select HTML + Cordova. Check the box Use App Designer.
- 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.
- Select App Framework.
- To use this plugin you will need to make sure you've registered your Facebook app with Facebook developer account and have an
APP_IDin short register the app to get app id.
- Now go to list of projects and select the newly created project.
- Enlarge the plugin section, go towards feature and custom Cordova plugins and select Facebook Connect.
- A window will pop up prompting for Facebook App Id and Facebook App name fill in these fields.
- Once you will click save you can see the plugins are included.
How to get Facebook App Id?
- Visit: https://developers.facebook.com/apps and login with your Facebook credentials. (If you don’t have one you can sign up for).
- Now click Add a New App and select Android or iOS.
- In text space enter the name of your app and hit Create New Facebook App ID.
- And after entering few selections like Category of the app and all you will be able to click Create App ID.
- In order to connect the app with particular Login ID enter the Bundle ID.In Intel XDK Bundle ID resides under build settings for all the platform it is same which is under App ID section. Just copy that and paste as shown in the below screenshot.
- 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.
- 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.
- Go back to XDK and Start a new project and Select Import your HTML5 code base.
- 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.
- Provide a project name and hit create and then continue.
- Go to Index.html and copy the app Id in this following line of code:
var appId = "Enter FB Application ID";
- 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, Logout, User profile functionality for Facebook:
- For this just follow the above instruction for Including Facebook Plugin from step 1-9.
- Click the develop tab and select the Design view.( I have included a header which displays app name and button which triggers login action).
- From the code view switch to the code view.
- Now on the left side bar there are several files listed, open the index.html and copy the code from github.
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
Screenshots after building the app. Include facebook app id which was generated through previous steps.
Good Luck & Enjoy!