fb:editor FBML tag in Facebook applications

Jan 16
2008 20:59 (Facebook) · Русский (2,609 views)

Some time ago I have started posting about Facebook Application Platform (see my posts about setFBML and Facebook libraries for .NET). Today’s topic is fb:editor. As you may see, Facebook has nice look and feel, and all applications usually adapted in some way to its interface. fb:editor FBML tag allows you to create forms which looks just like native ones, but it has great limitation: it generates it’s own form tag, so can’t be used within ASP.NET server form. In this short post I’ll show HTML generated by fb:editor and a way how to use it in your ASP.NET application.

Here is example from fb:editor documentation:

fb:editor

First we need to include fb:editor tag to the page to force loading of CSS files:

<div style="display:none"><fb:editor /></div>

Now we should define basic structure of the form:

<table class="editorkit" border="0" cellspacing="0" style="width:400px">
    <tr class="width_setter">
        <th style="width:50px"></th>
        <td></td>
    </tr>
    <tr>
        <th class="detached_label">
            <label for="login">Login:<br><small>(required)</small></label>
        </th>
        <td class="editorkit_row">
            <input name="login" id="login" />
        </td>
        <td class="right_padding"></td>
    </tr>
    <tr>
        <th></th>
        <td class="editorkit_buttonset">
            <input type="submit" class="editorkit_button action" value="Submit" />
        </td>
        <td class="right_padding"></td>
    </tr>
</table>

BTW, we have several enhancements in the original layout: we have specified for attribute for the label tag (now if you would click to the label, corresponding input would be selected), and added ability to mark required fields with required text (it’s impossible with fb:editor).

Tagged , , ,

10 Responses to 'fb:editor FBML tag in Facebook applications'

Subscribe to comments with RSS or TrackBack to 'fb:editor FBML tag in Facebook applications'.

1
said on 2008-01-16 at 10.03 pm

[...] Dmytro Shteflyuk’s Home wrote an interesting post today on fb:editor FBML tag in Facebook applicationsHere’s a quick excerpt Some time ago I have started posting about Facebook Application Platform (see my posts about setFBML and Facebook libraries for .NET). Today’s topic is fb:editor. As you may see, Facebook has nice look and feel, and all applications usually adapted in some way to its interface. fb:editor FBML tag allows you to create forms which looks just like native ones, but it has great limitation: it generates it’s own form tag, so can’t be used within ASP.NET server form. In this short post I’ll show HTML [...]

2
said on 2008-01-16 at 10.36 pm

Здорово!
на дворе 21 век, а в мы все еще используем таблицы для разметки!

ЗЫ

Fatal error: Call to undefined function curl_init() in /var/www/kpumuk/kpumuk.info/wp-content/plugins/openid/openid-classes.php on line 229
3
said on 2008-01-17 at 10.02 am

Ага, меня это тоже поразило. Но фейсбуковцев это, видимо, не сильно напрягает.

4
said on 2008-01-21 at 12.46 pm

почему их это должно напрягать?

5
said on 2008-01-25 at 5.12 am

Kigorw
ну видимо потому, что есть способы куда эффективнее :)

6
Saito
said on 2008-03-07 at 12.17 am

Button and Profile Box Question! Please help!!!

How do I create a button on my canvas page that when clicked shows/sends the ‘ imgsrc=’http://img.youtube.com/2.jpg’ width=’340′ height=’270′ />

7
said on 2008-03-31 at 11.42 pm

Дарофте,,
help!!
вопрос токого плана:
мне нуна чтобы моя апликация отображалось с лева в списке Applications.
каким пораметром управляется изменение в списке(с лево)?,
зарание благодарен…

8
said on 2008-04-01 at 12.58 am

уточнение,
при добовление моей апликации другим пользователем,
название(и ссылка) должна появится в левой понельке пользователя,,
help plizz,

9
Anonymous
said on 2008-04-07 at 3.45 pm

Так невозможно сделать

10
said on 2008-04-25 at 12.25 pm

Все получилось, правда пришлось попотеть, Спасибо большое.

to Anonymous, не говорите если не знаете, вы наверное даже не пробовали, у меня все получилось!

Post a comment

You can use simple HTML-formatting tags (like <a>, <ul> and others). To format your code sample use <code lang="php">$a = "hello";</code> (allowed languages are ruby, php, yaml, html, csharp, javascript). Also you could use <code>$a = "hello";</code> and its syntax would not be highlighted. If you are not using <code> tag, replace < sign with &lt;.

Submit Comment

 
Copyright © 2005 - 2008, Dmytro Shteflyuk