how to trigger FB.login() on page load?

facebook-javascript-sdk, facebook-login, jquery

Solution

So I scrapped the idea of putting the login code in a separate .js file. I just put the `FB.login` method right in the html, inside the `window.fbAsyncInit` block, along with the `FB.init` code. It works perfectly.

   <body>
        <div id="fb-root"></div>
    <script>

  window.fbAsyncInit = function() {

      FB.init({
        appId      : '140*****07', // App ID
        channelUrl : '//http://s******.com/channel.html', // Channel File
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        oauth      : true,
        xfbml      : true  // parse XFBML
      });

    FB.login(function (response) {

            if (response.status === "connected") {

                        var uID = response.authResponse.userID;

                        console.log(uID);

                      FB.api('/me', function (response) {

                             var name = response.name;
                             var locationName = ' ';

                             if (response.location) {

                                locationName = response.location.name;
                                console.log(locationName);

                            } else {

                                alert("your current city needs to be set in your Facebook 'about' section. Please make it public for our use");

                            }
                       });//closes fb.api

                    } else if (response.status === "not_authorized") {

                        //authCancelled. redirect
                    }
                },
                {
                    scope: 'user_location,user_likes'
                }
            );


      };//closes window.fbAsynInit

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

     </script> 

       <h1 id="redirecting">Redirecting</h1>
       <button id="button">click</button>

       <img id='backgroundImg' src="https://sa*****.com/template.jpg"/>

   </body>
</html>

Problem

`FB.login()` seems to only work if triggered by a click event. I want it to fire on page load. I've tried using the `trigger()` method, but that didn't work. I've also tried triggering it using `jQuery('#button').click()`. ``` $(function(){ //this is logging so I know the js is loading properly console.log("script loaded"); $('button').button(); $('#button').click(function(){ FB.login(function(response) { console.log('FBLOGIN firing'); if(response.status === "connected"){ var uID = response.authResponse.userID; FB.api('/me', function(response) { var name = response.name; if(response.location){ var response = response.location.name; }else{ alert("The Bringer Network needs your current city to be set in your Facebook 'about' section. Please make it public for our use"); } });//closes fb.api }else if(response.status === "not_authorized"){ //authCancelled. redirect } },{scope: 'user_location,user_likes'}); });//closes click jQuery('#button').click(); }); ```

Original source