My app opens a share dialog when the user submits a form. The dialog is called on document ready (jQuery) when the page refreshes after the submit.
The dialog box does open, but then closes a couple of second later. This pretty much renders the dialog useless. If you try and hit 'share' before it closes then it does work, but obviously most users aren't going to try and race it.
The app can be found here: https://apps.facebook.com/topmoviesseen/
I have noticed that it can be tempremental, with the odd time seeing it work perfectly. Other times the dialog disappears only to reappear 4 or 5 seconds later. I would hazard a guess that there is some sort of JS affecting either the z-index or visibility of the box, but I cannot find anything.
Any help is hugely appreciated.
Code used to call dialog:
$(document).ready(function(){
// calling the API ...
var obj = {
method: 'feed',
display: 'iframe',
access_token: 'example',
name: 'Top 100 Movies Seen',
link: 'https://apps.facebook.com/topmoviesseen/',
picture: 'https://mgnewmedia.com/topmovies/assets/images/for_stream.png',
description: 'I have seen 62 of the top 100 movies of all time. How many have you seen?',
caption: 'Done any better?',
message: '62 out of 100 isn\'t bad.'
};
FB.ui(obj, callback);
});
you have to make sure your FB.ui is called after your FB.init is complete, so setting it in the window.fbAsycncInit listener will help:
window.fbAsyncInit = function() {
FB.ui(...)
};
Related
I have a php function which reloads one page in hidden iframe before real redirection is done after input button is clicked.
function button_confirm_order_params() {
$url = "somepagetoreloadinbackground.php";
$alert = "alert('you will be redirected to ext. page')";
return "onclick=\"document.all.myFrame.src='$url'; $alert;\"";
}
Everything works good, however I would like to use something more beautiful than browser's alert. So I downloaded SweetAlert and changed return to:
return "id=\"btnShowAlert\" onclick=\"document.all.myFrame.src='$url'; \"";
The problem is that without alert() the page is not being stopped before redirection. It's just shows sweetalert for a moment and then opens another page, so my "somepagetoreloadinbackground.php" is not loaded. Any ideas to handle it?
If you check the examples given on a sweetalert github, it seems there's actually alot of options that can help you: http://t4t5.github.io/sweetalert/
There's a standard timeout version: It's the timer attribute you have to add.
swal({
title: "some title",
text: "some message",
timer: 2000, // timeout in miliseconds
showConfirmButton: false // show ok button or not
});
And also, although it's a confirm instead of an alert, there's a callback function! Just add you redirect to that callback if the timeout version isn't good enough:
swal({
// add all options you want
},
function(){
// the actual callback, triggered by clicking the ok button on the confirm.
document.all.myFrame.src='$url'
});
Always read the docs for the library you're using first. :)
My question is essentially the same as this question, but now that 6 years have passed, it seems that the answer there doesn't work for today's browsers.
I have implemented Google Analytics Enhanced Ecommerce tracking, with code very similar to this snippet. That snippet assigns a new URL to document.location inside the hitCallback function (which is called asynchronously).
The problem is that after the user gets to the new page, their browser history doesn't include the previous page, instead if they click "back" they will go back two pages.
I am seeing this problem in Chrome and IE9. I'm not seeing it in Firefox.
I have tried the workaround of using setTimeout in the callback function but it makes no difference in Chrome.
Here is the code in question:
$(document).on('click', 'a.product', function() {
ga('ec:addProduct', {
'id': $(this).data('ean'),
// a few more values, omitted for brevity
});
ga('ec:setAction', 'click', {list: 'Search results'});
var href = $(this).attr('href');
// Send click with an event, then send user to product page.
ga('send', 'event', 'UX', 'click', 'Results', {
hitCallback: function() {
document.location = href; // this line is the problem
}
});
return false;
});
Edit:
My page has lots of large images, and I just discovered that this problem only happens when a user clicks a product before all the images have finished loading.
I discovered that this problem only happens when a user clicks a product before all the images have finished loading. So I made the images get lazy loaded, and this should greatly reduce the chance of a customer having this problem.
I managed to get a button to work to call the facebook pay dialog and all was dandy, it opened with the correct data and called the purchase callback page at the correct times with the correct data.
Now though it is not displaying after loading (though I don't think any of the data (or even the code) has changed).
When I click the button the payment dialog opens up saying loading, and all of the database changes done by the purchase callback page that are done when the dialog opens are done properly and completely. Next the loading dialog disappears and my javascript callback function is not called and nothing else happens at all.
If I change the data so that, for example, the price is a string rather than a number then I get the payment dialog open up with the correct error instead of just the loading screen and my callback function is called.
I am not sure what the problem is, here is my code for calling the payment UI:
FB.ui({
method: 'pay',
order_info: {
pkgnum: d.id,
title: d.name,
description: d.desc,
price: d.cost,
image_url: 'images/coin.png',
product_url: 'images/coin.png',
userid: username
},
purchase_type: 'item'
}, fbPurchaseCallback );
And here is the data the UI receives for displaying the item payment information:
{
"content":[{
"pkgnum":20,
"title":"Lolname",
"description":"Loldesc",
"price":100,
"image_url":"images/coin.png",
"product_url":"images/coin.png",
"userid":"254884",
"item_id":"254884"
}],
"method":"payments_get_items"
}
The issue was with facebook being unable to find images/coin.png for some reason. Solved now.
I'm using the Facebook Send Dialog to send messages to friends. As documented here: https://developers.facebook.com/docs/reference/dialogs/send/ and am using a link like the one in Facebook's example:
https://www.facebook.com/dialog/send?app_id=123050457758183&name=People%20Argue%20Just%20to%20Win&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=http://www.example.com/response
On the page I have specified as the redirect_uri I am displaying text saying: "Your message has been sent". However I've realised that you see this page even if you've clicked cancel in the Facebook dialog.
Is there any way to determine whether save or cancel has been clicked?
Update: I've found a workaround using the FB.ui method which solves the immediate issue I was having. I would still be interested to know if anyone has a better solution using a Send Dialog link like the one above.
I've found a work around by using Facebook's Javascript SDK's FB.ui method.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
});
N.B. display must be set to popup for this to work!
As it does not require a redirect_uri, the issue of knowing whether save or cancel has been clicked is not an issue. If however you do wish to know this, you can access a response object:
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
},
function(response) {
if (response){
// save has been clicked
} else {
// cancel has been clicked
}
});
Small complement to Andy's response:
the response-object does not give much info about what has been sent, actually (returns [] in console), but the mere EXISTENCE of the reponse object indicates the "SEND" button has been pressed
FB.ui(obj, function (param) {
if (param) {
// The "SEND" button has been pressed
}
else{
// The "Cancel" button has been pressed
}
I am trying to create a Facebook Dialog using the new improvements that were released last week.
http://developers.facebook.com/blog/post/437
What I want is to be able to have a link so when it's clicked a popup is generated, or have it show up in the page. I've tried putting it in a DIV and then showing with JQuery but it won't center on the page. I've gotten the code to work for posting to the users wall... just don't know how to either format the JS code and or create the link for the popup.
Thanks in advance!
As long as you have the Facebook js on your page, it's as easy as this to create a friend invitation:
<script>
FB.ui(
{
method: 'friends.add',
id: fbid // assuming you set this variable previously...
},
function(param){
// If you have FireFox + FireBug or Chrome + developer tools:
console.log(param); // log response to javascript console
// If they cancel params will show:
// {action:false, ...}
// and if they send the friend request it'll have:
// {action:true, ...}
// and if they closed the pop-up window then:
// param is undefined
}
);
</script>
You can test this by using the javascript console app on Facebook:
http://developers.facebook.com/tools/console
Paste in the script above, including the tags, or click the "Examples" button on the bottom of the text area and find the "fb.ui — friends.add" example.