I has developed my apps and now I want to integrate them into Facebook. But I realize that it is dificult. I have this init method:
<javascript>
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true,
channelUrl : 'http://xyz.dyndns.org:8080/fbchannel.html',
oauth : true
});
</javascript>
After that, I can call FB.login, and FB.ui to prompt to get permission, it's OK. But if I want to get some information with FB.api() (for example, get the user name, etc.), it doesn't work. How do I call the API?
The problem is: I can call fb.init. fb.login, fb.ui, and fb.getLoginStatus, but I can't call fb.api, not even the simplest method.
In my application setting, I used an application in Facebook, and then I typed my URL (a web application), htt://xyz.dyndns.org:8080/... . Is it OK?
(I am a newcomer in making applications in Facebook.)
What error are you getting? Here is a working FB.api call example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
Get Info
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: '**appId**', status: true, cookie: true, xfbml : true });
function getInfo() {
FB.login(function(response) {
if (response.session) {
FB.api('/me', function(response) {
alert('User: ' + response.name);
});
}
});
return false;
}
</script>
</body>
</html>
Related
I want to load facebook api ( javascript SDK) synchronously. I have seen this code on facebook developers.
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
and also on reference to another link
http://www.masteringapi.com/tutorials/facebook-javascript-sdk-best-practices/58/
is is mentioned that "But you need to make sure you don’t define FB in your own JS code or libraries!"...............
I am confused ....!
Please help me....
What you are doing looks fine.
The instruction that you've seen, "But you need to make sure you don’t define FB in your own JS code or libraries!" is simply a warning to not declare a variable named FB in your application, or you will hide the Facebook SDK.
In your code, on the very next line, you could begin making calls with FB.api or any of the other methods.
Does that help?
Add the below code after opening html tag
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'Your APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session
xfbml: true, // parse XFBML
oauth: 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);
} ());
</script>
This code will load the javascript SDK asynchronously.
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>
I am using FB.getLoginStatus for an application in Facebook. This works fine in all the browsers, including IE8. But it doesn't work for IE7. My code is:
FB.getLoginStatus(function(response) {
if (response.session) {
alert("logout");
}
else{
FB.Event.subscribe('auth.login', function(response) {
login();
});
alert("login");
}
});
Does anyone know why?
According to the documentation at http://developers.facebook.com/docs/reference/javascript/fb.init/, the proper solution is to create a file on your web server (for instance channel.html) containing just:
<script src="http://connect.facebook.net/en_US/all.js"></script>
And then specifying the absolute URL to your channel.html in your init options:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
channelUrl : 'http://example.com/channel.html' // custom channel
});
</script>
For convenience in deployment, I use the following to calculate my channelUrl.
var curLoc = window.location;
curLoc.protocol + "//" + curLoc.hostname + ":" + curLoc.port + "/channel.html"
Currently this API (FB.getLoginStatus) is not working anymore on IE7 browsers.
Take a look here:
getLoginStatus not Fired on IE7
If you try to run the code in the following page on IE7 it's not working:
http://www.fbrell.com/auth/login-and-logout
It seems the "channelUrl" fix is not working anymore and the IE7 support for the Facebook Javascript SDK is compromised.
Here is what I want to:
I used OAuth 2.0 authorization system.
I already registered my application in Facebook, and I have got my application secret keys (i did server side code, but I need more user friendy authorization system).
Based on response from Facebook, how can I get response code from Facebook without reloading the page? In case you didn't understand what I mean take a look on next example:
Example is on this link:
http://www.badminton.si/1-turnir-b-kategorije-1-kolo-mbl
How can I then continue to get my access token so I can access my private information (like email)?
IN SHORT:
<script type="text/javascript" src="../Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect/en_US/core.debug.js"> </script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
FB.init({
appId: my_api_key,
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('auth.login', function (response) {login();)}
FB.Event.subscribe('auth.logout', function (response) {logout();});
FB.getLoginStatus(function (response) {if (response.session) {login();}});
function login() {FB.api('/me', function (response) {alert(response.email)});
....
<fb:login-button v="2" size="large" autologoutlink="true" perms="email,user_birthday,status_update,publish_stream,read_stream">
</fb:login-button>
Just follow the examples on http://developers.facebook.com/docs/authentication/
On most of the functions you'll get callbacks that you can catch to get a token without having to reload the page.
From the documentation:
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
With the response.session object you should get everything you need without having to reload the page.
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.