1

I've written a code for frontend Facebook login with Django-rest in the backend for verification. But, the button attribute in my HTML file is not getting displayed Here is the code to my file(HTML) in AngularJS

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="fb-root">
</div>

<script>		
    //facebook here
    //***************************************************
    window.fbAsyncInit = function() {
	FB.init({
	    appId      : 'Not inserted app id here for security reasons',
	    status     : true,
	    xfbml      : true
        });
    };
    
    (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>

<button ng-click="login_fb()">Login with facebook</button>
<script> 
angular.module("myApp").controller("UserCtrl", 
	['$scope','$location', 'Facebook',
        function($scope, $location, Facebook /*we will write this factory next*/){
        
        $scope.login_fb = function(){
           Facebook.login().then(function(response){
               //this is where we'll contact backend. for now just log response 
               console.log(response);
           });
        }
}]);
</ script>
<script>
angular.module("myApp").factory('Facebook', 
    ["$q", "$window", "$rootScope",
    function($q, $window, $rootScope) {
		 
	// since we are resolving a thirdparty response, 
        // we need to do so in $apply   
	var resolve = function(errval, retval, deferred) {
	    $rootScope.$apply(function() {
	        if (errval) {
		    deferred.reject(errval);
	        } else {
		    retval.connected = true;
	            deferred.resolve(retval);
	        }
	    });
        }

	var _login = function(){
	    var deferred = $q.defer();
            //first check if we already have logged in
	    FB.getLoginStatus(function(response) {
	        if (response.status === 'connected') {
	            // the user is logged in and has authenticated your
		    // app
		    console.log("fb user already logged in");
		    deferred.resolve(response);
		} else {
		    // the user is logged in to Facebook, 
		    // but has not authenticated your app
		    FB.login(function(response){
		        if(response.authResponse){
			    console.log("fb user logged in");
			    resolve(null, response, deferred);
			}else{
			    console.log("fb user could not log in");
			    resolve(response.error, null, deferred);
			}
		    });
		 }
	     });
			
	     return deferred.promise;
	}

	return{
		login: _login,
	};
}]);
</ script>

</body>
</html>

Can anbody please tell me why my button not getting displayed.

2
  • and what exactly does the button attribute even mean? Please explain things in more precise terms and explain what is expected to happen, when or how it should happen and what is currently happening. this is just not the proper way to ask a uestion Commented Jul 24, 2015 at 23:17
  • I'll keep that in mind from the next time. For now, my problem is sorted though. Commented Jul 24, 2015 at 23:33

1 Answer 1

2

</ script> is not a valid HTML tag. Change these to </script>.

Sign up to request clarification or add additional context in comments.

1 Comment

Right, there are 3 closing script tags incorrectly written:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.