I'm working on an iframe-based canvas application and have run into a major roadblock in finding a good way to keep track of the Facebook session when navigating between pages within the iframe. On the first page load, the Facebook page passes all the necessary fb_sig parameters to your callback URL via the query string. On subsequent page loads (after clicking a link in your app, for example), it seems you must do one of the following to retain the Facebook session details:
Use target="_top" on links and reload the entire Facebook page with each request. That way a fresh set of fb_sig parameters are passed in when the iframe is loaded. But this incurs the cost of loading everything outside the iframe every single time you change pages.
Manually append all the fb_sig parameters you received from the first page to the URL of all additional pages. This is pretty ugly, and will leave you with outdated information that may no longer be accurate. You continue to use the first values you received from Facebook, but those values may have changed since then (such as the user logging out or the session key expiring) and you'd have no way of knowing.
Store the information in a cookie and somehow check for new values on each page load, refreshing it if necessary. I've seen this technique mentioned in several places, but after days of looking, I have not found a single example of how to actually do this. Perhaps the PHP client library does it for you automatically, but my application uses Perl and the WWW::Facebook::API module, and I haven't found anything in it that addresses this. I've also read that this technique runs into issues with certain browsers (Safari in particular) that don't allow you to set cookies within an iframe unless its domain matches the parent frame's domain. All of this seems extraordinarily complicated and poorly documented for what is such an elementary and necessary ability for an application (navigating to another page.)
Since I've been unable to find any really useful examples of how to achieve #3, I'm currently leaning toward #1, as unfortunate a compromise as it may be. Has anyone seen a good, complete explanation and example of how to use #3 that works in all major browsers? Figured I'd ask before I give up and go with #1.
Jimmy Cuadra, I had the same problem.
Try to put the absolute path to the facebook application (href="http://apps.facebook.YOURAPP/where_you_want_to_go.php"). And then go for #1 option (target="_top")
Hope it sove your problem.
Related
I am in the process of building a touch screen photobooth where users will take pictures, add graphics, etc in Adobe AIR. At the end of the process, they will get to email themselves the picture, share the picture on Facebook, and share it on Twitter.
I am using this tutorial: http://tv.adobe.com/watch/adc-presents/oauth-in-adobe-air-applications-built-with-flash-or-flex/ to figure out how to get oAuth to work in AIR. But it seems simple. Just load the authorization request URL into AIR's equivalent of an iFrame.
The tricky part is that there will be no physical keyboard on site. For all text input, we designed an onscreen keyboard. Programming an on screen keyboard in AS3 is pretty easy. But we don't have access to the text fields within the AIR HTML/Browser wrapper so we can't manually add characters to the input strings...
Is there any workaround we can implement for this? Adding a physical keyboard is unfortunately out of the question.
I realize this is 5 months old, but I was working on something similar for a client this evening and ran across your question. I also wanted to omit the need for a system level onscreen keyboard, or a physical real world keyboard, just wanted to use a Flash/AIR based keyboard completely under control of the app via the attached touch screen.
I came up with a hacky way to do this all in Flash/AIR and it works for any oAuth dialog (with some caveats). I've got it working as a test for Facebook and Twitter oAuth permission pages just this evening. It requires that you use a StageWebView for the display of the oAuth dialog and some JavaScript injection via loadUrl method of StageWebView. Using the stageWebView, setting up a listener for the Complete event on the load of the oauth permission page in your StageWebView is the first step.
Next step, is once its loaded and the complete event fires, in your complete handler, you can then inject javascript directly into the page via the StageWebView reference, and then via that function set up communication to populate the fields dynamically from your AS3 on screen keyboard or other function. For example, to populate the username field in Twitters oAuth permission page, you could do this:
webView.loadURL("javascript: form = document.forms[0]; form['username_or_email'].value='your_username';");
That populates the username field in Twitters oAuth permission page.
So you could inject a function into the page, which you could then call from ActionScript to pass in key presses from your virtual onscreen keyboard, or completed strings, to populate the proper fields. That is the only tricky part, identifying the form and field names in the source of the oAuth pages ahead of time. So far Twitter and Facebook look pretty straightforward to identify, but of course could break at anytime, a little regexp could help make sure they are correct. Only problem I see here beyond that would be if the field names changes dynamically for security purposes, but from a quick glance at twitter and facebook at least they don't appear to do that. Other oAuth pages may or may not, YMMV.
There is a useful library for working with StageWebView that might be helpful in doing some of this communication - take a look here: http://code.google.com/p/stagewebviewbridge/wiki/Communication
In any case, that is the overall approach, leverage StageWebView, and then dynamically inject your own JavaScript function to handle passing in the value to the fields from your onscreen keyboard, or simply populate the fields directly with code similar to the above. Hope this helps anyone out there attempting something similar.
Wanted to add that I came up with this approach because it was/is a requirement to allow a user to do this directly on the exhibit I am working on, but my personal preference would be to simply collect a users email address, or phone number, and have the interactive send them an email or SMS message to their own device, which they could then easily share more safely and securely. Another solution would be to display a QR code, a user could snap and quickly resolve to share more securely - I prefer those approaches, but the above will do the trick for users willing to enter in their credentials in a public place. Make sure you have time outs on the session and properly logout users credentials for subsequent users, otherwise bad things are guaranteed to occur.
This isn't really a technical question, but I essentially have two sites, a mobile and a regular one. I am currently able to detect the device the user is on and redirect them to the mobile site, which is a sub-directory of my regular site. The thing is I need an option for the user to be able to view the regular site if they want to. My problem is that if I provide them a link to the regular site, they will automatically be redirected back to the mobile site. The differences between the two sites is much more then just a style sheet which can be swapped out at will. The solution I though of was to create a cookie variable (session if they are disabled) with a value after they choose if they want the mobile or regular site (1/0 I guess). Based on that variable enable or disable the code that does the redirect. Is this the correct way to do this? Or is there a more elegant way to do this?
I successfully implemented this method and works smoothly enough for my tastes. In the if on the regular site, just be sure to check for both the GET variable which would have the value of either 1 or 0 AND the cookie or session variable you set. This way after they take the initial link from the mobile site and you set the session or cookie variable, you don't have to carry the GET variable over with every subsequent link.
I have a web site that gets quite a bit of traffic from Facebook. I've never had any problems sharing links to it on my Facebook page, but starting this afternoon, whenever I post a link to my web site from my facebook page, the post disappears from all users' feeds after 2-3 hours. This has happened 3 times now and I can't understand why. At first I thought it was my page itself, but it seems to be my domain because when I share from a different page (the same domain), it also disappears.
It worked fine this morning but not now. What is going on? Is this a glitch or is it some kind of system FB has in place now? This is really hurting traffic and clicks out from FB to my site.
Thank you.
Edit: looking back, it seems this may have started happening around Tuesday. Is there some kind of system in place now to limit the amount of clicks out you can get from a post? I can't see any other reason it's happening...
There are several possible causes:
Links that you use is a dynamic link which at times can be changed, use the static link. Example your link like this: http://www.domain.com/page.php?var=xxxxxxxx, where the parameter xxxxxxxx values on the links can change at any time may be due to activity updates. This will cause facebook can not find a link that has been logged.
Bandwidth & server connection you less stable.
If I may suggest, avoid links / URLs dynamically & use the SEO Friendly link/URL like this page URL http://stackoverflow.com/questions/8529022/why-are-my-links-to-my-site-disappearing-from-feeds-after-2-3-hours
I'm not sure why but creating any kind of integration beyond the use of social widgets and buttons on external sites always confuses me.
What I need to do is create a tab on a particular Fan Page. This tab needs to:
Contain an interface for casting a vote in a Poll.
Handle multiple Polls. Only one will be featured in the tab at a time, but there should be an interface for navigating to previous polls.
All polling data needs to be stored on my servers - 3rd party Polling solutions (facebook apps, or embedable services) are not an option unless the data storage location is configurable.
All those requirements are pretty easy to address. Im just confused about how to integrate with FB.
Do i need full FB App for this, or is there another way? This will only be accessible via the Fan Page tab, so I don't necessarily need an App at apps.facebook.com.
If it is an app... is there a way to hide the app page, and the standalone app canvas from everyone except Fan Page admins?
FBML will be discountinue very soon. You might need to find an alternative way to do it. :-)
Check out the Static FBML app that Facebook provides. You can implement it on any Facebook fan page, change the tab title, and specify the content in HTML/FBML (with some limitations, I believe IFRAMES, password inputs, and some other random things are not allowed, but don't take my word on these until you test them). Hopefully this at least gives you a little head start.
Even Tradablebits platform is an option. They give a good functionality and make it simpler to work with Facebook. http://apps.tradablebits.com/ I analyzed this platform for one of my apps.
I'm developing a Facebook application for a business page. The application can only be accessed as a tab, meaning there is no box or direct access intended.
I've done my share of searching and even though I hate asking for help when I know the information I'm after must be there somewhere, I've reached
the point of exhaustion and beg for a solution.
I've managed to work with my application the way it was intended, it retrieves some data from my databases and users can view that information without
a problem. The issue here is that I'm unable to figure out a way of getting information from the user who is viewing that tab. I don't want any private stuff,
in fact, the only thing I need is to know in which language he/she is viewing FB so I can grab content in that language instead of the default.
I thought that maybe FB stored that information on a cookie, or a session variable, who knows. I'm sure I seen something like en_GB on a cookie from
FB once, but maybe it was a mere delusion from sleep deprivation.
I'm sure there is a pretty solution developed already and I just can't wait to learn about it!
Thank you for you time :)
To translate the application, you should be using facebook translations.
All the text in your app should be inside and other intl tags and the translation for these should be available on facebook translations app. Then facebook shows the translated text to the user based on their locale.
Facebook Translations app: http://www.facebook.com/translations/
You can see the strings to be translated here.
You also have to enable you applications for translations in the Translation app admin panel.
More about translations here : http://wiki.developers.facebook.com/index.php/Internationalization
Here's a method that describes getting the current user's language in a canvas frame even when the user hasn't logged in: http://fbdevwiki.com/wiki/Locales#Getting_the_User.27s_Locale . I suspect that it should also work in a page tab iframe.