I have the following code (javascript)
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?=$this->facebook->getAppID()?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
loading();
alert("test");
window.location = throute + "login/index/fblogin";
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status=="connected") {
alert("test");
window.location = throute + "login/index/fblogin";
}
});
};
(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>
If user is not logged in on fb everything is fine.
My problem is that if the user is already logged in on fb he is automatically logged in on site when he access it. I need him to log after click on the "Login" button.
Ty for help.
Just initialize the FB-app when the user clicks your loginButton. I am guessing you are using facebooks own loginbutton, you don't need to do that.
('#loginButton').click(function(){
FB.init({
appId: '<?=$this->facebook->getAppID()?>',
cookie: true,
xfbml: true,
oauth: true
});
//the rest of the code follows here
});
What will happen is that if users are already logged in on Facebook, they will be logged in directly upon pressing your button.
If the user is not logged in on Facebook, the login-dialog will appear upon clicking on your button.
Related
Please Help me how can i use this api correctly with the code they give in the url below
https://developers.facebook.com/docs/plugins/embedded-video-player/api/#control-reference
window.fbAsyncInit = function() {
FB.init({
appId : '17xxxxxxxxxx',
xfbml : true,
version : 'v3.5'
});
var ssp_video_player;
var time = jQuery(this).attr("time");
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
ssp_video_player = msg.instance;
}
ssp_video_player.seek(600);
});
};
When i loading page video skip / seek works but after loading complete i did not able to control player with this variable for example
ssp_video_player.play(); or
ssp_video_player.pause(); etc.
Or any other way so i can control the facebook video player ...
The reason you are not able to control via ssp_video_player outside the function is because the variable is defined locally. You should define ssp_video_player outside the function. Also, make sure you are not accessing the play/pause before the asynchronous function is executed and the value of ssp_video_player is set.
var ssp_video_player;
window.fbAsyncInit = function() {
FB.init({
appId : '17xxxxxxxxxx',
xfbml : true,
version : 'v3.5'
});
var time = jQuery(this).attr("time");
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
ssp_video_player = msg.instance;
}
ssp_video_player.seek(600);
});
};
I am working on a website and wanted to give my users an option to log-in using facebook.
I am successful at logging in but events are not working for me.
Whenever i logged in, the function "login" was not called.....I have tried assigning this login function to other button for checking it manually, the alert worked but it didnt get any response.
Here my Code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: MY_APP_ID, status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
login();
});
};
function login(){
FB.api('/me', function(response) {
alert('You have successfully logged in, '+response.name+"!");
});
}
(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>
<fb:login-button autologoutlink='true'
perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
This is the facebook application setting:
Have you tried loading the all.js script in the <head> instead of #fb-root? Use the following:
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/es_LA/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
instead of:
(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);
}());
[EDIT: updated sample]
The SDK inserts elements into fb-root which expect to be positioned relative
to the body or relative to an element close to the top of the page.
Which might replacing the SDK source as well.
resource: Facebook Javascript SDK.
--
can you try to subscribe to other event and see if its work
FB.Event.subscribe('auth.statusChange', function(response) {
// do something with response
});
From Facebook documentation (try subscribing this instead)
auth.authResponseChange
This event is fired for any auth related change as they all affect the session: login, logout, session refresh. Sessions are refreshed over time as long as the user is active with your app.
auth.statusChange
Typically you will want to use the auth.authResponseChange event. But in rare cases, you want to distinguish between these three states:
1. Connected
2. Logged into Facebook but not connected with your application
3. Not logged into Facebook at all.
Scenario 1 (New User)
Facebook Login Button's Text: "Login"
User State: User not connected
Now user clicks on login and completes the login flow.
Button's text changes to "Log Out" and this is the only time when'auth.login' triggers.
FB.Event.subscribe('auth.login', function (response) {
// do something with response
if (response.status === 'connected') {
// user connected
FB.api('/me', function (response) {
alert(response.name + " " + response.id);
});
}
});
Scenario 2 (Existing User)
If a user who is logged in to Facebook and has already authorized your app visits your app then the user automatically get's connected and Login Button's text is "Log Out".
In this case add the following code into the fbAsyncInit function:
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
// connected
alert(response.name + " " + response.id);
}
});
FB.getLoginStatus is called everytime the page refreshes but you can also call it anytime in your app by embedding it into a javascript function.
When I click on my FB log in button the FB auth dialog pops up. After I enter my FB credentials the dialog redirects to a url like this:
https://www.facebook.com/dialog/permissions.request?wholeBunchOfQueryParameters
or, if I was already logged into FB, the popup dialog is:
https://www.facebook.com/dialog/oauth?wholeBunchOfQueryParameters
but those are blank dialogs that stay open. Once I close the dialog the callback happens but not until then. This is the behavior on IE and Chrome.
I did have this working fine and I think it stopped working when I got a new computer so maybe it is environmental. I thought it has worked since then but maybe not. I reverted to a version of my code that was working and it no longer works either so that further suggests that it is environmental but I don't know what it could be. I could be off in the weeds.
Also, one other bit of info, I'm developing locally so I'm using localhost:port. I did a ton of research on this issue and did see someone say to use 127.0.0.1 instead of localhost so I did try that as well but it didn't make a difference.
Any idea why the dialogs won't close?
<fb:login-button perms="email,user_checkins" onlogin="afterFacebookConnect();"
autologoutlink="false" ></fb:login-button>
<div id="fb-root" style="display:inline; margin-left:20px;"></div>
<script language="javascript" type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'myAppId',
status: true, cookie: false, xfbml: true
});
};
function afterFacebookConnect() {
FB.getLoginStatus(function (response) {
alert("Hi");
var access_token = FB.getAuthResponse()['accessToken'];
if (response.authResponse) {
window.location = "../Account/FacebookLogin?token=" +
access_token;
} else {
alert(FB.getAuthResponse);
}
});
};
function logout() {
FB.getLoginStatus(function (response) {
var access_token = FB.getAuthResponse()['accessToken'];
if (response.authResponse) {
window.location = "../Account/Logout";
} else {
// user clicked Cancel
}
});
};
$(document).ready(function () {
if (document.getElementById('fb-root') != undefined) {
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>
This is a known bug that has surfaced in the last few days (see https://developers.facebook.com/bugs/241915819261223).
The good news is one of FB's Engineers has just stated the following, so we should see this resolved shortly:
We have a fix for this issue and it will be pushed soon. Stay tuned.
i'm loading the facebook js sdk via the window.fbAsyncInit function. it's working fine in chrome but in safari and firefox FB.Auth._loadState has the state 'loading' forever and non of the FB.* functions are working.
anyone experiencing the same problem? do i need to set some special headers?
any help would be appreciated.
update
<div id="fb-root"></div>
<script>
var app_id = <?=conf_app_id?>;
window.fbAsyncInit = function() {
FB.init({appId: app_id, status: true, oauth: true, cookie: true, channelUrl: 'https://www.example.com/channel.html'});
}
$(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>
i think it might be an issue with the loadbalancer :( does anyone know if facebook is crosschecking the ip/session or something after loading the sdk?!
I have a Facebook Page Tab App that is not loading correctly until after the page is refreshed. I have been trying to solve this problem for over a week, and am reaching my wits end.
Here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https:////connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '***************', // App ID
channelURL : '//www.********.com/**********/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script type="text/javascript">
$(document).ready(function(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//User Logged In
}
else if (response.status === 'not_authorized') {
//Log User Into App
}
else
{
top.location = "http://www.facebook.com";
}
});
});
</script>
Like I said, if add something like alert("Test") immediately after FB.getLoginStatus(function(response) { it doesn't pop up on the first page load, but does after the page is refreshed.
Can someone please help point me in the right direction?
Thanks,
Fred
First of all you are loading the SDK both Synchronously and Asynchronously. Remove the synchronous line. Then all your FB related lines should be within the window.fbAsyncInit. You can't subscribe to events before the sdk is fully loaded.
You can try it this way if you haven't already
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
}
});