Facebook Javascript SDK not working on .xhtml page-Collection of common programming errors

I tried out the Javascript SDK in an html file, everything worked fine. Then moved the same code to a .xhtml file & it completely stopped working.

The code as follows:

Moved from file test.html to file test.xhtml & it stopped working

    
        
    
    
        
        
            // 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));

            // Init the SDK upon load
            window.fbAsyncInit = function() {
                FB.init({
                    appId      : '365436556863538', // App ID
                    channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
                    status     : true, // check login status
                    cookie     : true, // enable cookies to allow the server to access the session
                    xfbml      : true  // parse XFBML
                });

                // listen for and handle auth.statusChange events
                FB.Event.subscribe('auth.statusChange', function(response) {
                    if (response.authResponse) { 
                        FB.api('/me', function(response){
                            if (response.name) {
                                $("#username").html("" + response.name  +"");

                            }
                        })
                        $('#auth-loggedout').hide();
                        $('#auth-loggedin').show();
                    } else {
                        // user has not auth'd your app, or is not logged into Facebook
                        $('#auth-loggedout').show();
                        $('#auth-loggedin').hide();
                    }
                });

                // respond to clicks on the login and logout links
                document.getElementById('auth-loginlink').addEventListener('click', function(){
                    FB.login(function(response) {
                       // handle the response
                     }, {scope: 'email'});
                });
                document.getElementById('auth-logoutlink').addEventListener('click', function(){
                    FB.logout();
                }); 
            } 
        
        
            
                Login
            
            
                (logout)

            
        
        
            
         
    

I could just find this in the console window:

Uncaught SyntaxError: Unexpected identifier

window.script1342849602887=1;

Originally posted 2013-11-30 19:06:19.