How can I trigger Facebook login when a checkbox is checked?

I'm implementing a share to multiple networks feature for my website. I need a bit of help with implementing the facebook login process. As a prerequisite to sharing on my user's behalf I need to make sure the user is logged into facebook and allowed access to my app. Normally this is done using the standard facebook login process.

/

I have implemented this and is working fine. I would like to modify the process to display the facebook login page if the following conditions are met:

A. The user checked my "Share with facebook" checkbox AND B. The user is not logged in OR C. The user has not authorized my app to post on their behalf

Here's what my form looks like:

<form action="post.php" method="post">
  <input type="checkbox" name="facebook"  value="1" onClick="FB.Login();"/>Facebook
  <label for="Message">Message</label>
  <input name="message" type="text"/>
  <input  type="submit" value="post"/>
</form>

Here's what my scripts look like (straight from the facebook tutorial):

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'MY APP ID',
            channelUrl : 'my channel url',
            status     : true,
            cookie     : true,
            xfbml      : true
        });

        FB.Event.subscribe('auth.authResponseChange', function(response) {
            if (response.status === 'connected') {
                testAPI();
            } else if (response.status === 'not_authorized') {
                FB.login();
            } else {
                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/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));

    function testAPI() {
        console.log('Wele!  Fetching your information.... ');
        FB.api('/me', function(response) {
            console.log('Good to see you, ' + response.name + '.');
        });
    }
</script>

How can I modify this javascript to popup the facebook login when the checkbox is checked and the user is not yet logged in?

I already tried this suggestion, but it didn't seem to work.

EDIT

Looks like I made this more plicated than it has to be. The following solution seems to work well. Hope it helps someone else.

<script type="text/javascript">

// Initialize the Facebook JavaScript SDK
FB.init({
  appId: 'APP ID',
  channelUrl : 'channel url',
  xfbml: true,
  status: true,
  cookie: true,
});

</script>

<input type="checkbox" name="facebook" value="1" onclick="FB.login();">

How can I trigger Facebook login when a checkbox is checked?

I'm implementing a share to multiple networks feature for my website. I need a bit of help with implementing the facebook login process. As a prerequisite to sharing on my user's behalf I need to make sure the user is logged into facebook and allowed access to my app. Normally this is done using the standard facebook login process.

https://developers.facebook./docs/javascript/gettingstarted/

I have implemented this and is working fine. I would like to modify the process to display the facebook login page if the following conditions are met:

A. The user checked my "Share with facebook" checkbox AND B. The user is not logged in OR C. The user has not authorized my app to post on their behalf

Here's what my form looks like:

<form action="post.php" method="post">
  <input type="checkbox" name="facebook"  value="1" onClick="FB.Login();"/>Facebook
  <label for="Message">Message</label>
  <input name="message" type="text"/>
  <input  type="submit" value="post"/>
</form>

Here's what my scripts look like (straight from the facebook tutorial):

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'MY APP ID',
            channelUrl : 'my channel url',
            status     : true,
            cookie     : true,
            xfbml      : true
        });

        FB.Event.subscribe('auth.authResponseChange', function(response) {
            if (response.status === 'connected') {
                testAPI();
            } else if (response.status === 'not_authorized') {
                FB.login();
            } else {
                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/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));

    function testAPI() {
        console.log('Wele!  Fetching your information.... ');
        FB.api('/me', function(response) {
            console.log('Good to see you, ' + response.name + '.');
        });
    }
</script>

How can I modify this javascript to popup the facebook login when the checkbox is checked and the user is not yet logged in?

I already tried this suggestion, but it didn't seem to work.

EDIT

Looks like I made this more plicated than it has to be. The following solution seems to work well. Hope it helps someone else.

<script type="text/javascript">

// Initialize the Facebook JavaScript SDK
FB.init({
  appId: 'APP ID',
  channelUrl : 'channel url',
  xfbml: true,
  status: true,
  cookie: true,
});

</script>

<input type="checkbox" name="facebook" value="1" onclick="FB.login();">

• javascript
• facebook
• facebook-graph-api

Share Improve this question Follow edited May 23, 2017 at 12:30 CommunityBot 111 silver badge asked Nov 4, 2013 at 18:26 gunner1095gunner1095 14533 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This appears to be the correct solution:

<div id="fb-root"></div>
<script src="//connect.facebook/en_US/all.js"></script>
<script type="text/javascript">

// Initialize the Facebook JavaScript SDK
FB.init({
  appId: 'APP ID', // Your app id
  channelUrl : 'channel url', // Your channel url
  xfbml: true,
  status: true,
  cookie: true,
});

function fbAuthUser() {
    FB.login(checkLoginStatus);
}

function checkLoginStatus(response) {
    if(response && response.status == 'connected') {
        document.getElementById("fb").checked = true
    } else {
        document.getElementById("fb").checked = false
    }
}
</script>

<input type="checkbox" name="facebook" value="1" onclick="fbAuthUser();" id="fb">

Hope this helps someone.

Do you realize that you have an error?

TypeError: FB.Login is not a function

You can use jQuery:

    $('#checkbox').change(function () {

     if ($(this).is(':checked')) { // only if the checked an not when unchecked!

         FB.login(function (response) {

             if (response.authResponse) {

                 console.log('Wele!  Fetching your information.... ');
                 FB.api('/me', function (response) {
                     console.log('Good to see you, ' + response.name + '.');
                 });

             } else {

                 alert('User canceled login or did not fully authorize the app.');

             }

         }, {
             scope: '' // we don't need any scopes in demo...
         });

     }
 });

Fiddle