i used to use <fb:serverfbml> and to parse it FB.XFBML.parse().
when i switched to FB.ui, it is very effecient. but as far as i understand, for "apprequests" method, i have to display mode available: pop up or dialog(iframe)
pop up opens in a new browser window. diolog opens iframe window in the same window
so i need to know, if it is possible to render FB.ui result as a part of html, as i can do in <fb:serverfbml>
moguzalp
note: i do a work around doing an rendering FB.ui result in iframe that a create. but it seems not a good idea
Don't use fb:serverFbml, Facebook has made it very clear they are phasing this technology out and are encouraging developers to re-write their applications as iframes. Facebook will continue to improve the FB.ui({method:'apprequests',...}) code.
One issue developers have raised about FB's on page solution for other FB.ui dialogs is the placement on the page. For pages that are more than a screenful, the dialog often appears in an illogical location. The Popup, if used correctly as part of a click event, will display for the majority of users.
I've also created a post illustrating the use of the new apprequests method
http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/
Related
Im trying to put the facebook permissions dialog within an iframe, however not making much progress because of lack of Facebook documentation, and the undocumented hacks around web are not working any more.
news.yahoo.com does something that i would like to emulate.
When you click on a news article it says login with facebook. After the initial oauth dialog to authenticate the user ( which does not ask for permissions), yahoo pop's another dialog from a yahoo URL which included the Permissions dialog within as an IFrame.
Does anybody know what API's can be used to accomplish this?
The fiddler trace indicates that the yahoo URL is calling:
the uiserver.php endpoint with the permissions.request method.
https://www.facebook.com/connect/uiserver.php?method=permissions.request&app_id=194699337231859&display=iframe&redirect_uri=https%3A%2F%2Fopen.login.yahoo.com%2Fopenid%2Fyrp%2Fsc_check&cancel_url=https%3A%2F%2Fopen.login.yahoo.com%2Fopenid%2Fyrp%2Fsc_check&perms=user_birthday%2Cuser_likes%2Cemail%2Cpublish_actions&response_type=code&locale=en_US
When i try to do this using FB's javascript SDK:
FB.ui({
method: 'permissions_request',
perms: 'read_stream,publish_stream,user_photos',
display: 'iframe'
},
function(response){
alert("badfood");
alert(response);
});
It goes to a different endpoint: facebook.com/dialog/permissions_request? ...
And I get a 500 server error from facebook without useful debug info.
Thanks
some things.
1) first add the parameter show_error=true. This will tell you more about what's really causing the error.
2) Facebook has multiple ways it can display any dialog. In the fiddler request, note the display=iframe parameter. This is used for canvas applications mainly but can be useful for regular iFrame displays as well. It opens the auth dialog in a lightbox.
3) Try loading the SDK synchronously. Remove the Async references that Facebook tells you to include at the top of the page after the body tag and use the secondary method. Include the all.js and fb-root div tag and load FB.init just before your FB.ui call.
4) Check out the echo tool.
This tool can print out your GET params or your . It can also decode
the signed_request parameter as used in Canvas applications with the
OAuth 2.0 Beta migration enabled. This is very useful in debugging
Canvas Authentication.
http://developers.facebook.com/docs/reference/dialogs/
Loading the auth/permissions dialogs inside iframes are not permitted nor possible due to the risk of clickjacking. Sites where you see this being done have special agreements with Facebook that allows them to do this.
I keep seeing the facebook logo with a link that reads "Go to Facebook.com" in my canvas app while screens are loading. Eventually the app loads fine, but what is this and how can I avoid it?
It's there because you are doing a "frame level" redirect when you are jumping to Facebook for authentication (i.e. you are using something like header('Location:xyz') in PHP or location.href=xyz in javascript). You need to do a page-level redirect, which is why the doc sample code uses top.location=xyz javascript calls. Because you are not breaking out of the iframe, Facebook is putting up the intermediate link screen to do it for you.
self.location.href inside iframe instead of header()
Is it possible to show users custom message with a single OK button in a Facebook-style dialog box, say, in an iframe app? Is this dialog box available in the Facebook (Javascript) API?
Example:
I don't believe that Facebook allows you to display dialogs outside the ones listed in the FB:Dialog documentation on their webpage.
However, this should be possible to implement yourself. Download a copy of the Facebook.js SDK, and look for the code where it draws the dialog. You could then use this wherever you want to draw as many Facebook-esque dialogs as you like!
Edit: This thread from the Facebook developers forum has some good stuff on already-developed FB.ui lightbox clones: reuse facebook lightbox JS
I am currently developing UI for a facebook app. Basically, the game is shown on the canvas page and it has navigation in a tab form.
What I need is that when a user clicks "friends" to invite people, the page will show over the game(the game is still in background, and running as it should be). So the page must not reload. To do this I placed the url of the friends requests in the src of an <iframe> and using jquery to hide/show the divs but the problem is the <iframe> will also contain the header, footer and all like facebook.com, but I just want the content because the user is already on facebook. Is there a better approach than what I'm doing? How would I accomplish this?
A good visual example is the navigation of "City of Wonders" facebook app.
You'll need to write a server side script that uses the facebook API to get a list of friends. Then you simply generate the HTML that is necessary to display and use this information.
Also, instead of using a an <iframe></iframe>you could just use a <div>, and use javascript to populate it's innerhtml (via ajax).
I want to get iframe application but on top of it, would love to put tabs. and iframe are not really seem compatible. Do you guys know any work around this?
Thanks,
Ebe
You can't use an iframe in a Facebook Tab application due to restrictions from Facebook, though in this blog post from mid-August they say they will begin supporting IFrames for Page tabs "in the next few months".
There are other restrictions for applications which live within a Tab too, eg you have to use FBJS methods instead of regular javascript. It's a pain in the neck.
In this presentation, from January, Facebook suggest that if you really need iframe functionality in a Tab you can work around it by not putting your application in the Tab... make a Tab containing just a link to a Canvas Page, where your application can use iframes.
Alternatively if you are talking about a 'tab-style' UI for your application then it is possible with using iframes. Just use javascript to show and hide different content divs.
Here is an example of an app with a tab-style UI (and it's a Tab app, so it can't use iframes):
http://www.facebook.com/VansEurope?v=app_122643704452302