I was stuck regarding facebook implementation through PhoneGap. Though Phonagap provides a plug-in but you need to have facebook application installed on your device and that created a question for me. So here is it with the implementation of childBrowser PhoneGap plugin and the GIGYA API.
Initial Steps
1. Do have a registered Gigya account. you will get a API KEY and the site which you are adding needs to be a valid server as you will be hosting a small html page.
2. Create a new phonegap project.
3. Implement the childBrowser Plug-I. This post helped me as I was implementing it for the first time
http://simonmacdonald.blogspot.com/2011/09/phonegap-android-childbrowser-revamp.html
4. Here is the code....
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Child Browser Example</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
function init(){
document.addEventListener("deviceready", onDeviceReady, false);
gigya.services.socialize.addEventHandlers({}, {
onLogin:DisplayEventMessage,
onConnectionAdded:DisplayEventMessage,
onConnectionRemoved:DisplayEventMessage
}
);
}
function DisplayEventMessage(eventObj) {
alert(eventObj.eventName + " event happened");
}
function onDeviceReady() {
alert("PhoneGap is ready");
}
function locationChanged(newurl)
{
//alert("The JS got this url = " + newurl);
console.log(newurl);
var access=newurl.split("#");
var token=access[1].split("=");
//alert(token[0]);
if(token[0]=="access_token")
{
//Status URL...Through which status on facebook will be set
var statusurl="https://socialize.gigya.com/socialize.setStatus?status=welcome&oauth_token="+token[1];
//window.open(statusurl);
localStorage.accessToken=token[1];
window.plugins.childBrowser.close();
window.location="Messages.html";
console.log(statusurl);
function openNew(statusurl)
{
alert(statusurl);
window.plugins.childBrowser.openExternal(statusurl);
}
function closed() {
alert("The JS got a close event");
}
function showPage(locbar) {
window.plugins.childBrowser.onLocationChange = locationChanged;
window.plugins.childBrowser.onClose = closed;
var url="https://socialize.gigya.com/socialize.login?client_id=yourGigyaAPIKEY&redirect_uri=http:yourSite/yourPage.html&x_provider=facebook&response_type=token";
showBrowser(url,locbar);
}
function showBrowser(url,locbar)
{
window.plugins.childBrowser.showWebPage(url, {showLocationBar: locbar});
}
</script>
</head>
<body onload="init()" id="stage" class="theme">
<a href="#" class="btn large" onclick="showPage(true); return false;">Login to Facebook</a></p>
</body>
</html>
So, thats it.. you don't need to have a facebook app installed on your device..
Will come up with more things on this.
Any suggestions gracefully accepted....
Initial Steps
1. Do have a registered Gigya account. you will get a API KEY and the site which you are adding needs to be a valid server as you will be hosting a small html page.
2. Create a new phonegap project.
3. Implement the childBrowser Plug-I. This post helped me as I was implementing it for the first time
http://simonmacdonald.blogspot.com/2011/09/phonegap-android-childbrowser-revamp.html
4. Here is the code....
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Child Browser Example</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
function init(){
document.addEventListener("deviceready", onDeviceReady, false);
gigya.services.socialize.addEventHandlers({}, {
onLogin:DisplayEventMessage,
onConnectionAdded:DisplayEventMessage,
onConnectionRemoved:DisplayEventMessage
}
);
}
function DisplayEventMessage(eventObj) {
alert(eventObj.eventName + " event happened");
}
function onDeviceReady() {
alert("PhoneGap is ready");
}
function locationChanged(newurl)
{
//alert("The JS got this url = " + newurl);
console.log(newurl);
var access=newurl.split("#");
var token=access[1].split("=");
//alert(token[0]);
if(token[0]=="access_token")
{
//Status URL...Through which status on facebook will be set
var statusurl="https://socialize.gigya.com/socialize.setStatus?status=welcome&oauth_token="+token[1];
//window.open(statusurl);
localStorage.accessToken=token[1];
window.plugins.childBrowser.close();
window.location="Messages.html";
console.log(statusurl);
}
}function openNew(statusurl)
{
alert(statusurl);
window.plugins.childBrowser.openExternal(statusurl);
}
function closed() {
alert("The JS got a close event");
}
function showPage(locbar) {
window.plugins.childBrowser.onLocationChange = locationChanged;
window.plugins.childBrowser.onClose = closed;
var url="https://socialize.gigya.com/socialize.login?client_id=yourGigyaAPIKEY&redirect_uri=http:yourSite/yourPage.html&x_provider=facebook&response_type=token";
showBrowser(url,locbar);
}
function showBrowser(url,locbar)
{
window.plugins.childBrowser.showWebPage(url, {showLocationBar: locbar});
}
</script>
</head>
<body onload="init()" id="stage" class="theme">
<a href="#" class="btn large" onclick="showPage(true); return false;">Login to Facebook</a></p>
</body>
</html>
So, thats it.. you don't need to have a facebook app installed on your device..
Will come up with more things on this.
Any suggestions gracefully accepted....
