Currently I have the following button, when using facebook javascript:
and I want to get this one:
What should I change?
Currently the way I did this is using the following code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
With Facebook PHP-sdk you can replace it with any button or icon
<?php if ($me) { ?>
<img src="logout-image.png">
<?php } else { ?>
<img src="login-image.png">
<?php } ?>
Or http://fbrell.com/xfbml/fb:login-button
For that particular button, you will have to include the image yourself and bind the functionality with one of the SDKs available:
http://developers.facebook.com/docs/sdks/
I personally prefer using the JS SDK to open the login prompt.
You can use regular login button, which is the approach that #MNVR has described in his answer.
Just replace the text "Login With Facebook" with "Connect With Facebook" in your login button code. Or use the below code.
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<fb:login-button>Connect with Facebook</fb:login-button>
<script>
FB.init({
appId: '123456',
cookie: true,
status: true,
xfbml: true
});
</script>
Related
the facebook javascript sdk login dialog just flashes (i.e shows then hides) if the user is already logged into FB. Is there anyway to stop this from happening or is my code below not quite right?
<div id="fb-root">
</div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'XXXXXXX', status: true, cookie: true, xfbml: true });
};
function connectToFB() {
FB.login(function (r) { alert('connected'); }, { scope: 'user_photos' });
}
</script>
<input type="button" value="connect" onclick="connectToFB();" />
You should check if the user is logged in with getLoginStatus() first. Here is the official Facebook Documentatin: FB.getLoginStatus
I'm dealing with this error couple of days.
It used to work fine the same code, but now I'm stuck with this error. I've changed a host since then. Maybe Could be that?
When I log in with my Facebook account, and the application is approved, I still can't retrieve user id and other default data.
Here is the script, please suggest anything:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://www.oneslike.me/js/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
FB.init({
appId : 'YOUR API KEY HERE',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload(); //When logged reload
});
FB.api('/me', function(user){
if(user.id!=null){
alert("Logged user with FB_id: "+user.id);
$("#login_div").hide(); $("#data_div").show();
var user_data = '<img src="http://graph.facebook.com/'+user.id+'/picture"><br/>'+user.name+'';
document.getElementById('data_div').innerHTML(user_data);
}
else
{
alert("Not logged user");
$("#login_div").show(); $("#data_div").hide();
}
});
});
</script>
<div id="login_div" style="display: none;">
<fb:login-button data-scope="user_birthday">Login with Facebook</fb:login-button>
</div>
<div id="data_div" style="display: none;">
</div>
It might be that FB.init() has not finished loading and initializing the session when you call FB.api()? I ran into a similar issue. What fixed it for me was wrapping my FB.api() call in FB.getLoginStatus(), like so:
FB.getLoginStatus(function(response) {
FB.api(function(response){ });
});
It seems to delay/make sure the session is properly initialized before calling the API. I hope it works for you too.
How do we create a link to initiate the FB connect process WITHOUT using one of their built in button forms <fb:login-button ></fb:login-button>
Just add an onclick event to any of your custom buttons and have it call the FB.login event in their javascript sdk.
Full 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: '**yourAppId**', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session) {
FB.api('/me', function(response) {
alert('Welcome ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:''});
}
</script>
</body>
</html>
I'm using Facebook PHP SDK v2.1.2 and JS SDK on my page. I've put a <fb:login-button autologoutlink="true"></fb:login-button>
[...]
<head>
<script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script>
<script type="text/javascript">
FB.init({
appId: '{$appId}',
cookie: true,
status: true,
xfbml: true
});
FB.Event.subscribe('auth.logout', function (response) {
alert('Bye!');
window.location.refresh();
});
</script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button autologoutlink="true"></fb:login-button>
[...]
When I'm logged I can see the logout button, but when I click on it nothing happens. Am I missing something? I use the <fb:login-button> on logon and it works like a charm with PHP SDK!
Thank you in advance.
Instead of
window.location.refresh();
Try
window.location.reload();
Customer can sign in to my web app via normal login and facebook connect. So far so good.
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button> <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<xsl:value-of select="$FACEBOOK_APP_ID" />', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
But when they come to logout, I want the customer to click on the logoff link at my website. How can I programmatically logout facebook connect? Possibly via json backend?
I don't want customer to click facebook button to logoff.
I did try out with some ways, example: to reset the facebook connect cookie created at my website and it works, but when I try to login to facebook again at second time, it fails.
I know delete cookie logout is simply not clean (fb autologoutlink=true is still showing I haven't logout.)
I can't let customer to click logout twice, I want them to use my web app logout link as a single logout controller.
I am using ASP classic. Any solution?
If the user has logged in via Facebook, call this JS snippet when the user logs out of your site (depending on how you implement logout, one possible way is to use onclick="", or if you redirect to the "logged out" template, include it there):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.logout(function(response) {});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
You can use this simple code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APPID HERE', cookie:true,
status:true, xfbml:true
});
</script>
and this:
<fb:login-button autologoutlink="true" length="short" background="white" size="large" data-show-faces="true" perms="email,user_birthday,status_update,publish_stream">Login with Facebook</fb:login-button>