Home/ Questions/Q 7430831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:12:09+00:00

I am trying to implement Facebook Login functionality to my website. I followed the

  • 0

I am trying to implement Facebook Login functionality to my website. I followed the instructions, and have entered the code correctly as far as I can see it. Here is my code:

<div id="fb-root"></div>
<div class="fb-login-button" data-scope="email" >Login with Facebook</div>
<script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'MY_APP_ID',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true,
      });
    };
    (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));

If you see something I don’t, please let me know. This should work as far as I can tell (after following facebook’s instructions).

Thanks for the help in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m assuming you’re replacing MY_APP_ID with your actual ID, and closing your script section. If that’s not the problem, I’d need to see more of your HTML source besides the snippet you provided.

    Here is an example html page source, that has a button to login/logout, depending on whether you’re currently logged in or not. It also displays the logged in users profile pic when logged in. It’s an example I made based on the facebook docs, but I’ve tested it and it works. Obviously you’ll need to replace the app id with an actual app id.

    <html>
<head>
  <title>Hello World</title>
  <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>

<!-- Display a login if you're coming to the app from outside of facebook -->
 <div id="login">
 <p><button onClick="loginUser();">Login</button></p>
 </div>

 <div id="logout">
   <p><button  onClick="FB.logout();">Logout</button></p>
 </div>

<script>
   function loginUser() {    
     FB.login(function(response) { }, {scope:'email'});     
   }
</script>

<p>Misc page content here...</p>

<!-- Initialize the fb javascript SDK -->
<script>
  window.fbAsyncInit = function() {
    FB.init({ appId: '1234567...', 
              status: true, 
              cookie: true,
              xfbml: true,
              oauth: true});
    FB.Event.subscribe('auth.statusChange', handleStatusChange);  
  };
</script>

<!-- Callback triggered when the user authenticates -->
 <script>
  function handleStatusChange(response) {
      document.body.className = response.authResponse ? 'connected' : 'not_connected';
      if (response.authResponse) {
        console.log(response);

        updateUserInfo(response);
      }
    }
 </script>

<!-- fb javascript SDK import -->
<div id="fb-root"></div>
<script>
  (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>

<!--Display the user's face when they log in -->
<div id="user-info"></div>
 <script>
   function updateUserInfo(response) {
     FB.api('/me', function(response) {
       document.getElementById('user-info').innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
     });
   }
 </script>

<!-- This style sheet changes the name of the body to reflect logged in status, thereby
     cueing to the login logout buttons which one should be visible -->
<style>
  body.connected #login { display: none; }
  body.connected #logout { display: block; }
  body.not_connected #login { display: block; }
  body.not_connected #logout { display: none; }
</style>
</body>
</html>
    • 0