I have a website that is designed to be run at a kiosk at public events. I want users to be able to share a page from this site on Facebook without leaving their Facebook session logged in. This is not a Facebook Connect site (there's no login to synchronize w/FB), all I have is a link for sharing that goes to Facebook's sharer.php:
share this
It allows the user to log in and posts the link fine, but then closes the window and leaves the user logged in. There is no option for logging out, so the next user that comes along and wants to share has the previous user's FB account logged in!
Seems like this just changed when Facebook's UI changed recently; previously it would redirect to the user's profile page after posting, from which they could log out.
How can I fix this? Any recommendations on the "right way" to allow sharing with FB from a public kiosk?
EDIT:
I have entered an enhancement request on bugs.developers.facebook.com (http://bugs.developers.facebook.com/show_bug.cgi?id=9903) to have sharer.php auto-logout the user if a login was required. Please vote for it to get some attention from FB!
My current solution is to force a logout from facebook in the window.onbeforeunload event using a hidden iframe (code below). My site is currenly only intended for the public kiosk, so this is acceptable. For sites intended for public and private use at home, this is probably too brute force and will annoy users.
window.onbeforeunload = function() {
if (do_fb_logout) {
iframe = document.createElement("iframe");
iframe.setAttribute('width', '0px');
iframe.setAttribute('height', '0px');
iframe.setAttribute('frameborder', '0');
document.body.appendChild(iframe);
doc = iframe.contentDocument;
if (doc == undefined || doc == null)
doc = iframe.contentWindow.document;
doc.open();
doc.write("<html><head></head><body>");
doc.write("<form id=fbForm name=fbForm method=POST action=http://www.facebook.com/logout.php >");
doc.write("<input type=hidden name=confirm value=1 /></form>");
doc.write("<script type='text/javascript'>document.getElementById('fbForm').submit();</"+"script>");
doc.write("</body></html>");
doc.close();
}
}
I have tested this so far on Windows browsers FF 3.6, IE 7, and Chrome.
One idea that comes to mind is to give the link a target='_blank' and at the same time redirecting the "mother" page to the Facebook main page using JavaScript. That way, when the window closes, the user will at least have Facebook in front of them.
However, that page will show a "not logged in" status because it was called before the user logged in. Can't think of a way around that except for some ugly frameset frequently refreshing the facebook page - uggh.
Another way that comes to mind is opening the sharer link using a JavaScript mywindow = window.open("http://www.facebook.com/......") and then frequently polling whether mywindow still exists. If it does not (= the window was closed), redirect to the Facebook main page which will show the user's profile and a logout button. Still, also uggh because it's complicated and shaky. Hmmm.
Definitely report this as a bug to Facebook, you're probably not the only one experiencing it.
Related
I've put a Like Gate on a few of my Facebook Pages and I'm getting a lot of complaints saying that people can't access the content via their mobile device since the mobile version of the facebook website, and the facebook apps for ios/android, don't support tabs on Facebook.
I see there are services out there (I'm not sure how legit they are) that offer a way to create a mobile like gate for your page tab, but I can't find any documentation on how they do it. These services are not suitable for me, because the content on my tab is custom and dynamic.
So, how can I create a interstitial page for a mobile page that requires the visitor to have liked my Page on Facebook before they can proceed? This has to work for new users, as well as existing users who re-visit the tab and without requiring an install to an application.
Thanks!
One approach you can take for a mobile site is to check that the user has liked the page in question via the JS SDK.
If you have a logged-in user to your application, you can Subscribe to the authResponseChange FB event within your JS SDK initialization, or call a function directly to make an API request to verify if the user is a fan of your page.
In your initialization:
FB.init({appId: YOUR_FB_APP_ID_HERE });
window.fbAsyncInit = function() {
// React to a user clicking an on-page Like button:
FB.Event.subscribe("edge.create", verifyUserLikesPage);
}
You can verify that the user likes the appropriate page in the like handler:
function verifyUserLikesPage() {
FB.api("/me/likes/"+FBID_OF_PAGE_TO_ENSURE_THEY_LIKE, function(apiResponse){
if (apiResponse.data && apiResponse.data.length > 0)
// User likes the page. Enabled them to proceed
else
// User does not like the page. Require they click Like.
}
}
More information on the edge.create subscribe via JS available here: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I'm trying to build a google chrome extension, a use case requires that users can login with Facebook and share via a post to their Facebook wall.
The correct application flow would be as such:
User click google chrome extension - summons extension page
User clicks "login with facebook" on the extension page (or in a new tab) the users then see the "approve app" from Facebook
The user approves the app
The user is directed to a new page that thanks them for installing and processes all the needed user information OR the user is sent back to the google chrome extension (better way)
If the user is not sent back to the google chrome extension, they should be told to do so, but at this point how to get the data to the google chrome extension?
The user opens to the Google chrome extension, they should now see "Hi John" or similar instead of "Login with Facebook"
The user can no post to Facebook
My major hick-ups are logging in with Facebook, and getting the data back to the extension.
I've created a Facebook app, done most of the coding specific to the app, I'm trying to keep the app just javascript (but I can add in php if there is no other way), tried using the standard Facebook javascript, and tried using the desktop client for Facebook.
Anyone else gone through this process of connecting Google Chrome Extensions and Facebook login before?
As a final note, I'm trying to with with Parse for this project, so if you have any extra insite on that it would be great too!
A good example of what I'm trying to accomplish is similar to what Any.do
https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-icon
I had this kind of problem lately ;). It's a bit complicated, but I'll try to explain it in the simplest way.
Put somewhere in your extension (maybe options page) link "login with facebook" that redirects to: https://www.facebook.com/dialog/oauth?client_id=<APP_ID>&response_type=token&scope=<PERMISSIONS>&redirect_uri=http://www.facebook.com/connect/login_success.html
When someone clicks on this link, will be asked to give permissions, etc (facebook page). If someone would agree, the page will load: http://www.facebook.com/connect/login_success.html with parameters access_token and expires_in in address.
Now, background page should have script like this:
var successURL = 'www.facebook.com/connect/login_success.html';
function onFacebookLogin(){
if (!localStorage.getItem('accessToken')) {
chrome.tabs.query({}, function(tabs) { // get all tabs from every window
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].url.indexOf(successURL) !== -1) {
// below you get string like this: access_token=...&expires_in=...
var params = tabs[i].url.split('#')[1];
// in my extension I have used mootools method: parseQueryString. The following code is just an example ;)
var accessToken = params.split('&')[0];
accessToken = accessToken.split('=')[1];
localStorage.setItem('accessToken', accessToken);
chrome.tabs.remove(tabs[i].id);
}
}
});
}
}
chrome.tabs.onUpdated.addListener(onFacebookLogin);
And this is how you get access token from facebook. Now you can send requests to https://graph.facebook.com.
Hope I helped ;)
To answer your question (Don't have enough credit to comment).
In your Facebook developer settings, click the advanced tab at the top, make sure "Client OAuth login" & "Embedded browser OAuth login" are both moved to "Yes" and then I had to add "http://www.facebook.com/" to the Valid OAuth redirect URI's
now facebook has changed "Client Oauth Login" button location. You need to add a product and after adding facebook login you will found here
I tried googling & checking stackoverflow for the possible solution but haven't found any yet, so would like to bring it up here again.
I have a Facebook page, page has multiple tabs, and one of the tab has a Facebook App (accessed only through the tab, redirect the http://apps.facebook.com/myapp to the page tab)
I have some content (say non-fan content) to be displayed to the user before he likes the page.but, I don't have any way to check if the user has liked the page unless he adds the app & fb documentation has stuff that can give me the required like FQL page_fan, url_like, api(/me/likes/FACEBOOK_PAGE_ID) but each one of this needs an accesstoken (which I cannot get before the user adds the app).
some of the posts on stackover flow says that is not possible without getting the user to add the app. but there are apps like static html, static iframe & others which provides this functionality, how ?
Please advise.
Facebook will POST a signed_request to your server when the user opens the page tab.
This is what you get when you parse the signed_request:
{
"algorithm":"HMAC-SHA256",
"issued_at":1309468031,
"page":{
"id":"xxxxxxxxxxxxxxx",
"liked":true,"admin":true
},
"user":{"country":"fr","locale":"en_US","age":{"min":21}
}
The important part is "page.liked" where you see if the user likes the page.
No permissions and no app authorization is needed for this to work.
Search the web about parsing the signed_request in your favorite web programming language i.e. php.
I am hosting a Facebook app on Google app engine, I need to make sure the user is logged into facebook before anything.
What I can currently do is display facebook's log in button using fbxml, but I prefer the user would be redirected to Facebook's log in page if he wasn't logged in, then back to my app's main page, this way I can make sure that the user is logged in before doing anything.
I am new to Facebook apps, I read here that I can redirect the user to
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL
in order to authenticate him. But using GAE's self.redirect(url) doesn't work, the page stays the same. I was hoping I could do something like this in my handler:
if u'signed_request' in self.request.POST:
facebook.load_signed_request(self.request.get('signed_request'))
if not facebook.user_id:
self.redirect("https://www.facebook.com/dialog/oauth?"+
"client_id={0}&redirect_uri={1}"
.format(FACEBOOK_APP_ID, EXTERNAL_HREF))
return
but as i said earlier this doesn't work.
I'm assuming by 'Facebook App' you mean a Canvas App - so something that will live at https://apps.facebook.com/YOUR_NAMESPACE from a user perspective?
If so, you'll need to add the redirect via Javascript using window.top, as your app is loaded in an iframe. See https://developers.facebook.com/docs/appsonfacebook/tutorial/ and search for 'top', then view the example toward the end of the page.
There are also good examples on the Php Sdk that facebook provides. I like the with_js_sdk.php example. It runs seamlessly and is good to follow.
https://github.com/facebook/php-sdk
http://developers.facebook.com/docs/reference/php/
I am in the conversion process of facebook app from fbml to iframe.
Now i am testing using few iframe pages.
$user = $facebook->require_login();
It gives the current user logged in. Once it get the variable from the facebook.com it saves in cookie by the PHP API provided by facebook).
I logged out using another tab of facebook and i tryed using my app without refreshing the whole site (by just using the links inside my app). It still gives the $user variable.
It indicates that user has logged in instead of user logged out.
Please help me out. I want my app secured.
It looks my iframe app accessible when we select "open this frame in new window".
I need a solution for this too.
Thanks in advance.
You are logged in as far as you are logged in facebook. You will have to create custom PHP's session handling. However, if you want to remove the user from application's cookies, you can do this:
//this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect($appcallbackurl);
You can use the JavaScript SDK to subscribe to the logout event via FB.Event.subscribe and reload the page if that happens:
FB.Event.subscribe('auth.logout', function(response) {
setTimeout('window.location.reload()', 0);
});
(Wrapping in setTimeout() is required as a work-around for Firefox.)
To prevent users from using "open this frame in new window," you can check if the page is loaded in an iframe with if(window == window.top) or if the signed_request is available. If not, redirect to the tab URL.