Ok, I'm making an application with a Facebook login, that also logs a new session in Parse. So after a user logs in, the session is created, as well as having a hidden div appear. I'm using the Facebook login button, and trying to add an onclick function to it, but it doesn't seem to register it, so I'm not sure how to go about doing this. Any help is appreciated!!
Here is my code:
<script type="text/javascript">
Parse.initialize("APP_ID", "JS_KEY");
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
//Logged into the app & Facebook
}
else if (response.status === 'not_authorized') {
//Logged into Facebook, not the app
document.getElementById('status').innerHTML = 'Please log into this app.';
}
else {
//Not logged into Facebook, unsure if logged into the app
document.getElementById('status').innerHTML = 'Please log into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
if(response.status === 'connected') {
}
});
}
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'APP_ID',
xfbml : true,
cookie : true,
version : 'v2.4'
});
function fbLogin() {
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User logged into Facebook and created a new Parse session!");
}
else {
alert("User logged in through Facebook!");
}
div = document.getElementById("test");
div.style.display = "block";
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
}
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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="container">
<h1>Please log into Facebook.</h1>
<div id="fb-root">
<div onclick="fbLogin();" class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
<div id="status"></div>
</div>
<div id="test" style="display:none;">
Hello World
</div>
</div>