Facebook Connect Bug - JavaScript Refresh - javascript

Facebook Connect has a recent bug that is causing the permissions pop-up window to not close and refresh the parent window as it is designed to do. Instead, after approval by the user it attempts to load the page directly in the pop-up window which is an awful user experience and really hurting our registrations. You can see the bug by registering for our site using Facebook Connect: http://alltrails.com
The URL of the page after the user connects that Facebook Connect is incorrectly loading in the permissions pop-up window is of the form:
http://alltrails.com/?installed=1&session={"session_key":"2.Gu0duOqdElNjXRac5wnetw__.3600.1283799600-1486832834","uid":1486832834,"expires":1283799600,"secret":"tKFaEgBTF9RJeuQZfYUSCw__","base_domain":"alltrails.com","sig":"a8dd9f75418b530ae6c3d935e14274c4"}
I'm hoping that someone much better at JavaScript than myself could suggest a simple code snippet that we could add to our homepage that would only be invoked if the page URL includes '?installed=1' and would do the following to allow the same user experience as Facebook Connect was intended to provide:
Close the permissions pop-up window
Load the appropriate page http://alltrails.com/register/facebook in the original parent window
I've tried to do this a bunch of different ways but haven't had any luck with getting it to work correctly. Thanks in advance for your help!

It's a (unconfirmed) bug.
http://bugs.developers.facebook.net/show_bug.cgi?id=12260
Hopefully it gets more votes so it gets fixed - vote people!
In the meantime, i am (attempting) to employ the following 'creative workaround':
Add logic to my Default.aspx page to detect that URL they are redirecting to in the popup.
Redirect to my page, FacebookInboundAuthorization.aspx, preserving querystring.
On load of that page, register some JavaScript to close the popup and manually fire the "onlogin" event handler for my button.
EDIT - Another possible solution
So i do something like this for the "Disconnect from Facebook" button, which has a similar bug which has been in FBC from day 1. If the user is already logged in, and you click the "Disconnect from Facebook" button, the "onlogin" handler is not fired.
So what i ended up doing is replacing the Facebook Disconnect button with my own regular anchor tag, mimicing the Facebook CSS. This way i can have full control over the click event (fire the function i want).
So, this principle could (theoretically) be applied to this current bug.
That is, after you do FB.Init on client-side:
Check FB auth status using FB.Connect.ifUserConnected
If user is connected, hide the regular FB:Login button, and show your "fake" FB Login button. Copy across the "onlogin" function from your regular FB:Login button to your fake button as the onclick event.
Your Fake FB Login button would be a regular anchor tag, with the same CSS applied to the regular FB Login buton.
So essentially, if the user is already connected, we don't really need FB's intervention for authentication, we can just do whatever we want (request perms, redirect, etc).
That should work.
Unfortunately i have higher priority things i need to work on, but it sounds like this is top priority for you.
So give that a go, hope it helps.

Related

How facebook/twitter share buttons avoid being blocked by popup blockers?

When a user which is not logged in to Facebook or Twitter, clicks the like/tweet button, a popup comes up asking the user to log in. This popup is not blocked by popup blockers of any kind. in IE for example, it opens up but anyway IE state a warning to the user. The bottom line is that all buttons probably use the same method.
I have a button that people click on it and it should open a similar screen, but it always gets blocked.
The button (in JS) works pretty much like FB like button. It checks if the user is logged in. If he does, then send the "like" to the servers. If he does not, then the login popup appears (and gets blocked).
So, it is a initiated by a user although not fully direct outcome, since we need to check if he logged in or not.
What is best method to do that?
The Popup Is activated by a click using the like, tweet button and they actually show only 1 popup. If you want, you can try by using only a single popup based on click for your website and you will definitely be able to understand this.

Cross Domain Pop Ups

My flow is as follows: the user clicks sign in on site 1. a pop up is opened from site 2 asking him to login using twitter. he then logs in - using oAuth, so the page changes. After a successful login the pop up should close and the code on site 1 should receive a notification.
What didn't work:
WebIntents - well, the examples on their site didn't even work, so I didn't try it locally..
easyXDM - communicates with an iframe, not a popup.
porthole - same, uses an iframe.
A horrible solution is refreshing the iframe every couple of seconds, to check if the user logged in already.
Is there a better way to do this? better libraries?
if you can refer the popup to another page after the user is logged in, you could use this:
main page:
localStorage.setItem('user_signed_in', false); // signed out by default
window.open("http://www.google.com/", "google_window", "menubar=no,resizable=no,scrollbars=no,status=no,width=400,height=300");
(function look_up() {
if(localStorage.getItem('user_signed_in')) {
go_on();
} else {
setTimeout(look_up, 500)
}
}());
function go_on() {
...
}
refer page:
localStorage.setItem('user_signed_in', true);
window.close();
Keep in mind that the refer page has to be on the same domain as your main page.
And, don't be afraid of bad support for localstorage in other browsers,
but if you really want to support oldies, you can use cookies, I believe.
When a user clicks a sign in button on site1 a pop up is opened from site2.
I'm assuming your using window.open thru an iframe to do this, and that you have already figured out how to bypass most browsers spam blockers etc.
Since you are opening this pop up as a new window, you are now in control of that window, and you can actually send stuff back from the new window.
This will be somewhat pseudo code, but just to make an example!
Lets say a user signs in with a link looking something like this:
<a href="" onclick="window.popup=window.open('/twitter/login.php', 'Twitter login', 'width=450,height=500'"</a>
Your pop up can now be refferenced by window.popup, and inside window.popup the original page is now called the window.opener.
On the same site that opens the popup you have a function, like this:
document.handleLogin = function (returnedDataFromPopup) {
console.log(returnedDataFromPopup);
}
After the user has logged in with oAuth, you need to redirect to a new page, this is explained in both the oAuth and Twitter guides, and you need to make that redirect happen inside the popup, and then capture the information from the login on that page and send it back to the original document and the handleLogin function.
Depending on what your using, in most PHP implentations you do something like this to get the data from the login, and this is of course after doing all the token and consumer key stuff:
$userinfo = $oAuth->getAttributes(); //or something similar, depends
So when redirecting from Twitter to a new page, the new page would look something like:
<? php
$userinfo = $oAuth->getAttributes();
?>
<script type="text/javascript">
window.opener.document.handleLogin(<?php echo json_encode($userinfo) ?>);
window.close();
</script>
This will actually run the handleLogin() function on the page that opened the popup, and it will send the userinfo from the popup to that function on the original page and then close the popup window.
I've used this technique with oAuth, OpenID, Google etc. and it works just fine without any need for local storage, cookies or page refresh at all, since you are in control of the popup window you can send information back and forth and you could even change the adress of the popup from the opening document on the fly if you wanted by doing something like this:
window.popup.location.href = 'google.com';
This is handy in some cases, for instance OpenID will by default close the popup and redirect the document.opener to the page specified, this is not what you want, and to overcome this you would have to open the popup on some random page, preferably an empty page that you control, and then redirect the popup's href to Twitter immediately after the popup is opened.
It all looks very complicated, but it is doable, and if you get this far, you now have the data, an all you have to do is somehow push it to site1 thru the iframe that holds site2. As pushing is'nt really possible without websockets or some sort of event driven server, like node.js, you will probably have to rely on long polling or something else, there are many ways to do this, and I'm sure you'll figure it out, but if you have some control over scripts running on site1, and you obviously have control over site2, then you can actually access some data thru an iframe with a little javascript, but I've never actually done that so I do not know exactly how it works.
It's not really relevant, but I don't really see why it would be useful for someone to login thru your site with an iframe from some other site, and it all seems strange to me, but thats up to you to figure out.

Any way to load a popup inside the iframe?

I'm wondering if i can do that,
Basically what im trying to achieve is the facebook share block already turned on when the user comes to the page but facebook won't allow iframing it..
The idea is that the user will see the share window without clicking the initial share button this way they will only need to share it on facebook's share box without the need to click share twice.
I was just thinking about the idea and how it could help while making the share function popup-less and to show the share prompt when the document loads and not whenever a user clicks share and will be glad if that can be achieved.
I has the idea of the share popup automatically open inside an iframe but i have no idea if that can be done.
To display popup inside iframe you've to set "display: 'iframe'" and you've to set the access token that you got by authentication
You can also view errors by using "show_error:true"
FB.ui({
method: 'apprequests',
message: 'Facebook for Websites is super-cool',
display: 'iframe',
show_error:true,
access_token: '#{#access_token}'
});
You can use Feed Dialog with FB.ui (JS-SDK) to achieve sharing dialog that can be displayed within your application canvas (which is running within iframe).
You can also use regular pop-up window. Most browsers blocking pop-ups if opened not by user interaction like click, but form submit is also considered user interaction in most cases, so submitting a form with target attribute pointing to invisible iframe will allow you to open popup on submit event...

How to count outgoing links with Google Analytics in accurate and user friendly way?

Most resources suggest using onclick handler with trackEvent() for tracking outgoing links. BUT this way does not work with all navigation methods! It won’t work if you click with middle button (except Chrome) or control-click (except Chrome and FF) to open new tab, if you right-click and select new tab or window from context menu or if you drag link to another tab. Is such cases onclick is simply not called. You can check it with very simple link:
GO
Putting JavaScript in href attribute breaks the link in all cases when new tab or window is opened.
Putting onclick in span that looks like a link, will not allow users to decide if they want to open in new tab or not.
Finally, going through a redirect page, which tracks outgoing event, causes problems with back navigation – when users try to go back, they get back to the redirect page and then JS again redirects to the destination page. They need to click back twice … quickly.
Is there a better way, which would be both accurate and user friendly?
Context menu can't be detected by using JS. So if you want to catch that you need to use the redirect method. To fix the back button problem, redirect using location.replace to remove the tracking page from the back-button history.
I don't know any details about Google Analytics. In general, to track users' external navigation:
<a ping> is made for this purpose. If ping is not available, fall back to changing the links to go through a redirect page. Use a 302 redirect to prevent it from showing up in history; if you can't, try javascript:window.location.replace().

Capturing F5, Back, Forward, clicking on link actions

I want to show a popup when a user close the browser and that popup will redirect to some google survey that we need to do.
Currently by using onbeforeunload function in JavaScript it's prompting me the popup but I only need popup when the user closes the browser or they enter a new url.
Is there any way to prevent this function to not fire when page is refreshed, or user goes back or forward and if it can be done then how will I redirect to a survey page. Or if we can't prevent then there is any logic to do this.
No, this is not possible. These events are outside your control for security reasons.
You're probably best off finding a different solution for your problem.

Categories

Resources