Sunday, January 27, 2013

Facebook Connect & Jquery For mobile, Phonegap android app


If you want to create an android native app rather the a web app then you need Facebook android sdk for connect purpose. If you want to use html 5, jquery and other stuff and want to create a native app from these
scripting languages. Then one of the good solution is phone gap. Below example demonstrate how to create a phone gap project.

For setup download few things:

1) PhoneGap sdk
2) Facebook android sdk, For your help here is a jar file with all class files sdk have.
3) Phonegap plugin facebook connect



Step A:
          i) Extract facebook android sdk and copy \facebook-android-sdk-3.0.2.b\facebook to your destination folder.
ii) Open eclipse and go to File -> Import -> Existing Project into work space.
iii) Then go to your dest. work space and select the facebook project.
iv) Modify AndroidManifest according to your requirements and add permission for internet access.
v) facebook is name of my project.

Step B:

i) Extract PhoneGap sdk. Go to folder phonegap-2.3.0\lib\android.
ii) Copy folder xml and past it into facebook/res
Add below lines in xml

<plugin name="org.apache.cordova.facebook.Connect" value="org.apache.cordova.facebook.ConnectPlugin" />

iii) Copy cordova-2.3.0.jar into folder facebook/libs. Right click the jar and select Build Path -> Add to Build Path.
iv) Copy cordova-2.3.0.js into  \facebook\assets\www. IF you dont find these folders the create.
vii) Create a droid activity as we do in PhoneGap. Let say MainActivity.java

Step C:
By Project here I mean facebook the destination project.

i) Extract Phone facebook connect plugin.
ii) Copy www/cdv-plugin-fb-connect.js into project assets\www.
iii) Copy lib/facebook_js_sdk into project assets\www.
iv) Copy org\apache\cordova\facebook\ConnectPlugin.java to project src folder.
v) Copy contents fron folder phonegap-plugin-facebook-connect-master\example\HackBook  to project assets\www.
vi) Edit index.html and put your facebook app id there. Click for Tutorial 


Note: Right Click project Go to Properties -> Android and un check Is Library option. 

You can use Jquery for mobile in this project , put jquery for mobiles css and js files into www/css,
www/js folders.
You index.html will look like this. 

Now you can run project on device.

For Source code click.






Click here for Referece.