We Keep Coding

center align facebook login window

I am trying to implement Facebook login in my application using the Javascript SDK. I am using the following js:
$("#loginWithFacebook").click(function () {
FB.login(function (response) {
if (response.status === 'connected') {
FB.api('/me', function (user_details) {
// do something with the user_details
});
}
});
The problem is when I call FB.login, it opens the Facebook login window to the extreme right, but I want it to be center aligned. Any way to fix this issue?

This is old, but I'm faced with the same issue :
when using simple custom <button> instead of "official" FB button, the login popup window opens on extreme right of screen.
I think the official button (wich is complex : a complete html page with JS) makes use of the SDK for centering the popup. I couldn't manage to use the SDK for centering popup with a custom button (if someone does, tell us!).
The FB.login() function doesn't center popup when fired from custom button.
I found this solution, which works great :
http://permadi.com/2011/04/centering-facebook-oath-login-popup-dialog/
the online demo (view source to see code) :
http://www.permadi.com/tutorial/facebook-js-oauth-popup-centered/index.html
It makes use of FB.getLoginStatus() and NOT FB.login().
It mimics the FB.login function :
open centered facebook popup with window.open
check with setInterval if user is logged or not
when user is finished with facebook, the redirectUrl provided during opening the popup is used by FB go to a blank page we create with only window.close() in it --> it closes the popup
clearInterval and continue with app code (login, save in data base...)
Below is my JQUERY version of their script with some simplification and improvments :
simplification : only login button. No logout.
improvment : load JSK only if user hit the FBlogin button (and only once)
improvment : prevent user from triggering multiple facebook popup (important)
We kind of recreate the offical FB.login function here:)
But there is some advantages over the offical button :
we can use a simple <button> wich is very easy to style
wich is accessible (try to catch official btn with TAB on keyboard only)
wich loads fast
var fbOpen = 0; // to prevent opening multiple facebook login popup dialog
// otherwhise setInterval is messing things around!
function treatFBresponse() {
FB.init({
appId : 'YOUR_APDD_ID',
status :true, // IMPORTANT, otherwhise if user cancel login (->response.status="unknown), 2nd time -> response.status="NULL" -> no possible login any more!
cookie : true,
version : 'v2.5'
});
FB.getLoginStatus(function(response) {
if (response.status=="connected" && response.authResponse){
FB.api('/me?fields=id,name,first_name,last_name,picture,email', function(response) {
// USER LOGGED into your app and facebook -> console.dir(response); -> log into your app, save in database etc.
}else{
// USER NOT LOGGED into your app
fbOpen = 0; // we let him retry
}
});
}
var gotFBscript = 0; // to load FB JS SDK only once
function fbSDK() {
// SDK NOT LOADED YET
if( !gotFBscript){
console.log('getting FB JS SDK...');
$.ajax({
// OR $.ajaxSetup({ cache: true });
// $.getScript('//connect.facebook.net/en_EN/sdk.js', function(){ gotFBscript = 1 ...
// BUT $.ajax is better I think because it lets you set cache to true locally
url: '//connect.facebook.net/en_EN/sdk.js',
dataType: "script",
cache:true,
success: function() {
gotFBscript = 1;
treatFBresponse();
}
});
// SDK ALREADY LOADED
}else if ( gotFBscript ){
treatFBresponse();
}
};
function facebookPopup() {
var popupWidth=500,
popupHeight=300,
xPosition=($(window).width()-popupWidth)/2,
yPosition=($(window).height()-popupHeight)/2,
loginUrl="http://www.facebook.com/dialog/oauth/?"+
"scope=public_profile,email&"+ // instead of publish_stream
"api_key=YOUR_APDD_ID&"+ // instead of client_id
"redirect_uri=http://www.MY_SITE.COM/path/to/self-closing-empty-page.php&"+
"response_type=token&"+
"display=popup",
fbLoginWindow=window.open(loginUrl, "LoginWindow",
"location=1,scrollbars=1,"+
"width="+popupWidth+",height="+popupHeight+","+
"left="+xPosition+",top="+yPosition),
loginTimer=setInterval( function() { checkLoginWindowClosure(fbLoginWindow, loginTimer), 1000);
};
function checkLoginWindowClosure(fbLoginWindow, loginTimer) {
if (fbLoginWindow.closed)
{
clearInterval(loginTimer);
fbSDK();
}
};
$("#YOUR_CUSTOM_FB_BUTTON").on('click', function() {
if(fbOpen === 0) {
fbOpen = 1;
facebookPopup();
}
});

You should read this link. You can just use the correct HTML Tags with <div align="center"> or use CSS

Facebook login Oauth dialog on close event?

On the Facebook JS SDK, I'm trying to detect when a user close the Oauth dialog after clicking on login button (accept or deny), so there is the property onlogin :
<div class='fb-login-button" onlogin="function...">FB login</div>
But this method is really bad ! And I don't find any event or indication that I could do this without element property...
The other events related : auth.authResponseChange and auth.statusChange are called at start if user is already connected to the app. And the event auth.prompt is never called (I'm trying to report a bug about this but the bug report page is bugged...).
So is this script :
$('.fb-login-button').each(function() {
var oldLoginFn = this.onlogin || $.noop();
this.onlogin = function () {
//my instructions...
return oldLoginFn.apply(this, arguments);
}
});
is the best I can do to detect the return of Oauth dialog ? there is really no events to detect the login action ?

You need to allow the URL in which you are running the Facebook JavaScript SDK. TO do this go and edit your facebook app at http://developers.facebook.com/apps under "settings-basic-basic info", put all the URLs on the "App Domains" field e.g www.yourdomain.com, yourdomain.com.
Not that the URLs you put here must be derived from your "Website URL" field below the "Basic Info" settings, under "Select how your app integrates with Facebook" - "Website with Facebook Login"
Facebook has logged the error that is being shown when you try running your app when the URL is not allowed. TO view this log go to your browser console and view the logs
Enjoy

Open a url in Windows Metro App via Javascript

Normally, when I use in my metro application, the url is opening in the default web browser. I don't want to do this with anchor, I want to do the same behavior via Javascript and as async. But I don't know how to open the url with default browser.
Here is my code:
var $aTag = $("<a/>").click(function (event) {
showYesNoDialog(
"Do you approve?",
"The link will be opened in another window. Do you approve?",
"Yes", // Text of yes button
"No", // Text of no button
function () { // Behavior of yes button
// I tried this but nothing happened.
window.location.href = _URL_; // Should open in chrome or default web browser
},
function () { // Behavior of no button
// do nothing
}
);
});
What I also tried is that:
$("<a href='" + _URL_ + "'></a>").click();
But this didn't work, too.

Finally, I found my answer while searching on google.
Open a URL in a new tab (and not a new window) using JavaScript
I used this code to open the url out the metro app and it worked in my situation:
window.open(_URL_, '_blank');
window.focus();

You cannot launch an actual application from within Metro, but what you can do is launch a file with associated program, and that should give you the functionality you need.
Check Sample
The sample covers files and URI's - http://msdn.microsoft.com/library/windows/apps/Hh701476

Popup problem...Not sure if this is the best way to do this

I have written a script that allows a customer to log in, and download their contract in PDF.
We want the contract PDF to open in a popup, but are experiencing problems with customers who don't understand the basics of web browsers...
Basically, the customer logs in and a link is generated for their contract. The link is bound through jQuery's live event handler, that takes the request, sends it to an AJAX logging function then opens the PDF via window.open.
Since it is a user's action that opens the window, I can only think that because it goes through 2 other functions first, it is making the pop-up blocker kick in.
Does anybody have any better ideas?
My code is all over the place, in differnt namespaces, so I hope you guys can figure it all out:
Generate the link in a call back function, if the customer's credentials are correct:
$("#pdfLinks").prepend("<span><a href='#' id='pdfLink'><img src='img/btnDownloadPdf.png' alt='Downdload PDF' /><br>Download Adobe © PDF<\/a><\/span>");
$("#pdfLink").live('click', function() {
UI.showWorkingDialog();
net.tssol.contract.log(contractId['contract'], "DOWNLOAD_PDF", lead);
});
$("#pdfLinks").prepend("<h5>Adobe PDF<\/h5>");
the tssol.log function:
log: function(contract, method, lead) {
$.post("log.php", { lead: lead,
method: method},
function(log) {
if (log['success'] == true) {
if (method == "DOWNLOAD_PDF") {
// change to window.open for popup
window.open("http://oururl.net/public_html/viewPdf.php?verify=" + contract, '', 'scrollbars=1,menubar=0,height=600,width=800,resizable=1,toolbar=0,location=0,status=0');
Let me know if you guys see any way to make the user experience better.
Thanks

Maybe you can provide a HTML Version of the contract in a popup and add a "Download PDF" Button at the bottom of the popup content?
But in general you shouldnt use popups since they are often blocked by the web browsers and are in users head synced with trash and viagra-advertising.. you know what I mean ;)
I would do a jQuery Lightbox-like popup inside the website with the HTML-Contract, and optionally offer a PDF Download Button!
Have a look at this one: http://fancybox.net/

FB.login issue, need to show lightbox instead of pop-up, Javascript SDK, iFrame Application

I am developing a facebook iFrame application which would be embedded inside a facebook page. I have chosen iFrame as FBML is deprecated by facebook.
My application is ready but I am facing a small problem
when FB.login is called, a popup window appears. My application requirement is that whenever its loaded, it should check whether user is authorized or not, if not then show a Dialog asking for extended permission/login
Problem:
The Pop-up is in form of a new window which Safari blocks by default because window is open through javascript and not via click, I want it to appear as a lightbox/shadow which facebook typically shows for fbml applications
I read at http://developers.facebook.com/blog/post/312 that
Blockquote
In order to make a more consistent and secure user experience when connecting accounts, we're changing the behavior of the dialog when a user connects accounts between your site and Facebook when the user is already logged in to Facebook. Previously, the Connect with Facebook dialog appeared in an IFrame "lightbox" within the browser window. After tomorrow's weekly code push, the dialog will pop up in a separate browser window, with an address bar, which matches the user login flow when the user is not logged in to Facebook and tries to connect accounts with your site. This will also make it easier for users to identify that the URL is trustworthy and coming from Facebook.
Blockquote
But this new feature is clearly not helping me out.
Any workaround for this?
My code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({ appId : '161077430577043', status : true, cookie : true, xfbml : true });
FB.getLoginStatus(function(response) {
// alert("response: " + response.session);
if (response.session) {
// alert("response of getlogin status, permissions: " + response.perms);
login();
}
else{
document.getElementById('loginStatus').innerHTML = "Login and Grant Permission";
logMeIn();
}
});
function logMeIn(){
FB.login(function(response) {
// alert("login!");
if (response.session) {
// alert("Granted permissions: " + response.perms);
login();
} else {
// alert("not logged in");
}
}, {perms:'read_stream,publish_stream,offline_access,friends_birthday,email'});
}
function login(){
FB.api('/me', function(response) {
document.getElementById('login').innerHTML="Welcome " + response.name;
});
getFriendsData();
}
function getFriendsData(){
// fetches data from Graph API
}
</script>

I figured out how to solve this.
Now I am using FBML prompt generated through PHP and signed_request for permissions.
I missed an important point that once you have permissions granted, they will be available irrespective of the sdk being used. i.e. get permission from fbml and use them with php

I think for security reasons they don't allow the login flow to go inside of an iframe. The only way around it is to redirect the user to the login page (replacing your current page). This can be done server-side or client-side.

If you fire the FB.login() call from a click event the new window shouldn't be blocked by the browser.
Something like:
<button onclick="logMeIn();">Log in with Facebook</button>
And script:
function logMeIn() {
FB.login(...);
}
From Facebook documentation (link):
As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers).