I added a custom facebook icon to my site. What I want to do is when user press on the facebook icon the facebook connect script should be triggered. I added these two scripts to the <head> of my site:

<script type="text/javascript">

window.fbAsyncInit = function() {
FB.init({appId: '119245164837280', status: true, cookie: true,
xfbml: true});

FB.getLoginStatus(function (response) {
if (response.session) {
//Do something,User is logged in.
}
else {

}
});
FB.Event.subscribe('auth.login', function (response) {
// When login process completes this event is called.
Var userid=response.session.uid; // user id of logged in user
Var accesstoken=response.session.access_token;// access token

});
FB.Event.subscribe('auth.logout', function (response) {
//User is loggin out.
});


});

};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>


<script type="text/javascript">

FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});

</script>

Also i added `<div id="fb-root"></div> right after <body <?php body_class(); ?>>`, but when I load my site I keep getting these error messages: document.getElementById("fb-root") is null and FB is not defined [Break On This Error] FB.login(function(response) { .

my html:

<a id="facebookiconid" onclick="FB.login()">Login</a>