Facebook FB.login() Popup Won't Close in IE8 - javascript

I've searched for answers to this -- seems like all the answers relate to the old Facebook API so the solutions are no longer relevant.
The problem I'm having: I've got a custom Facebook tab which has a button on it that, when clicked, triggers FB.login(). The way it should work is: user clicks to log in, popup comes up to authorize the app, user clicks authorize, the popup closes. This flow works correctly on all browsers except IE8 and below. On IE8, the user clicks to log in, the popup comes up to authorize the app, the user clicks authorize, then the content INSIDE the popup refreshes with the content from the redirect URL. Needless to say, this is not the desired experience for IE8 users :(
I've tried everything I could find: doublechecked that there are no javascript errors, ensured that there is a valid channel file, etc. Nothing appears to fix it. Everything is happening through secure (https), so I'm not sure if that has anything to do with it.
I've been trying to fix this for DAYS now; any help would be GREATLY appreciated!

Make sure fb-root element is only once in your page , I have faced this issues and when i made sure that fb-root div is only once the issue got resolved

You should specify a p3p header in all responses from your web server. Please see: http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx.

By "the content INSIDE the popup refreshes with the content from the redirect URL" do you mean that you are passing a redirect URL? If so, don't do that. The popups work using some cross-domain JavaScript magic with a specially constructed redirect URL. If you put your own, then the popups may break.
Also, make sure you're setting a proper channelUrl when you call FB.init().

Related

React + TS Last.FM API cancel callback

I'm trying my hardest to properly implement my system with the Last.fm API, but I just cannot get it to work.
I am supposed to redirect the user to https://www.last.fm/api/auth?api_key=<API KEY>&cb=<CALLBACK>", which works perfectly fine as long as the user actually signs in. But if the user presses Cancel, you just end up at https://www.last.fm/api/None instead of the callback. Docs can be found here.
I tried to look into how other sites did it like openscrobbler.com, but the source code is unfortunately of no help. They also simply set the window's href to the right url with the same parameters as I do (logIn function here).
Alternatively I tried using a pop up window but that's also to no avail because I cannot access any of the data inside of the popup (CORS) and none of the events I tried (unload, beforeunload, close, ..) work.
Code I tried to redirect:
window.location.href = `https://www.last.fm/api/auth/?api_key=${api.lastFmApiKey}&cb=https://example.com/`;
And for the pop-up:
const popup = window.open(url, "Last.fm Login", `popup width=${loginWindowWidth}, height=${loginWindowHeight}, left=${left}, top=${top}`);
Any help with either getting the redirections to go right or a trick to get information from the popup window (when redirected specifically so I know when they are on the None page), would be greatly appreciated.
Thank you!

Creating a link to another website and loading a modal

I have just seen a website that can create a link to any website and display a modal when the link is clicked on someone else website. I was just curious if anyone knows how this is done?
Here's the test link that does this:
https://twitter.com/workladuk/status/955752813333766144
Here's how this scheme works:
Notice that clicking on the link in the tweet mentioned in your comment (seen at https://twitter.com/workladuk/status/955752813333766144) doesn't actually take you to StackOverflow, even though it appears to point to this article.
It takes you to http://readr.me/vc-25, a totally different site. This is clear from the browser address bar.
By inspecting the HTML of that page using the browser developer tools, we can see that it actually is a totally different page containing an overlay with the signup form, and also an iframe containing the page the user was hoping to visit, giving the illusion that they're on the page and just need to close the popup to view it. Once they do close the popup, it actually makes a whole new HTTP request and redirects the user to the real page.
Interestingly, this was even more obvious given the example you used, because when going to the site with the signup form, the StackOverflow page displayed underneath it showed I was not signed in, even though I was signed in to SO in other tabs in the browser. This will be because running it in an iframe caused it to be run in a separate session, in which I was not signed in. This was a another big clue to show that I was not on the real Stackoverflow page.
So to be clear, it is absolutely not making a popup appear on another website, because that's impossible without hacking it. Instead it's actually creating another page containing the signup form, redirecting the user to that page and embedding the "real" page within that to create an illusion.

How can I disable the saving bookmark function for specific page just via the html code?

the requeirment is that I want to avoid the specific web page to save to bookmark,
and is there someway to acheive this funcion just use some code, maybe add or js code . thanks
The answer is no, the user can always bookmark a page as this is browser function, but you can use sessions. Then make sure that any request for a page
must have an active session id or it returns an error or redirects to the home page. The user can bookmark the page but the bookmarks will then only work for a short time (until the session expires). This also has the added benefit of
making the site impossible to index by search engines.
The closest you're going to get is if you open another window using JavaScript as you can control whether the menubar and toolbar are displayed.
window.open(
"https://www.google.com/",
"Google",
"resizable,scrollbars,status");
However, this is likely going to be blocked by their popup blocker.

AJAX - Modal Popup Not In Generated Source - How'd They Do That?

On the Bloomberg.com site, in the top right of the homepage there is a 'Sign In' link (next to their search textbox). Upon clicking the link a simple-looking modal popup appears into which one can enter one's sign-in credentials. Clean, elegant. With the popup still visible I did a generated source check and there's no evidence of the modal popup html anywhere in it. I'm wondering why the modal popup source is missing and, assuming it's coming from somewhere else, where it's coming from. Can someone please explain it?
More generally I assume that Bloomberg's login dialog is ultimately transmitting its user data on an encrypted basis. The home page itself is rendering as a standard http. Is there some hidden - and secure, presumably https - means by which this site, and others I'm sure, is accomplishing its modal information gathering and posting, securely and distinct from the base homepage? Any clarifications on how this is happening and the best practices for coding it would be appreciated. Thanks!
-- Rick
The popup is actually just presenting an iframe of this URL:
https://login.bloomberg.com/api/login?skin=&rt=http%3A%2F%2Fwww.bloomberg.com%2F&cc=0.13446950796060264
(And the iframe itself is presented over HTTPS, which covers the security issue you mentioned)

Facebook 'Like' Dialog Appears and Immediately Disappears

I've been having an issue with the Facebook Like button for quite some time. I've looked all over for a solution but am quite stuck. The error occurs on my site www.MapYourVote.com. When you go to a poll page and click 'Like' the dialog appears and quickly disappears. At the same time, the counter also goes to 1 and quickly goes back to 0.
The problem is always solved for individual poll pages by using the Facebook Debug tool (http://developers.facebook.com/tools/debug). Once you use it on the url, the like button will work as expected. The issue is my website is dynamic and I can't use the Facebook Debug tool every time someone creates a new poll. The Facebook Debug tool does not reveal any problems (apart from og image size but I doubt that's the issue).
Here is an example of a page in which the Like button does not work. If you were to enter this url into the Facebook Debug tool, the Like button would work.
http://www.mapyourvote.com/Poll/Election-Result-Feelings/
Any help would be much appreciated!
I also had this problem. I was constructing a referrer url to give link-sharers a credit, so there was a different url for each user that wanted to share something. The referrer link would give the user credit and redirect to the login page of my site. With this configuration, the like dialog would appear for a moment and then disappear again, unless I went to facebook's debug tool.
What fixed the problem for me was to change from a redirect to rendering the page directly from my referral link. In fact, I changed the referral link to be a ?r=refid parameter on my root page URL. It appears to work correctly if facebook doesn't have to follow a redirect to get the og: data.
I had a similar problem and it turned out I had too restrictive cookie policy set in my browser - I only allowed Facebook to use 1st party cookies. When I allowed Facebook to use other cookies, the problem was solved. It's hard to debug when no error appears other than the immediate pop-up closeup.
I had the same problem. It was caused by url value in data-href attribute. I had there url pointing to my localhost.
When I changed the url to existing one, problem was solved.
Hope it helps
For me, the problem (Like popup disappearing after a second) was happening when the Like button URL redirected to another URL.
The fix was to add og:type, og:url, and og:title (required per https://developers.facebook.com/docs/reference/opengraph/object-type/website), then running the URL through the Facebook debugger to clear the cache (https://developers.facebook.com/tools/debug).
More at https://stackoverflow.com/a/16597060/2391566

Categories