Facebook login button showing after 1 second page loaded
I am trying to learn Facebook login and find how can I integrate to a asp.net
MVC project. First, I am trying to learn in normal html version in my website I used Facebook login button from docs. But when my page loaded it takes 1 or 2 seconds to show my Facebook button. How can I solve this problem. My code is:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript </title>
<meta charset="UTF-8">
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2194615170807288',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
// 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 = 'https://connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v3.2&appId=2194615170807288';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(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.
FB.api('/me?fields=id,first_name,last_name,email', function(response) {
document.getElementById("fname").value = response.first_name;
document.getElementById("lname").value = response.last_name;
document.getElementById("email").value = response.email;
});
}
else {
document.getElementById("fname").value ="";
document.getElementById("lname").value ="";
document.getElementById("email").value ="";
}
}
</script>
<div>
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
Mail:<br>
<input type="text" name="mail" id="email"><br>
</form>
</div>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true" scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();"></div>
<fb:login-button scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();">
</fb:login-button>
</body>
</html>
javascript facebook facebook-javascript-sdk facebook-sdk-4.0
add a comment |
I am trying to learn Facebook login and find how can I integrate to a asp.net
MVC project. First, I am trying to learn in normal html version in my website I used Facebook login button from docs. But when my page loaded it takes 1 or 2 seconds to show my Facebook button. How can I solve this problem. My code is:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript </title>
<meta charset="UTF-8">
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2194615170807288',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
// 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 = 'https://connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v3.2&appId=2194615170807288';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(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.
FB.api('/me?fields=id,first_name,last_name,email', function(response) {
document.getElementById("fname").value = response.first_name;
document.getElementById("lname").value = response.last_name;
document.getElementById("email").value = response.email;
});
}
else {
document.getElementById("fname").value ="";
document.getElementById("lname").value ="";
document.getElementById("email").value ="";
}
}
</script>
<div>
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
Mail:<br>
<input type="text" name="mail" id="email"><br>
</form>
</div>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true" scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();"></div>
<fb:login-button scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();">
</fb:login-button>
</body>
</html>
javascript facebook facebook-javascript-sdk facebook-sdk-4.0
1
You are loading an external script here, that takes it’s time. There isn’t much you can do about this.
– misorude
Nov 16 '18 at 8:25
please format your code
– Eugene Mihaylin
Nov 16 '18 at 9:28
can i copy sdk to my files like bootstrap.js and load from there ? @misorude
– Fahri Bilici
Nov 16 '18 at 10:19
I don’t think that is recommendable. If you don’t load it from its original domain, then likely a lot of the stuff relying on cookies and cross-domain communication won’t work properly.
– misorude
Nov 16 '18 at 10:21
add a comment |
I am trying to learn Facebook login and find how can I integrate to a asp.net
MVC project. First, I am trying to learn in normal html version in my website I used Facebook login button from docs. But when my page loaded it takes 1 or 2 seconds to show my Facebook button. How can I solve this problem. My code is:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript </title>
<meta charset="UTF-8">
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2194615170807288',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
// 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 = 'https://connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v3.2&appId=2194615170807288';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(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.
FB.api('/me?fields=id,first_name,last_name,email', function(response) {
document.getElementById("fname").value = response.first_name;
document.getElementById("lname").value = response.last_name;
document.getElementById("email").value = response.email;
});
}
else {
document.getElementById("fname").value ="";
document.getElementById("lname").value ="";
document.getElementById("email").value ="";
}
}
</script>
<div>
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
Mail:<br>
<input type="text" name="mail" id="email"><br>
</form>
</div>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true" scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();"></div>
<fb:login-button scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();">
</fb:login-button>
</body>
</html>
javascript facebook facebook-javascript-sdk facebook-sdk-4.0
I am trying to learn Facebook login and find how can I integrate to a asp.net
MVC project. First, I am trying to learn in normal html version in my website I used Facebook login button from docs. But when my page loaded it takes 1 or 2 seconds to show my Facebook button. How can I solve this problem. My code is:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript </title>
<meta charset="UTF-8">
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '2194615170807288',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
// 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 = 'https://connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v3.2&appId=2194615170807288';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(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.
FB.api('/me?fields=id,first_name,last_name,email', function(response) {
document.getElementById("fname").value = response.first_name;
document.getElementById("lname").value = response.last_name;
document.getElementById("email").value = response.email;
});
}
else {
document.getElementById("fname").value ="";
document.getElementById("lname").value ="";
document.getElementById("email").value ="";
}
}
</script>
<div>
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
Mail:<br>
<input type="text" name="mail" id="email"><br>
</form>
</div>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true" scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();"></div>
<fb:login-button scope="public_profile,email" auth_type="rerequest" onlogin="checkLoginState();">
</fb:login-button>
</body>
</html>
javascript facebook facebook-javascript-sdk facebook-sdk-4.0
javascript facebook facebook-javascript-sdk facebook-sdk-4.0
edited Nov 16 '18 at 9:12
jess
924110
924110
asked Nov 16 '18 at 8:15
Fahri BiliciFahri Bilici
115
115
1
You are loading an external script here, that takes it’s time. There isn’t much you can do about this.
– misorude
Nov 16 '18 at 8:25
please format your code
– Eugene Mihaylin
Nov 16 '18 at 9:28
can i copy sdk to my files like bootstrap.js and load from there ? @misorude
– Fahri Bilici
Nov 16 '18 at 10:19
I don’t think that is recommendable. If you don’t load it from its original domain, then likely a lot of the stuff relying on cookies and cross-domain communication won’t work properly.
– misorude
Nov 16 '18 at 10:21
add a comment |
1
You are loading an external script here, that takes it’s time. There isn’t much you can do about this.
– misorude
Nov 16 '18 at 8:25
please format your code
– Eugene Mihaylin
Nov 16 '18 at 9:28
can i copy sdk to my files like bootstrap.js and load from there ? @misorude
– Fahri Bilici
Nov 16 '18 at 10:19
I don’t think that is recommendable. If you don’t load it from its original domain, then likely a lot of the stuff relying on cookies and cross-domain communication won’t work properly.
– misorude
Nov 16 '18 at 10:21
1
1
You are loading an external script here, that takes it’s time. There isn’t much you can do about this.
– misorude
Nov 16 '18 at 8:25
You are loading an external script here, that takes it’s time. There isn’t much you can do about this.
– misorude
Nov 16 '18 at 8:25
please format your code
– Eugene Mihaylin
Nov 16 '18 at 9:28
please format your code
– Eugene Mihaylin
Nov 16 '18 at 9:28
can i copy sdk to my files like bootstrap.js and load from there ? @misorude
– Fahri Bilici
Nov 16 '18 at 10:19
can i copy sdk to my files like bootstrap.js and load from there ? @misorude
– Fahri Bilici
Nov 16 '18 at 10:19
I don’t think that is recommendable. If you don’t load it from its original domain, then likely a lot of the stuff relying on cookies and cross-domain communication won’t work properly.
– misorude
Nov 16 '18 at 10:21
I don’t think that is recommendable. If you don’t load it from its original domain, then likely a lot of the stuff relying on cookies and cross-domain communication won’t work properly.
– misorude
Nov 16 '18 at 10:21
add a comment |
2 Answers
2
active
oldest
votes
fbAsyncInit
it is async function so it wait for callback after than it will initialize.
(1 or 2 seconds is not too much time)
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
add a comment |
As misorude pointed out in a comment, loading the external script takes time and you cannot do anything about that. There is a solution to immediately show a login button though:
- Use your own login button (make sure to follow the guidelines: https://developers.facebook.com/docs/facebook-login/best-practices#brandedlogin)
- Call FB.login on button click
Of course you can still use FB.getLoginStatus
to check if the user is logged in already. Downside: Before loading the JS SDK and using FB.getLoginStatus
, you do not know if the user is logged in already. You could show a loader for that though, so the 1-2 seconds are not really a problem for users.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333861%2ffacebook-login-button-showing-after-1-second-page-loaded%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
fbAsyncInit
it is async function so it wait for callback after than it will initialize.
(1 or 2 seconds is not too much time)
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
add a comment |
fbAsyncInit
it is async function so it wait for callback after than it will initialize.
(1 or 2 seconds is not too much time)
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
add a comment |
fbAsyncInit
it is async function so it wait for callback after than it will initialize.
(1 or 2 seconds is not too much time)
fbAsyncInit
it is async function so it wait for callback after than it will initialize.
(1 or 2 seconds is not too much time)
answered Nov 16 '18 at 10:03
TauqeerTauqeer
91
91
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
add a comment |
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
but i never saw a website wait facebook button load thats why i am asking where did i wrong :(
– Fahri Bilici
Nov 16 '18 at 10:21
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
can you show us a website with a facebook button that loads immediately? i assume they are just doing what i described in my answer: using a custom login button instead.
– luschn
Nov 16 '18 at 12:29
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
maybe they are using same button thats why i am confused thanks
– Fahri Bilici
Nov 19 '18 at 8:49
add a comment |
As misorude pointed out in a comment, loading the external script takes time and you cannot do anything about that. There is a solution to immediately show a login button though:
- Use your own login button (make sure to follow the guidelines: https://developers.facebook.com/docs/facebook-login/best-practices#brandedlogin)
- Call FB.login on button click
Of course you can still use FB.getLoginStatus
to check if the user is logged in already. Downside: Before loading the JS SDK and using FB.getLoginStatus
, you do not know if the user is logged in already. You could show a loader for that though, so the 1-2 seconds are not really a problem for users.
add a comment |
As misorude pointed out in a comment, loading the external script takes time and you cannot do anything about that. There is a solution to immediately show a login button though:
- Use your own login button (make sure to follow the guidelines: https://developers.facebook.com/docs/facebook-login/best-practices#brandedlogin)
- Call FB.login on button click
Of course you can still use FB.getLoginStatus
to check if the user is logged in already. Downside: Before loading the JS SDK and using FB.getLoginStatus
, you do not know if the user is logged in already. You could show a loader for that though, so the 1-2 seconds are not really a problem for users.
add a comment |
As misorude pointed out in a comment, loading the external script takes time and you cannot do anything about that. There is a solution to immediately show a login button though:
- Use your own login button (make sure to follow the guidelines: https://developers.facebook.com/docs/facebook-login/best-practices#brandedlogin)
- Call FB.login on button click
Of course you can still use FB.getLoginStatus
to check if the user is logged in already. Downside: Before loading the JS SDK and using FB.getLoginStatus
, you do not know if the user is logged in already. You could show a loader for that though, so the 1-2 seconds are not really a problem for users.
As misorude pointed out in a comment, loading the external script takes time and you cannot do anything about that. There is a solution to immediately show a login button though:
- Use your own login button (make sure to follow the guidelines: https://developers.facebook.com/docs/facebook-login/best-practices#brandedlogin)
- Call FB.login on button click
Of course you can still use FB.getLoginStatus
to check if the user is logged in already. Downside: Before loading the JS SDK and using FB.getLoginStatus
, you do not know if the user is logged in already. You could show a loader for that though, so the 1-2 seconds are not really a problem for users.
edited Nov 16 '18 at 12:28
answered Nov 16 '18 at 9:55
luschnluschn
57.1k57398
57.1k57398
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333861%2ffacebook-login-button-showing-after-1-second-page-loaded%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You are loading an external script here, that takes it’s time. There isn’t much you can do about this.
– misorude
Nov 16 '18 at 8:25
please format your code
– Eugene Mihaylin
Nov 16 '18 at 9:28
can i copy sdk to my files like bootstrap.js and load from there ? @misorude
– Fahri Bilici
Nov 16 '18 at 10:19
I don’t think that is recommendable. If you don’t load it from its original domain, then likely a lot of the stuff relying on cookies and cross-domain communication won’t work properly.
– misorude
Nov 16 '18 at 10:21