javascript - Post message on Facebook wall if checkbox checked

482

I want to create a function to share something on Facebook on submit, if a checkbox is checked, something like reply form on Ask.fm (I believe you now what I'm talking about). I figured based on some answers from here how to open Facebook authorization pop-up on checkbox click, but the thing is that I want to remain unchecked until user authorize and give all required permissions to Facebook App. More exactly, you click on checkbox, Facebook Login pop-up opens but checkbox stay unchecked until you authorize the app with all required permissions. Until now I have this code:

 <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
 window.fbAsyncInit = function () {
   FB.init({
     appId: 'APP_ID',
     status: true,
     cookie: true,
     xfbml: true
   });
 };
 (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));


$('#checkbox').change(function () {
 if ($(this).is(':checked')) {

     FB.login(function (response) {
         if (response.authResponse) {
             console.log('Welcome!  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: 'publish_stream,email', 
        return_scopes: true
     });

 }
});


function fb_publish() {
  var msg = $('#message').val();
 FB.ui({
 method: 'stream.publish',
 message: msg,
 attachment: {
   name: 'Name here',
   caption: 'Caption here.',
   description: (
     'description here'
   ),
   href: 'url here'
 },
 action_links: [
   { text: 'Code', href: 'action url here' }
 ],
 user_prompt_message: 'Personal message here'
  },
  function(response) {
   if (response && response.post_id) {
      alert('Post was published.');
    } else {
      alert('Post was not published.');
    }
      }
    );  
   }

});
</script>

 <form onsubmit="fb_publish()">
   <input type="checkbox" name="facebook" value="1" id="checkbox" />Facebook
   <label for="Message">Message</label>
   <input name="message" id="message" type="text" />
   <input type="submit" value="post" />
</form>
522

Answer

Solution:

Try This code:

<!DOCTYPE html>
<html>
<head>
    <title>Facebook Login</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script type='text/javascript'>
        var perms = ['public_profile', 'email'];
        var declined_perms = [];
        $(window).load(function () {
            window.fbAsyncInit = function () {
                FB.init({
                    appId: 'XXXXXXXX',
                    status: true,
                    cookie: true,
                    xfbml: true
                });
                checkLoginState();
            };
            (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));


            $('#checkbox').change(function () {
                if ($(this).is(':checked')) {
                    if (parseFloat($(this).val())) {
                        customLogin();
                    } else {
                        rerequest();
                    }

                }
            });

            function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);
                // The response object is returned with a status field that lets the
                // app know the current login status of the person.
                // Full docs on the response object can be found in the documentation
                // for FB.getLoginStatus().
                if (response.status === 'connected') {
                    // Logged into your app and Facebook.
                    testAPI();
                } else if (response.status === 'not_authorized') {
                    // The person is logged into Facebook, but not your app.

                } else {
                    // The person is not logged into Facebook, so we're not sure if
                    // they are logged into this app or not.

                }
            }

            function checkLoginState() {
                FB.getLoginStatus(function (response) {
                    statusChangeCallback(response);
                });
            }

            function rerequest() {
                FB.login(
                        function (response) {
                            testAPI();
                        },
                        {
                            scope: declined_perms.join(),
                            auth_type: 'rerequest'
                        }
                );
            }

            function customLogin() {
                FB.login(
                        function (response) {
                            testAPI();
                        },
                        {
                            scope: perms.join()
                        }
                );
            }

            function testAPI() {
                declined_perms.length = 0;

                FB.api('/me/permissions', function (response) {
                    var responsePerms = [];
                    for (var i = 0; i < response.data.length; i++) {
                        responsePerms.push(response.data[i].permission)
                        if (response.data[i].status == 'declined') {
                            declined_perms.push(response.data[i].permission);
                        }
                    }
                    for (var _i = 0, _j = perms.length; _i < _j; _i++) {
                        if (responsePerms.indexOf(perms[_i]) < 0) {
                            declined_perms.push(perms[_i]);
                        }
                    }

                    if (declined_perms.length) {
                        alert('User canceled login or did not fully authorize the app.');
                        console.log('Please Provide access to ' + declined_perms.join());
                        document.getElementById('checkbox').checked = false;
                        document.getElementById('checkbox').value = 0;
                    } else {
                        document.getElementById('checkbox').checked = true;
                        console.log('Welcome!  Fetching your information.... ');
                        FB.api('/me', function (response) {
                            console.log('Successful login for: ' + response.name);
                        });
                    }
                });


            }


            function fb_publish() {
                var msg = $('#message').val();
                FB.ui({
                            method: 'stream.publish',
                            message: msg,
                            attachment: {
                                name: 'Name here',
                                caption: 'Caption here.',
                                description: (
                                        'description here'
                                        ),
                                href: 'url here'
                            },
                            action_links: [
                                { text: 'Code', href: 'action url here' }
                            ],
                            user_prompt_message: 'Personal message here'
                        },
                        function (response) {
                            if (response && response.post_id) {
                                alert('Post was published.');
                            } else {
                                alert('Post was not published.');
                            }
                        }
                );

            }

        });
    </script>
</head>
<body>
<form onsubmit="return fb_publish()">
    <input type="checkbox" name="facebook" value="1" id="checkbox"/>Facebook
    <label for="Message">Message</label>
    <input name="message" id="message" type="text"/>
    <input type="submit" value="post"/>
</form>
</body>
</html>

People are also looking for solutions to the problem: php - How to define on Drupal an external database specifying the schema

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.