Revise
The code provided is not fully complete. I have made some updates to it, and it has been tested on my domain successfully. Therefore, it should work smoothly on your domain as well.
Place the following JavaScript code in a file named a.js. This code will be executed when a button is clicked:
window.fbAsyncInit = function() {
FB.init({
appId : 'your_app_id', // App ID
channelUrl : 'your_app_domain', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Subscribe to the auth.authResponseChange event
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
alert('logged');
} else if (response.status === 'not_authorized') {
alert('non logged');
FB.login();
} else {
alert('non logged everywhere');
FB.login();
}
});
};
(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));
Next, add this code snippet to the desired page. Remember to include the fb-root div and other necessary elements Facebook requires:
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1">
</div>
<button onClick="loadit()">ZzZzz</button>
<script type="text/javascript">
function loadit(){
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'a.js';
head.appendChild(script);
}
</script>
Update Complete
If you need to load a script dynamically using JavaScript, follow these steps after placing the relevant code in a file named a.js. Test the functionality to ensure it works correctly.
<button onClick="loadit()">ZzZzz</button>
<script type="text/javascript">
function loadit(){
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'a.js';
head.appendChild(script);
}
</script>
(It's not necessary to hide the app id as it can only be accessed within the specified domain.)