Looking for working example of WP7 PhoneGap Facebook plugin for signin button - facebook

I've tried all the code at https://github.com/davejohnson/phonegap-plugin-facebook-connect
that is recommended by the phonegap community, but i keep running into errors trying to get it to work.
As you can see I'm using cordova 1.6.0 which maybe the problem?
i've added the script files to in my html page
<script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
<script type="text/javascript" charset="utf-8" src="cdv-plugin-fb-connect.js">/script>
<script type="text/javascript" charset="utf-8" src="facebook_js_sdk.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
And I've added the ChildBrowserCommand.cs into the plugins directory.
I then added this to device ready listener with my authentic app id (the real id not shown here)
document.addEventListener("deviceready",onDeviceReady,false);
// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady() {
//document.getElementById("welcomeMsg").innerHTML += "Cordova is ready! version=" + window.device.cordova;
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
//fb connect sign in
try {
//alert('Device is ready! Make sure you set your app_id below this alert.');
console.log('Device is ready! Make sure you set your app_id below this alert.');
FB.Cookie.setEnabled(true); // this seems to be duplicate to 'cookie: true' below, but it is IMPORTANT due to FB implementation logic.
FB.init({ appId: "311961255484993", nativeInterface: CDV.FB, cookie: true });
login();
} catch (e) {
//alert(e);
console.log("Init error: " + e);
}
};
function login() {
FB.login(
function (response) {
if (response.session) {
console.log('logged in');
} else {
console.log('not logged in');
}
},
{ scope: 'email, read_stream, read_friendlists' }
);
}
The error i get is
Unable to locate command :: org.apache.cordova.facebook.Connect
Any help?
EDIT: I also realize it's coming from cdv-plugin-fb-connect.js in here but not sure why?
cordova.exec(function () {
var authResponse = JSON.parse(localStorage.getItem('cdv_fb_session') || '{"expiresIn":0}');
if (authResponse && authResponse.expirationTime) {
var nowTime = (new Date()).getTime();
if (authResponse.expirationTime > nowTime) {
// Update expires in information
updatedExpiresIn = Math.floor((authResponse.expirationTime - nowTime) / 1000);
authResponse.expiresIn = updatedExpiresIn;
localStorage.setItem('cdv_fb_session', JSON.stringify(authResponse));
FB.Auth.setAuthResponse(authResponse, 'connected');
}
}
console.log('Cordova Facebook Connect plugin initialized successfully.');
}, (fail ? fail : null), 'org.apache.cordova.facebook.Connect', 'init', [apiKey]);
},

Related

Trouble with facebook sdk quickstart

Following directions here https://developers.facebook.com/docs/javascript/quickstart
I started with a mostly blank HTML page, just the HTML, Body tags, and a simple Hello World.
I copied and pasted directly from the quickstart page but get nothing (but Hello World does Load).
I have an app ID (I wasn't sure if I should include the {} or not, tried both ways, no change.
I added the code from section "Using the SDK to add Social Plugins", "Using the SDK to trigger a Feed dialog" etc and nothing. Running on CentOS/Apache, server is fine. Not sure what I'm missing. Thoughts?
Thank you for your time.
PS page is here to view source: http://nex916.elementfx.com/purity3.html
Maybe something like the following will be of help?
<div id="fb-root"></div>
<!-- Load the Facebook JavaScript SDK -->
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Initialize the Facebook JavaScript SDK
FB.init({
appId: 'YOUR_APP_ID',
xfbml: true,
status: true,
cookie: true,
});
// Check if the current user is logged in and has authorized the app
FB.getLoginStatus(checkLoginStatus);
// Login in the current user via Facebook and ask for email permission
function authUser() {
FB.login(checkLoginStatus, {scope:'email'});
}
// Check the result of the user status and display login button if necessary
function checkLoginStatus(response) {
if(response && response.status == 'connected') {
//alert('User is authorized');
// Hide the login button
document.getElementById('loginButton').style.display = 'none';
// Now Personalize the User Experience
//console.log('Access Token: ' + response.authResponse.accessToken);
} else {
//alert('User is not authorized');
// Display the login button
document.getElementById('loginButton').style.display = 'block';
}
}
FB.ui(
{
method: 'feed',
name: 'The Facebook SDK for Javascript',
caption: 'Bringing Facebook to the desktop and mobile web',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'https://developers.facebook.com/docs/reference/javascript/',
picture: 'http://www.fbrell.com/public/f8.jpg'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
<input id="loginButton" type="button" value="Ligin with Facebook" onclick="authUser();" /></div>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
You have a syntax error in your JS
SyntaxError: syntax error purity2.html:26
To fix it, remove }; from line 19
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
}; // this
it should be like
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
console.log('Logged in');
} else {
FB.login();
}
});
Now your code should work

FB is not defined in Facebook Login

I have the following code but the FB.login gives a FB is not defined javascript error.
What am I missing?
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init
({
appId : 'XXXX',
status : true,
cookie : true,
xfbml : true
});
};
(function()
{
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
FB.login(function(response)
{
if(response.session)
{
if(response.perms)
{
alert('yippee');
}
else
{
alert('oh no');
}
}
else
{
alert('login silly');
}
}, {perms:'email,user_birthday'});
</script>
hello
<fb:login-button></fb:login>
</body>
</html>
The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.
Try by keeping other initialization code in between inialization and login function
Or keep FB.login code in $(document).ready
$(document).ready(function(){
FB.login(function(response)
{
if(response.session)
{
if(response.perms)
{
alert('yippee');
}
else
{
alert('oh no');
}
}
else
{
alert('login silly');
}
}, {perms:'email,user_birthday'});
});
You should not call to FB.login before JS-SDK is loaded, window.fbAsyncInit designed especially for this. If you move this call to be within window.fbAsyncInit function you'll be fine but be aware of fact that calling to FB.login opens popup, doing this without user interaction will be probably blocked by most browsers. If you want to use FB.login to handle login, you must do it on click or sumbit events...
BTW, you already have fb:login-button which is doing login once user clicks on it.
You can also get this error if you try to launch the facebook example code on your machine (e.g. copying the code in a .html file and trying to open it in your browser). You will need to upload this to your server and run it from there.

Custom login button VS. fbml button

For a few days i was trying to use a custom button to invoke login
$(".join").live("click", login);
function login(){
FB.login(function(response) {
if (response) {
console.log('Login success.');
FB.api("/me", handleMe);
}
else {console.log('Login cancelled.')}
});
}
function handleMe(response) {
$.ajax({
async: 'false',
type: 'GET',
url: 'www. address.com',
data:
"uid=" + response.id +
"&name=" + response.name,
success: function(){
console.log('Ajax successful.');
console.log("<?php echo $this->session->userdata('fb_uid'); ?>");
window.location = "www. address.com";
},
error: function(){console.log('Ajax failed.');}
});
}
$(".join,.log,.biggie-btn").live("click", login);
However it was always buggy, the login window would not close (oddly, most of the times) and after I closed it, I would not get the user FB.API details, and I had to refresh the page to get them.
As soon as I switched to the bugs were gone (having exactly the same functionality), however I can't control now the style of the login button.
Is there a solution, to have a fully functional custom login button?
You can use the Facebook javascript SDK and easily build your own login button. Just have the button class FB.login and pass it a callback function and optionally any extended permissions you need. Upon success, this will set a cookie that has an access_token that you can use from server code if needed. Otherwise, you can just call javascript sdk functions.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Custom Login Button
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'your app id', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session && response.perms) {
FB.api('/me',
function(response) {
alert('User: ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:'user_about_me'});
}
</script>
</body>
</html>

How do I integrate the invite multiple friends from facebook to my site

I want to integrate an invite friends from facebook option like how foursquare have implemented it. I checked out the fb:Request form but wasn't able to run it successfully. Plus I heard theyre deprecating the legacy FBML library so is there any better way of doing this?
I'm working in php here.
The Facebook requests dialog has replaced it. It uses the Facebook javascript SDK.
Full example (click here to run it on jsfiddle):
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Invite your friends
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: '**yourAppId**', status: true, cookie: true, xfbml : true });
function sendRequests() {
FB.ui({method: 'apprequests', message: 'You should learn more about this awesome site.', data: 'tracking information for the user'},
function(response) {
if (response != null && response.request_ids && response.request_ids.length >0) {
for(var i = 0; i < response.request_ids.length; i++) {
alert("Invited: " + response.request_ids[i]);
}
} else {
alert('No invitations sent');
}
});
}
</script>
</body>
</html>

Facebook Graph API: FB.login() called before calling FB.init()

I'm trying to use the new Facebook Graph API on my website. This is what I have:
Somewhere on the page:
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>
Right after the tag:
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '<%= ConfigurationManager.AppSettings["FBAppId"] %>', status: true, cookie: true, xfbml: true });
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
but when I click on the generated login button, nothing happens.
In addition, I'm getting
FB.getLoginStatus() called before calling FB.init().
in Firebug console.
Any ideas?
I can't believe it, I was referencing a non existing key in the Web.config hence FB.init was failing silently.
It works as expected now.
To be clearer I wasn't passing the appId to FB.init, once I did, it worked.
Had the same issue, here is the solution that worked for me. Just put the following in your head section or in other words, add the app_id to the source of the facebook js.
<script src="//connect.facebook.net/en_US/all.js&appId=xxxxxxxxxxxxxxx" type="text/javascript"></script>
In my case, the problem went away after I disabled the XFBML functionality (i.e. setting the xfbml key to false, removing the fb: namespace and the #xfbml=1 fragment in <script src="…">). Good that I didn’t need it anyway.
YMMV, there are several other valid reasons why this error message can appear.