Тэг FBML fb:editor в приложениях Facebook

Posted by Dmytro Shteflyuk on under Facebook · English (16,836 views)

Не так давно я начал писать о платформе Facebook (см. мои заметки о setFBML и библиотеках Facebook для .NET). Сегодняшняя тема — это fb:editor. Как вы могли заметить, Facebook имеет приятный интерфейс (look and feel), и приложения, разработанные для него, должны его придерживаться. Тэг FBML fb:editor позволяет создавать формы, которые выглядят точно так же, как родные формы самого Facebook, но у него есть одно существенное ограничение: он генерирует свой собственный тэг form, а потому не может быть использован внутри серверной формы ASP.NET. В этой короткой заметке я покажу HTML, генерируемый тэгом fb:editor, и продемонстрирую, как использовать его в приложении ASP.NET.

Вот пример из документации fb:editor:

fb:editor

Для начала нам нужно включить тэг fb:editor на страницу, чтобы гарантировать загрузку файлов CSS:

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

Теперь нужно определить базовую структуру формы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

Кстати, в этом примере есть некоторые улучшения оригинальной разметки: мы указали атрибут for для тэга label (теперь, если вы кликните на описание, фокус перейдет на соответствующее поле), и добавили возможность помечать обязательные поля с помощью текста required (что невозможно в случае fb:editor).

14 Responses to this entry

Subscribe to comments with RSS

Facebook » fb:editor FBML tag in Facebook applications
said on Январь 16, 2008 at 22:03 · Permalink

[...] 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 [...]

said on Январь 16, 2008 at 22:36 · Permalink

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

ЗЫ

1
Fatal error: Call to undefined function curl_init() in /var/www/kpumuk/kpumuk.info/wp-content/plugins/openid/openid-classes.php on line 229
said on Январь 17, 2008 at 10:02 · Permalink

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

Kigorw @
said on Январь 21, 2008 at 12:46 · Permalink

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

said on Январь 25, 2008 at 05:12 · Permalink

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

Saito @
said on Март 7, 2008 at 00:17 · Permalink

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′ />

said on Март 31, 2008 at 23:42 · Permalink

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

said on Апрель 1, 2008 at 00:58 · Permalink

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

Anonymous
said on Апрель 7, 2008 at 15:45 · Permalink

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

said on Апрель 25, 2008 at 12:25 · Permalink

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

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

hash
said on Июнь 29, 2008 at 13:13 · Permalink

Aшветия

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

T-Rex @
said on Август 23, 2008 at 21:59 · Permalink

Долго… Говорю, что-то не пишешь долго, я так в ремя от времени захожу поглазеть чего тут у тебя, а новых постов нету.. Мож случилось чего..? Ыть?
Чегой-то не наблюдил тут прямых контактов на сайте, решил написать каментом.
И чур я не бот :)
ЗЫ: и на RC тоже что-то не видно.. куда пропал?

Kigorw @
said on Сентябрь 1, 2008 at 22:26 · Permalink

Поддерживаю Рекса, ты где пропал?

Adelf
said on Сентябрь 30, 2008 at 11:46 · Permalink

+1 к предыдущим двум товарищам. Хде автор? :)

Comments are closed

Comments for this entry are closed for a while. If you have anything to say – use a contact form. Thank you for your patience.