Question

I’m am working on a facebook app where we just ask for a message in one textarea. Right now we request extended permissions directly after the user likes the page (the app is hidden until the user likes the page). We want it to be on submission of the form instead.

Is there a way to load the permissions dialog in a popup style div (not a new window…jquery.load?) and use a script page as my callback uri and post my data without reloading the tab? I’ve done this if with normal forms, but we need to grab the name/pic/email/bday from FB to drop into the database.

Any help, even a nudge in the right direction would be very appreciated!

/** UPDATED **/

Wanted to update with what I came up with, which uses all current SDKs. I tried to make it as template-y as possible so others can use it.

$("#submit").live('click',function() {
    if (someErrors === true) {
        // handle errors
    } else {
        FB.login(function(response) {
            if (response.session) {
                if (response.perms) {
                    FB.api('/me', function(response) {
                        // vars: response.session.uid, response.name, response.email, response.birthday, etc
                        // serialize data here for post
                        $.post("process.php",formData,function(data) {
                            if (data.error) { 
                                // send json encoded error messages back to retrieve here like below:
                                // PHP: echo json_encode(array("error"=>"fail"));
                            } else {
                                /**
                                send data back json encoded:
                                PHP: echo json_encode(array("yourData"=>"{$yourData}","fb_id"=>"{$fb_id}","name"=>"{$name}"));
                                Now we have data like:
                                var profile = 'http://www.facebook.com/profile.php?id='+data.fb_id;
                                var image = '<img src="http://graph.facebook.com/'+data.fb_id+'/picture" />';
                                var yourData = data.yourData;
                                **/
                            }
                        }, "json");
                    });
                } else {
                    // more errors
                }
            } else {
                // and more errors
            }
        }, {perms:'email,user_birthday'}); // request your specific permissions here
    }
    return false;
});

Answer 1

I had to do the same thing. I came up with this:

$("#fb_login").click(function(){

            FB.login(function(response) {
                    if (response.session) 
                    {
                        if (response.perms)
                        {
                              //alert("logged in..granted");
                             var uid = FB.getSession().uid;
                         FB.api(
                        {
                             method: 'fql.query',
                             query: 'SELECT name,email,pic FROM user WHERE uid=' + uid
                        },
                        function(response) {
                         var user = response[0];
                              $.get("addUser.php", { name: user.name, fbid: uid ,email: user.email }, function(data){
                              // ajax call to addUser.php to insert into database.


                            } );
                            }
                            );
                        } 
                        else 
                        {
                            // alert("Since You Have Not Granted Permissions For Accessing E-mails, You Can't register for any of the events.");

                        }
                    }
                    else
                    {
                         //alert("Not Logged In");
                    }
}, {perms:'publish_stream,email'}); // the extended permissions have to be specified here.

You can modify the above script to suit your changes. 🙂