I want to add facebook login to my website. I async load it, and when I check that the person is not logged into my website through facebook I call a function to register them, but I get an error saying my function does not exist... facebook is in an html file, and the method I'm calling (FaceRegister()) is in a javascript file with the same name. I presume this is because of the loading order? Any ideas how to solve this?
Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '217518691989396',
xfbml : true,
version : 'v2.8'
}) ;
FB.AppEvents.logPageView();
$(document).trigger('fbload');
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(document).on(
'fbload',
function(){
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
faceRegister();
}
}
Related
I'm using facebook javascript SDK, and I have issues in getting the name and email.
When I console log my response it only consists of accessToken, expiresIn, signedRequest, userID. I tried switching to different versions but no luck.
Below is what I tried -
$( document ).ready(function() {
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=myapp_id&autoLogAppEvents=1'; //used my app id
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : 'App_idd', //used my app id
cookie : true,
xfbml : true,
version : 'v2.11' //also tried v2.4
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function (response) {
console.log(response);
if (response.status === 'connected') {
//get needed fields
} else if (response.status === 'not_authorized') {
} else {
}
});
};
});
Use following function for email and get other fields from here,
FB.api('/me', {fields: 'email'}, function(response) {
console.log(response);
});
/me refers to current user.
I have my sdk set up and the button fires the checkLoginState function but the FB.login doesn't get called. I'm using the latest version (v2.9). I've also tried using 2.8.
I'm guessing it's something to do with it being async but I can't figure out what to do next.
The code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:login-button onlogin="checkLoginState();" show-faces="false" scope="email,public_profile" width="400"></fb:login-button>
<script type='text/javascript'>
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status !== 'connected'){
Facebook_login();
}
else{
console.log(response);
}
}
function Facebook_login() {
FB.login(function (response) { <--- debugger comes here
if (response.status === 'connected') { <----- but not here :-(
//do stuff
}
});
}
The login button performs the login on its own, you do not have to call FB.login yourself when you use that button.
FB.login is for when you want to use your own link/button to trigger login.
And the way you are calling it, inside the callback function of asynchronous methods, it will most likely get blocked by the browser’s popup blocker. If you use FB.login, then you should only ever call it on directly user interaction (i.e., a click on a link/button), and not nest it into any async callbacks.
<span><a onclick="fbLogin()" id="fbLink" class="btn faceebook btn-circle muliregular text-capitalize"><i class="fa fa-facebook"></i> Facebook </a></span>
var global_fb = false;
window.fbAsyncInit = function() {
// FB JavaScript SDK configuration and setup
FB.init({
appId : 'xxxxxxxx', // FB App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Check whether the user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Facebook login with JavaScript SDK
function fbLogin() {
global_fb = true;
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
$.post('loginwithfacebook',{userData:response},function(data){
if(data.id != ""){
if(global_fb == true){
// do something
}
}
});
});
}
I'm trying to get the user's email after they press Continue with Facebook on my site. I've looked on Stackoverflow and through the Facebook Developer documentation and cannot see a reason why what I am trying isn't working.
JAVASCRIPT
window.fbAsyncInit = function() {
FB.init({
appId : '1882306058687148',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
console.log(response);
statusChangeCallback(response)
});
}
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
runAPI();
}
}
function runAPI() {
FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) {
console.log(response);
document.getElementById('name').value = response.name;
document.getElementById('email').value = response.email;
document.getElementById('fb-login').style.display = 'none'
});
}
** HTML **
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
What's confusing me the most though is that this IS pulling the name through and that is definitely working.
You will only get an email address back if the user has a verified one set in their profile.
And even then, there are apparently some edge cases where privacy settings can still make it not return one at all. Of course, they might not have one set at all, if they registered using only their mobile. If your app needs and email address, then you should implement an additional step for users to input one manually. (Verification is your responsibility as well in that case.)
I am trying to integrate parse database with my website. It is almost one day I spent but I couldn't figure out the problem. Here is my code:
<div id="fb-root"></div>
<script>
Parse.initialize("**************************", "**********************");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*****************',
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=920929871279093";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-max-rows="3" data-size="medium" data-show-faces="true" data-auto-logout-link="true"></div>
My problem is that when I run this piece of code I get following error but login button appears and work fine.
As I search for this issue people are saying I change
//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=920929871279093";
To
//connect.facebook.net/en_US/sdk.js#xfbml;
or
//connect.facebook.net/en_US/sdk.all;
I do not understand how this really work. And appreciate if anyone say where I am calling init.FB twice and how to fix it.
I think you need to put version number in init function:
The following is the example from parse.com https://www.parse.com/docs/js/guide#users-setup
<script>
// Initialize Parse
Parse.initialize("$PARSE_APPLICATION_ID", "$PARSE_JAVASCRIPT_KEY");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({ // this line replaces FB.init({
appId : '{facebook-app-id}', // Facebook App ID
status : true, // check Facebook Login status
cookie : true, // enable cookies to allow Parse to access the session
xfbml : true, // initialize Facebook social plugins on the page
version : 'v2.3' // point to the latest Facebook Graph API version
});
// Run code after the Facebook SDK is loaded.
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am developing a web application and i have implemented facebook login from developers.facebook.com but the thing is that whenever the user log in with his facebook credentials it does not redirect to my application and also i am trying to test it locally in my IDE but even i am unable to do it. is there any ways to make it as well i am in search of log out option as i want add log out button after the user's logged in. any help would be appreciated. thanks in advance.
and here is my log in code:
HTML:
<div id="fb-root"></div>
<div class="fb-login-button" data-width="500"></div>
and my JS code:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '425369200906567', // App ID from the app dashboard
channelUrl : 'channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=425369200906567";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
if you want to do something once the user logs in to your app (your case redirect to another page application page you can use response.authResponse to do it
FB.login(function(response) {
if (response.authResponse) {
// when the user logs in! & gives permission
// Do something
alert('Change this alert to "windows.location"')
} else {
// when the user doesn't give the required permissions
// Do something
alert('User canceled login or did not fully authorize the app.');
}
}, { scope: 'user_photos, publish_stream' }); // App's permission
Fiddle