Facebook JavaScript SDK Login Button Doesn't Pop Up Permission
Question
I've been using the code below for a long time for many facebook apps that I created, but since a few hours ago this code does not seem to work anymore. I do not know if this code can no longer be used or temporarily unusable. Is there any alternative code that is similar to the code below?
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>FB APP</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
body{
background: #ffffff url('lp.jpg') top center no-repeat;
margin-left: 160px;
}
@font-face {
font-family:fabada;
src: url('fabada.ttf');
}
#likegate{
text-align: center;
margin-top: 400px;
margin-left: 350px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<!-- DEFINITING FACEBOOK APP ID -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '448829841800709',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.UIServer.setActiveNode = function(a,b){FB.UIServer._active[a.id]=b;}
// Scroll Bar Fixed
window.setTimeout(function() {
FB.Canvas.setAutoResize(90);
FB.Canvas.setAutoResize();
FB.Canvas.setSize({ width: 810, height: 555 });
}, 250);
</script>
<script type="text/javascript">
function loging(getuid){
jQuery("#loginfb").hide();
jQuery("#fbload").show();
FB.api(
{
method: 'fql.query',
query: 'SELECT name, uid FROM user WHERE uid=' + getuid
},
function(response) {
var user = response[0];
jQuery.ajax({
type: 'GET',
url: 'login.php?uid=' + getuid,
success: function(data) {
jQuery('#jstarget').html(data);
jQuery("#fbload").hide();
}
});
}
);
}
window.fbAsyncInit = function () {
FB.init({
appId : '448829841800709',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
}
jQuery(document).ready(function() {
// fetch the status on load
jQuery('#loginfb').bind('click', function() {
FB.init({
appId : '448829841800709',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
if (response.authResponse){
FB.api('/me', function(response) {
loging(response.id);
});
}
else{
//user is not connected to your app or logged out
FB.login(function(response) {
if(response.authResponse) {
FB.api('/me', function(response) {
loging(response.id);
});
}
else {
//user cancelled login or did not grant authorization
}
}, {scope:'publish_stream'});
}
});
// handle a session response from any of the auth related calls
});
</script>
<div id="jstarget"></div>
<div id="box">
<!--MAIN CONTENT-->
<div id="content">
<div id="likegate">
<img src="login.png" style="cursor: pointer; float: left;" id="loginfb" alt="Login">
<img src="ajax-loader.gif" style="float: left; padding-left: 50px; display:none" id="fbload" alt="Loading">
</div>
</div>
</div>
</body>
</html>
UPDATE
When I remove this
if (response.authResponse){
FB.api('/me', function(response) {
loging(response.id);
});
}
else{
// this code here not removed
}
it show pop up permission dialog, but when I've allow this app, then I click login button again, why it show pop up permission dialog again?
1 answers
solution1
0 ACCPTED 2012-04-29 16:36:59
you need to remove all the multiple FB.init, dont use .bind() after jquery 1.7.1 it will be depreciated sub that with .on()
2) add channel.html that should help you with any XD issue. 3) use FB.getAuthResponse() , to get authentication response
i did a quick clean up but never tested! and there is a lot of room for improvment here is what it looks like:
<!-- DEFINITING FACEBOOK APP ID -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '448829841800709', // 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
});
FB.UIServer.setActiveNode = function(a,b){FB.UIServer._active[a.id]=b;}
// Scroll Bar Fixed
window.setTimeout(function() {
FB.Canvas.setAutoResize(90);
FB.Canvas.setAutoResize();
FB.Canvas.setSize({ width: 810, height: 555 });
}, 250);
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<script type="text/javascript">
function loging(getuid){
jQuery("#loginfb").hide();
jQuery("#fbload").show();
FB.api(
{
method: 'fql.query',
query: 'SELECT name, uid FROM user WHERE uid=' + getuid
},
function(response) {
var user = response[0];
jQuery.ajax({
type: 'GET',
url: 'login.php?uid=' + getuid,
success: function(data) {
jQuery('#jstarget').html(data);
jQuery("#fbload").hide();
}
});
}
);
}
jQuery(document).ready(function() {
// fetch the status on load
jQuery('#loginfb').on('click', function() {
if (FB.getAuthResponse()){
FB.api('/me', function(response) {
loging(response.id);
});
}
else{
//user is not connected to your app or logged out
FB.login(function(response) {
if(response.authResponse) {
FB.api('/me', function(response) {
loging(response.id);
});
}
else {
//user cancelled login or did not grant authorization
}
}, {scope:'publish_stream'});
}
});
// handle a session response from any of the auth related calls
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript Facebook Login button doesn't change to logout after login
facebook javascript sdk - how to check if user likes page without fb.login pop up
Facebook Login with custom button javascript sdk
How to hide or integrate geolocation permission pop up into a button (Javascript + HTML)
Facebook JS SDK login button doesn't show log out when logged in?
Transform Facebook fb:login-button into SDK javascript login
Facebook JavaScript SDK Login
Facebook JavaScript SDK: FB.getLoginStatus and FB.Login doesn't work on Chrome
Facebook Javascript SDK: FB.login() doesn't work on Firefox/IE
Facebook login button doesn't work on Firefox
Related Tags