Facebook Cookbook - Jay Goldman [96]
Voting on translations is actually a lot of fun, and primarily involves voting potential translations up or down, as in Figure 6-65.
Figure 6-65. Voting on translations
The “Discuss this Phrase” link takes you to a discussion board if you’re unclear on a translation or want to debate the finer points of a phrase.
Each of your apps has an Application Admin Panel inside of the Translations app, which you can get to by selecting Translations from the app’s menu in the Developer app (Figure 6-66).
Figure 6-66. Translations in the Developer app’s More menu
A newly translatable app will have no phrases complete and will look something like Figure 6-67.
Clicking on a checkbox next to a language enables that language for translation and changes the Publish column from a disabled Not Open to an enabled Publish. Clicking on a language in the Language column shows you the voting and translation interfaces for that language, and clicking on the Manage link in the Language Managers column lets you appoint users to be managers for that language.
Figure 6-67. Translations application Admin Panel with French enabled
Finally, Facebook has published a series of Internationalization Best Practices, which I highly recommend you read as they represent the learnings of a team that has gone through a massive translation effort and lived to tell the tale. Find it at http://wiki.developers.facebook.com/index.php/Platform_Internationalization_Best_Practices.
Valid HTML Tags
Problem
FBML sounds great, but sometimes I just want to use good ole HTML. What can I get past the parser?
Solution
There’s actually quite a lot of standard HTML you can use inside an FBML page. Keep an eye on the Wiki for an up-to-date list (http://wiki.developers.facebook.com/index.php/FBML), but this should give you a good idea:
a code h2 legend script textarea
abbr dd h3 li select tfoot
acronym del h4 link small th
address dfn h5 meta span thead
b div h6 old strike tr
bdo dl hr optgroup strong tt
big dt i option style u
blockquote em img p sub ul
br fieldset input pre sup var
caption font ins q table
center form kbd s tbody
cite h1 label samp td
Discussion
You’ll note that head and body aren’t included as valid tags, because you shouldn’t include them in Canvas pages. This may go against everything you know when it comes to building valid HTML pages, but you’ll actually get an error if you include them.
Facebook and CSS: FBSS?
Problem
I think I’m getting a handle on this FBML thing, but what about CSS? Is there an FBSS?
Solution
Actually, no. You’re pretty much free to do whatever you’d like from a CSS perspective, and you can definitely follow best practices, such as linking to external CSS files rather than putting everything inline.
Discussion
You’ll likely run into some things that don’t work quite the way you expect them to, but for the most part, CSS on Facebook is the same as CSS off Facebook. A few things to look out for:
CSS files, like images, are cached by Facebook’s server, so you need to change the name every time you change the contents of the file; otherwise, the Facebook server will continue to serve up the old version. See Beating the CSS, JavaScript, and Image Cache for two ways around this.
Absolute positioning is one of the few things that is a little wonky. In the early days of Platform, it was possible to absolutely position elements from inside your app outside of the Canvas page frame, making them look like they were part of the Facebook interface. Since this posed obvious security issues, the div that contains your application’s content (which will have an id like app_content_12345) has the canvas_rel_positioning class applied, which sets it to position: relative. Since absolutely positioned elements inside of a relatively positioned element are positioned within their parents, that resets your top, left, bottom, and right values to being context-sensitive to your Canvas area. The class also sets overflow: hidden, which will hide any content you try to position