FaceBook Login Logout using cordova 3.3.0 cli.

In recent past i faced a lot problem in setting up the cordova facebook plugin with cli 3.3.0.After a lot of search i found it is typo from cordova.I am here sharing the easiest steps to setting up cordova facenook plugin using cordova cli 3.3.0 .

How to set up the Facebook plugin With cordova 3.3.0 cli for android ?

before Setting Facebook plugin with cordova 3.3.0 you have to setup these

Prerequisite :

JdK
Apache Ant
Node.js and NPM
Git
Cordova 3.3.0 CLI

Once you installed all the above properly.Open your command prompt and go to your project directory and run this command

cordova create facebookTutorial in.blogspot.javacourseblog javacourseblog

view raw commands hosted with ❤ by GitHub

you will see the screen like above after running the command . You have created a cordova project.Change your directory to facebookTutorial

Now you are inside cordova project which you just created .Run the below command.

cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID=your_facebook_app_id --variable APP_NAME=your_facebook_app_name

view raw facebook plugin command hosted with ❤ by GitHub

Now you installed facebook plugin in your cordova project. But if you will run the command cordova plateform add android it will get failed and ask you to putt appid and appname.

For removing this error locate the folder \plugins\com.phonegap.plugins.facebookconnect inside your projectfolder.

Open The plugin.xml file from \plugins\com.phonegap.plugins.facebookconnect folder and find the lines

	<preference name="APP_ID" />
	<preference name="APP_NAME" />

view raw Preferences.xml hosted with ❤ by GitHub

Modify it to

	<param name="APP_ID" value="288492194593093" />
	<param name="APP_NAME" value="FriendString" />

view raw modify Xml.xml hosted with ❤ by GitHub

Where value is your app id and your app name.

Run the command cordova platform add android . The screen similar to below will appear.

Now you have installed facebook plugin and created android project.
Now we will see how to get login to facebook through cordova facebook plugin ?

Now open the index.html file from your projectfolder/www in your favorite editor. And delete everything from this .

You have a Blank index.html file.Write some dom elements inside your body Tag

	<button onclick="login()">Login</button>
	<button onclick="getLoginStatus()">Get login</button>
	<button onclick="logout()">Logout</button>
	<div id="data">loading ...</div>

view raw Dom.html hosted with ❤ by GitHub

Your Dom structure is ready . Now Make reference of cordova.js ,cdv-plugin-fb-connect.js and facebook-js-sdk.js

	<!-- cordova -->
	<script src="phongap.js"></script>
	<!-- cordova facebook plugin -->
	<script src="cdv-plugin-fb-connect.js"></script>
	<!-- facebook js sdk -->
	<script src="facebook-js-sdk.js"></script>

view raw cordovaReference.html hosted with ❤ by GitHub

Now come to your <script></script> portion and check the cordova facebook and cdv agent are included properly inside your project

	if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable is missing. Check cordova.js included correctly');
	if (typeof CDV == 'undefined') alert('CDV variable is missing. Check cdv-plugin-fb-connect.js is included correctly');
	if (typeof FB == 'undefined') alert('FB variable is missing. Check the Facebook JS SDK file included.');

view raw cordovaagent.js hosted with ❤ by GitHub

Write event handler function for login logout and status change.

	FB.Event.subscribe('auth.login', function(response) {
	alert('login event fired !!');
	});

	FB.Event.subscribe('auth.logout', function(response) {
	alert('logout event fired !!');
	});


	FB.Event.subscribe('auth.statusChange', function(response) {
	alert('statusChange event fired !!');
	});

view raw Fbevent.js hosted with ❤ by GitHub

Its time to initialize FB sdk now. Here i am initializing it with device ready event

	document.addEventListener('deviceready', function() {
	try {
	alert('Device is ready! Write your app id below .For demo i put my app id there.');
	FB.init({ appId: "775510399143062", nativeInterface: CDV.FB, useCachedDialogs: false });
	document.getElementById('data').innerHTML = "";
	} catch (e) {
	alert(e);
	}
	}, false);

view raw facebook device ready.js hosted with ❤ by GitHub

Once the fb is initialize we can make login to facebook through our application.Here the function for log in

	function login() {
	FB.login(
	function(response) {
	if (response.session) {
	alert('you are logged in');
	} else {
	alert('you are not logged in');
	}
	},
	{ scope: "email" }
	);
	}

view raw Login.js hosted with ❤ by GitHub

For the Logging out

	function logout() {
	FB.logout(function(response) {
	alert('logged out');
	});
	}

view raw Logout.js hosted with ❤ by GitHub

For getting the login status here is the code snipet

	function getLoginStatus() {
	FB.getLoginStatus(function(response) {
	if (response.status == 'connected') {
	alert('You are connected to Fb');
	} else {
	alert('not connected to FB');
	}
	});
	}