В моем текущем проекте мы решили разработать приложение Facebook. Это действительно мощная платформа с кучей интересных идей, что обычно означает необходимость потратить кучу времени на то, чтобы заставить приложение работать как задумано. Сегодня я хочу поговорить о профилях пользователей. Любое приложение Facebook может добавить несколько ссылок, которые будут отображаться под картинкой пользователя, и контент для отображения в широкой или узкой колонке. Естественно, вы можете использовать синтаксис FBML, особенно множество тегов fb:if-… для выбора, какой контент показывать на определенных профилях конкретным пользователям.
Для начала, я опишу несколько ключевых моментов, относящихся к профлям пользователей. Если вы хотите добавить какой-то контент в профиль определенного пользователя, вы должны вызвать метод profile.setFBML. Для пользователей, для которых вы не делали вызов profile.setFBML, контент будет вычитываться из секции “Default FBML” в настройках вашего приложения. В основном, это будет применяться для любого пользователя, который не добавил ваше приложение. Что же такое “Default FBML”? Если вы добавили приложение, вы увидите “Default FBML” на всех профилях пользователей, для которых не был вызван profile.setFBML, и не имеет значения, добавили они приложение или нет (неплохое место для размещения ссылки “Пригласить”). Такой же результат вы получите, если вызовете profile.setFBML для всех пользователей (и если вы достаточно безумны для этого).
Обратите внимание, что “Default FBML” кэшируется на неопределенное время, потому придется подождать, чтобы увидеть ваш контент на профилях. Еще одна вещь — вы можете добавлять только ссылки на профили пользователей, которые не добавили ваше приложение, и только пользователи вашего приложения их увидят. Это основная часть документации, и вы должны польностью понимать ее. Более детальное описание можно найти на страницах документации для тега fb:profile-action и функции profile.setFBML.
FBML-контент для профилей пользователей
Всего существует 4 FBML тега, специфичных для профилей пользователей:
- fb:profile-action используется для добавления ссылок под картинкой пользователя (аватаром).
- fb:subtitle будет отображаться прямо под заголовком области вашего приложения.
- fb:wide определяет контент, который будет отображаться, если ваше приложение расположено в широкой колонке.
- fb:narrow определяет контент, который будет отображаться, если ваше приложение расположено в узкой колонке.
Просто, не правда ли? Давайте рассмотрим эти теги более подробно.
Как я сказал раньше, fb:profile-action используется для добавления ссылок в профиль пользователя. Обычно вы будете добавлять одну ссылку:
Perform Action
</fb:profile-action>
Как насчет следующего сценария: Я хочу видеть ссылку “View my products” (”Просмотреть мои товары”), когда просматриваю свой профиль, “View Taisia’s products” (”Просмотреть товары Таисии”), если просматриваю профиль моей жены Taisia (и если она также добавила приложение), и “Invite Roman to MyApp” (”Пригласить Романа в MyApp”), когда просматриваю профиль моего друга Романа, и если он еще не добавил приложение. Вот код:
<fb:profile-action url="http://apps.facebook.com/myapp/Products.aspx">View my products</fb:profile-action>
<fb:else>
<fb:if-is-app-user uid="profileowner">
<fb:profile-action url="http://apps.facebook.com/myapp/Products.aspx">
View <fb:name uid="profileowner" firstnameonly="true" possessive="true" /> products
</fb:profile-action>
<fb:else>
<fb:profile-action url="http://apps.facebook.com/myapp/Invite.aspx">
Invite <fb:name uid="profileowner" firstnameonly="true" /> to MyApp
</fb:profile-action>
</fb:else>
</fb:if-is-app-user>
</fb:else>
</fb:if-is-own-profile>
Обратите внимание: этот пример очень похож на пример со страницы документации для fb:profile-action, за одним большим исключением — он рабочий: fb:if-is-app-user uid="profileowner" (в примере из документации uid принимает значение по умолчанию “loggedinuser”, а нам нужен uid владельца профиля).
Этот код отработает полностью если вы поместите его в раздел “Default FBML” настроек приложения, или если вызовете profile.setFBML для пользователя, который не добавил ваше приложения (но это сумасшествие, о чем я говорил ранее): я указал ссылку “Invite someone to MyApp” в разделе, который будет отображаться только в профиле пользователя, который не добавил приложение.
Кстати, не забудьте удалить все переводы строк перед обновлением “Default FBML”, потому что Facebook заменяет их на <br/>.
Другая интересная штука из рабочего примера: Facebook добавляет параметр id для всех ссылок profile-action, и он равен ID владельца профиля. В моем предыдущем примере, если я перейду на профиль Романа, я увижу ссылку с URL http://apps.facebook.com/myapp/Invite.aspx?id=603839739. Отлично!
Этот пример достаточно прост, потому двигаемся дальше. У нас есть две колонки на профиле: левая (узкая) и правая (широкая). Вы можете указать в настройках приложения, какая из них будет колонкой по умолчанию для вашего приложения. Для размещения контента в широкой колонке, используйте fb:wide, в узкой — fb:narrow. Просто, не правда ли?
Еще одна интересная вещь. Вы можете указать столько тегов fb:wide и fb:narrow, сколько пожелаете. Весь контент, указанный в тегах fb:wide, будет отображаться, если ваше приложение находится в широкой колонке, весь контент из тегов fb:narrow — когда приложение находится в узкой колонке. Вы можете добавлять контент вне этих тегов, и он будет отображаться в обоих случаях — когда приложение находится в широкой или узкой колонке. Если контент не указан для одной из колонок, Facebook будет выводить текст “No content to display.”
Когда генерировать FBML для профиля?
Область вашего приложения на профиле пользователя должна отражать последние изменения, касающиеся его. Facebook не знает, когда обновлять информацию профиля, потому вам нужно делать это самостоятельно (в любом случае, только вы, как разработчик приложения, знаете, когда что-то изменяется). Поэтому, обычно вам нужно вызывать profile.setFBML после некоторых изменений в вашем приложении (например, пользователь или его друзья добавляют какие-то данные), в зависимости от того, какую информацию вы выводите на профиле. Иногда имеет смысл установить данные по умолчанию после добавления пользователем вашего приложения.
Создание контента FBML для профиля в ASP.NET
Для генерации контента профиля я предлагаю использовать UserControlы:
<fb:if-is-own-profile>
<fb:profile-action url="http://apps.facebook.com/myapp/Products.aspx">View my products</fb:profile-action>
<fb:else>
<fb:if-is-app-user uid="profileowner">
<fb:profile-action url="http://apps.facebook.com/myapp/Products.aspx">
View <fb:name uid="profileowner" firstnameonly="true" possessive="true" /> products
</fb:profile-action>
<fb:else>
<fb:profile-action url="http://apps.facebook.com/myapp/Invite.aspx">
Invite <fb:name uid="profileowner" firstnameonly="true" /> to MyApp
</fb:profile-action>
</fb:else>
</fb:if-is-app-user>
</fb:else>
</fb:if-is-own-profile>
<asp:XmlDataSource runat="server" ID="xdsCountries"
DataFile="~/App_Data/CountryCodeList.xml" />
<fb:wide>
<asp:Repeater runat="server" DataSourceID="xdsCountries" ID="rptCountriesWide">
<ItemTemplate>
<div>
<%# XPath("CountryCoded") %> - <%# XPath("CountryName") %>
</div>
</ItemTemplate>
</asp:Repeater>
</fb:wide>
<fb:narrow>
<asp:Repeater runat="server" DataSourceID="xdsCountries" ID="rptCountriesNarrow">
<ItemTemplate>
<div>
<%# XPath("CountryCoded") %>
</div>
</ItemTemplate>
</asp:Repeater>
</fb:narrow>
Как получить строку, которую можно передать в profile.setFBML? Вот код:
StringWriter tw = new StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(tw);
Control c = LoadControl("~/ProfileFBML.ascx");
Controls.Add(c);
c.RenderControl(hw);
Controls.Remove(c);
string fbml = sb.ToString();
Я добавил контрол в коллекцию Controls, чтобы сработали события. Если вы вызовете приведенный код из OnLoad, сработает только событие OnInit в ProfileFBML, потому не забудьте в этом случае вызвать метод DataBind из OnInit, чтобы заставить данные загрузиться.
Русский
English
So can you please explain how you would then create a FBML page within your applicaiton. Lets say you use profile.setFBML and create a link to
http://www.yourapplication.com/invite.aspx on that invite.aspx how are you then able to display fbml code?
Disregard my last post. I belive that I have just found my answer thank you for your time and a great writeup about FBML for .net users.
[...] bug in Facebook Developer Toolkit. When I tried to call setFBML method (I mentioned it in my previous post) I’ve got an exception about invalid signature. “Haha” I said and downloaded [...]
Im doing my facebook app on ASP.NET 2.0 and Im using:
1. setFBML to display contents on the profile box and..
2. IFRAME to display the contents on the canvas page..
My question is.. can you show us how to write to invite people on invite.aspx..
Dear sir,
many thanks. it is realy very good article and it is so usefull.
great.
well done.
many thanks
HI i want to display my latest 5 product in my applicaion profile.
Is ant one have solution on this that how can i display latet 5 product in application owner profile…
please help
is it possible to use both Iframe and FBML in same application ?
Shihab said:
————————————————–
Shihab
said on 2007-10-17 at 4.07 pm
Im doing my facebook app on ASP.NET 2.0 and Im using:
1. setFBML to display contents on the profile box and..
2. IFRAME to display the contents on the canvas page..
My question is.. can you show us how to write to invite people on invite.aspx..
really liked the idea of using web controls to render fbml !
Как бы сделать FBML аппликацию (не IFRAME) в ASP.NET??
Дим, мож подскажеш?
Спасибо, разобралса.
Не работает при использовании локалхоста
Callback URLhttp://localhost:xxxx/
[...] 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 [...]
Two things
1) the best way to invite someone to your application is via: MultiFriendSelector
2) the except with setFBML was a Facebook issue and fix with the latest Facebook Development Kit v1.6: SetFBML
салют!
вопрос не потеме но может хоть вы помежите,
нетак давно я начал использовать zend framework, мне предложили работу в этой сфепе + создание преложений на платформе facebook,
я уже n-й день пытаюсь разобратся как там всё устроенно, но так до конца и не понял:
например: как происходит загрузка проекта
1. напрямую с моего компа
2. с хранилища на сайте…
мне прислали тестовый проект, сказали что в пакете собрана всё необходимое, так вот если я правильно понимаю то файл application/configs/main.xml
отвечает зо потключение с facebook посколбку хранит id,api…
на данный момент я пробывал создавать свой проект на fb но так и несмог его ‘завести’..
немагли бы вы потсказать как правильно создовать преложения на facebook
зарание благодарен )
Я в той же ситуации. сделал все как написано в мануалах. но результат такой:
при входе на мою страницу, где лежат файлы, происходит редирект на Facebook и просит залогиниться, а при входе на страницу Facebook пишет, что страница не найдена.
Помогите кто-нибудь. Хотя бы полезными ссылками.