Menu
FB.login() seems to only work if triggered by a click event. I want it to fire on page load. I've tried using the trigger() method, but that didn't work. I've also tried triggering it using jQuery('#button').click().
$(function(){
//this is logging so I know the js is loading properly
console.log("script loaded");
$('button').button();
$('#button').click(function(){
FB.login(function(response) {
console.log('FBLOGIN firing');
if(response.status === "connected"){
var uID = response.authResponse.userID;
FB.api('/me', function(response) {
var name = response.name;
if(response.location){
var response = response.location.name;
}else{
alert("The Bringer Network needs your current city to be set in your Facebook 'about' section. Please make it public for our use");
}
});//closes fb.api
}else if(response.status === "not_authorized"){
//authCancelled. redirect
}
},{scope: 'user_location,user_likes'});
});//closes click
jQuery('#button').click();
});
514
In the App Dashboard, choose your app and scroll to Add a Product Click Set Up in the Facebook Login card. Select Settings in the left side navigation panel and under Client OAuth Settings, enter your redirect URL in the Valid OAuth Redirect URIs field for successful authorization.
When inserted properly, a login button appears on the Web page. Clicking the login button opens a login window in which a user enters the username and password.
So I scrapped the idea of putting the login code in a separate .js file. I just put the FB.login method right in the html, inside the window.fbAsyncInit block, along with the FB.init code. It works perfectly.
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '140*****07', // App ID
channelUrl : '//http://s******.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true,
xfbml : true // parse XFBML
});
FB.login(function (response) {
if (response.status === "connected") {
var uID = response.authResponse.userID;
console.log(uID);
FB.api('/me', function (response) {
var name = response.name;
var locationName = ' ';
if (response.location) {
locationName = response.location.name;
console.log(locationName);
} else {
alert("your current city needs to be set in your Facebook 'about' section. Please make it public for our use");
}
});//closes fb.api
} else if (response.status === "not_authorized") {
//authCancelled. redirect
}
},
{
scope: 'user_location,user_likes'
}
);
};//closes window.fbAsynInit
// 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>
<h1 id="redirecting">Redirecting</h1>
<button id="button">click</button>
<img id='backgroundImg' src="https://sa*****.com/template.jpg"/>
</body>
</html>
Move out the button click handler function to a variable:
var fbLogin = function () {
// FB.login() ...
}
and it as the click listener: $('#button').click(fbLogin) and also call it on page load.
The full code should be like this:
var fbLogin = function () {
FB.login(
function (response) {
if (response.status === "connected") {
var uID = response.authResponse.userID;
FB.api('/me', function (response) {
var name = response.name,
locationName;
if (response.location) {
locationName = response.location.name;
} else {
alert("The Bringer Network needs your current city to be set in your Facebook 'about' section. Please make it public for our use");
}
});//closes fb.api
} else if (response.status === "not_authorized") {
//authCancelled. redirect
}
},
{
scope: 'user_location,user_likes'
}
);
};
$(function () {
$('#button')
.button()
.click(fbLogin);
});
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: 'YOUR_APP_ID', // App ID from the app dashboard
status: true, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
// Call fbLogin
fbLogin();
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
