"Request Dialog" requestCallback when clicking Cancel or Close button - facebook

I am new into Facebook application development and also newbie about JavaScript and PHP programming.
I currently developing a Facebook application but currently stuck with Request Dialog window.
When the Request Dialog appears, I choose friends I want and then click "Send Requests", the requestCallback(response) are executed and friends who getting requests are notified as expected. But, If I click "Cancel" or the blue-colored close button, the requestCallback(response) is also executed but selected friends are not getting notified about the request.
Here is my code:
function requestCallback(response)
{
//console.log(response);
location.href='step2.php';
}
So, whether I click "Cancel" or close button, the script above are still executed (moving to page step2.php I specify.)
What I want is when the user clicking cancel button or close modal window button, the page stay at the same page.
Anyone know how to solve this problem?
Thanks!

You can just check what's inside the Facebook response object, because it won't be the same if requests have been sent or not !
Something like :
function requestCallback(response)
{
if(response && response.request_ids) {
// Here, requests have been sent, facebook gives you the ids of all requests
//console.log(response);
location.href='step2.php';
} else {
// No requests sent, you can do what you want (like...nothing, and stay on the page).
}
}
Or if you are using the new structure (Request 2.0 Efficient):
function requestCallback(response)
{
if(response && response.request) {
// Here, requests have been sent, facebook gives you the request and the array of recipients
//console.log(response);
location.href='step2.php';
} else {
// No requests sent, you can do what you want (like...nothing, and stay on the page).
}
}
Look at the structure of the response object to make your condition. The callback is fired even when you hit close in order to have the possibility to notice when your user quits the dialog. It's up to you to verify if he sent requests, and act like you want ! :)
Also, something important :
Facebook updated their request system a few weeks ago, making available "Requests 2.0" in your apps settings. It's turned off by default, but if you activate it, the structure of the response object when sending requests to people will change. So you'd have to update your condition in the callback !
Everything is explained here :
http://developers.facebook.com/blog/post/569/

Related

Why Google Pay doesn't work from iPhone Safary after an ajax request?

I try to add a Googla Pay button on a website. I follow the Google Pay implementation tutorial (https://developers.google.com/pay/api/web/guides/tutorial).
There is a code:
var paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function(response) {
//...
})
.catch(function(err) {
//...
});
I need to get some data from my server side before I call the above code so I do the http post request. Within success hanlder of my post request I call the above code. It works fine in my Android browser and my laptop browser. But it doesn't work from Safari. I get the "Unexpected developer error please try again later" error. If I call it without ajax request it works in Safari as well. Could someone suggest the solution?
Thanks for including the jsfiddle.
The reason that it's not working is because Google Pay tries to open a popup window when you call loadPaymentData in Safari. When a new window is triggered as the result of a click event (user initiated action), the popup window opens as expected. When it is triggered by a non-user initiated action, Google Pay gets loaded in the same window which ends up causing it to fail.
It looks like when you make an ajax request in the click handler and then call loadPaymentData, Safari considers it a non-user initiated action.
Check out the following example in Safari:
const ajaxButton = document.getElementById('ajax');
const nojaxButton = document.getElementById('nojax');
ajaxButton.addEventListener('click', event => {
$.get('/echo/json/', () => {
window.open('about:blank');
});
});
nojaxButton.addEventListener('click', event => {
window.open('about:blank');
});
I would recommend avoiding making any http calls on the button click event before loadPaymentData. If you can fetch the data before the button is clicked, then do so.
Out of interest, what kind of data are you fetching?

FB.login distinguish successful login from cancel if the user connected the app before

We have an FB.login call like this:
FB.login(function (response) {
if (response.status === 'connected') {
responseFunction(response.authResponse.userID);
} else {
responseFunction(null);
}
}, { scope: requiredPermissions.concat(optionalPermissions).join(','), return_scopes: true });
It properly detects a canceled login if the user didn't connect to the app yet. However, if the user is already connected when they cancel the login, response looks like this:
authResponse: {
accessToken: "token",
data_access_expiration_time: 1560437437,
expiresIn: 86963,
reauthorize_required_in: 7776000,
signedRequest: "bababa",
userID: "userid"
},
status: "connected"
Almost exactly like a successful login response. Luckily, there is also a grantedScopes field in the response if the login has been finished properly (because of a return_scopes option). However, using it to distinguish between the 2 seems unreliable and hacky.
Is there a better way?
Thank you in advance!
Update:
Why not use FB.getLoginStatus instead?
For the context: in my case, FB.login is used to be granted access to the user's pages. It is not used to log them into the app, per se.
I'll be happy if someone points at a mistake in my reasoning. Here it is:
Calling FB.login right after FB.getLoginStatus is unreliable due to the modal block in browsers. FB.login needs to be called synchronously within a click handler.
FB.getLoginStatus result may and will expire if called before showing the button calling FB.login. A user may and will spend a lot of time on this particular page before clicking the button.
That's why the button click handler immediately calls FB.login. It helps avoid both of the mentioned issues.
I ended up using the presence of grantedScopes in response as an indicator of a complete login.

Facebook Requests ID(s) retrieve and delete

So I'm developing a small web app, that implements the Requests Dialog(User-to-User).
I'm able to send an invite and also successfully to save data as request id and user id. But when the user gets redirected to my app, after clicking on the request, i can't retrieve request id as shown here: https://developers.facebook.com/docs/requests/#deleting and then delete it.
But i see the request id in the address bar of the browser and it looks like this: http://apps.facebook.com/myownapp/?fb_source=request&request_ids=210655195715938 and REQUEST_URI is: /halten/?fb_source=request&request_ids=210655195715938
i tried with javascript:
function getMultipleRequests(requestIds) {
FB.api('', {
"ids": requestIds
}, function(response) {
console.log(response);
});
}​
or with php:
if(isset($_REQUEST['request_ids'])) {
$requestIDs = explode(',' , $_REQUEST['request_ids']);
foreach($requestIDs as $requestID) {
try {
$delete_success = $facebook->api('/' . $requestID, 'DELETE');
} catch(FacebookAPIException $e) {
error_log($e);
}
}
but the request_ids is always empty but my browser shows the request_id
So the question is how to handle the problem?
Thanks in advance
A User to User Request is actually notified to the user in 4 levels.
1) Jewel notification
2) Bookmarks counter
3) Right top counter
4) Weird location notification inside the app(I did not know what this was called sorry)
All of these request will take the user to the app but unfortunately on the Jewel notification(#1) request url will contain all the request IDs and the remaining will contain only a single request ID.
Say you send 4 requests (1,2,3,4)
#1 in url will have 1&2&3&4
#2,#3,#4 will have one of those depending on which notification you response to
Hope this makes sense and answers the question.

How do I pop up a dialog from Facebook to request the user to "allow" for open graph?

In my Facebook application, I am requesting 3 scopes: email,publish_stream,publish_action
I am using the FB.login function. These 2 steps pop up.
When the user clicks "Cancel" in the first step, FB.login will show "status: unknown" as the response object.
However, when user clicks cancel in the second step, FB.login shows it as "status:connected" and treats it as if the user accepted everything.
I recently learned that you can check if the user allowed the 2nd step using
FB.api('/me/permissions', function (response) {
console.log(response);
} );
My question is...knowing that the user denied the open graph step, how can I pop that dialog up again?
You are correct, the 2nd stage of the Auth Dialog is optional, the user does not have to accept all of the extended permissions you ask for, or any of them, as it states in the Permissions sections of the auth dialog documentation:
The user will be able to remove any of these permissions, or skip this
stage entirely, which results in rejecting every extended permission
you've requested. Your app should be able to handle revocation of any
subset of extended permissions for installed users.
The best approach I think is to have your app manage with what the user accepts, but if you HAVE to have the permission(s) in the optional stage (extended permissions) then this is what you can do:
FB.init({
....
});
var requiredPermissions = ["email", "publish_stream", "publish_action"];
function checkPermissions(response) {
var ok = true;
if (!response.data || response.data.length != 1)
ok = false;
else for (var perm in requiredPermissions) {
if (!(perm in response.data[0])) {
ok = false;
break;
}
}
if (!ok)
login();
else
console.log("Hey there user who granted all the required permissions");
}
function loginCallback(response) {
if (response.authResponse) {
FB.api("/me/permissions", checkPermissions);
}
else {
console.log("User cancelled login or did not fully authorize.");
}
}
functoin login() {
FB.login(loginCallback, { scope: requiredPermissions.join(",") });
}
I haven't tested this code, it's a nudge in the right direction though.
Also, this code will go on forever until the user accepts all permissions or just gives up, you should somehow let him know that you need those permissions and about to send him for the auth dialog again.
Edit
I keep forgetting to include this with my answers:
Calling FB.login opens a new pop-up window, and browsers usually blocks that unless it's a result of a user action, as it says in the docs:
Calling FB.login results in the JS SDK attempting to open a popup
window. As such, this method should only be called after a user click
event, otherwise the popup window will be blocked by most browsers.
It also says there:
If you need to collect more permissions from users who have already
authenticated with your application, call FB.login again with the
permissions you want the user to grant. In the authentication dialog,
the user will only ever be asked for permissions they have not already
granted.
Which means that it's a way to do what you want, the popup probably did not open because it was blocked by your browser.
You need to modify the code I gave you so that every time you call the login function it's after the user interacted with your page, i.e.: display a message saying "the application needs this and that permissions, please click this button to continue" which then will call the login function.

Track use of send dialog

I'm using the Fb.ui send dialog to hopefully allow users to connect to other users. I want to know if there is anyway to track the use of this dialog box so I can tell if users are taking advantages of it.
You could track the usage of the send dialog by putting in some simple tracking at 3 different stages
User clicks on your 'send message' button to open the dialog
User opens the dialog but clicks cancel
User opens the dialog and then sends a message
Here's some sample code demoing how you can add a callback to the send dialog and determine whether or not the user actually sent a message. Although please note that there seems to be some issues with this at the moment and I'm not totally sure that the send dialog supports callbacks fully yet.
FB.ui({
method: 'send',
name: 'Google',
link: 'http://www.google.com',
},
function(response) {
if (response) {
// user sent the message
} else {
// user clicked cancel
}
});
In the callback function, trigger an ajax call to a php script that will recored the call in the database.
This way you'll know how many time the dialog was used, and by which user.