Generating content for the Facebook’s setFBML method in ASP.NET

Posted by Dmytro Shteflyuk on under ASP.NET

In my current project we decided to build a Facebook application. This is really great platform with many interesting ideas inside, which usually means that you will spend a much time to make your application working as expected. Today I wanna talk about user profiles. Any Facebook application could add some action links, which will be displayed under the user’s picture, and some content for wide or narrow column. Of course, you can use FBML syntax, especially fb:if-... tags set to choose which content to show on specific profiles to concrete users.

For the beginning, I’ll post a few key points about user profiles. If you want to add some content to the profile of specific user, you should call profile.setFBML routine. For users that you have not called profile.setFBML for, the actions are read from the content in “Default FBML” section of your application settings. For the most part, this will apply to any user who has not added your application. What is “Default FBML” itself? If you have added application, you will see “Default FBML” on all profiles of users that you have not called profile.setFBML for, and it does not matter, if they have added your application or not (good place to put “Invite” link). The same behavior you would see, if you would call profile.setFBML for all users (and if you are crazy enough.)

Please note, “Default FBML” is cached indefinitely, so wait some time to get your content on profiles. Another thing — you can add only action links to user profiles, that have not added your application, and only your application user will see them. This is most important part of the documentation, and you should completely understand it. More detailed description could be found in the documentation for fb:profile-action tag and profile.setFBML routine.

FBML-content for user profiles

There are 4 profile-specific FBML tags exist:

  • fb:profile-action is used to add action links under the user picture.
  • fb:subtitle will be shown right under the title of the your application box.
  • fb:wide specifies content to be shown when your application box placed in wide column.
  • fb:narrow specifies content to be shown when your application box placed in narrow column.

Easy, right? So let’s examine these tags more precisely.

As I said early, fb:profile-action is used to place action links on the user’s profile. Usually you will add one link:

1
2
3
<fb:profile-action url="http://www.mysite.com/action/">
    Perform Action
</fb:profile-action>

What about following scenario: I want to see the link “View my products” when I’m looking my own profile, “View Taisia’s products”, if I’m looking profile of my wife Taisia (and she has added application too), and “Invite Roman to MyApp” when I’m looking profile of my friend Roman, and he has not added application. Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

Please note: this example is similar to example on the fb:profile-action documentation page, but has one big difference — it’s working: fb:if-is-app-user uid="profileowner" (in documentation example uid takes default value “loggedinuser”, but we need uid of the profile owner.)

This code will work completely only if you will put it into the “Default FBML” section of your application settings, or if you will call profile.setFBML for user, that has not added your application (but this is madness, what I have talked about early): I have specified action “Invite someone to MyApp” in section, which will be shown only on profile of user that has not added application.

BTW, do not forget to remove all line breaks before updating “Default FBML”, because Facebook replaces them with <br/>.

Another interesting thing you could see from working example: Facebook adds parameter id for all links in profile-action, and it equals to owner’s of the profile ID. In my previous example, if I will navigate to Roman’s profile, I will see hyperlink with URL http://apps.facebook.com/myapp/Invite.aspx?id=603839739. Great!

This example is simple, so let’s move ahead. We have two columns on the profile: left (narrow) and right (wide). You can specify in application settings which one will be default. To put content in wide column, use fb:wide, in narrow column — fb:narrow. Quite clear, right?

One more interesting issue. You can specify as many fb:wide and fb:narrow tags as you wish. All content, specified in fb:wide tags will be shown if you application box placed in wide column, all content from fb:narrow tags — when application box placed in narrow column. You can add content outside one of these tags, and it will be shown in both cases — when application in wide or narrow column. If no content specified for one of column, Facebook will show “No content to display.” text.

When to generate profile FBML?

Your application box on the user’s profile should reflect latest changes related to him. Facebook does not know when to update profile information, so you need to do it by yourself (anyway, only you as application developer know when something changes). So, usually you would call profile.setFBML after some changes in your application (for example, user or his friends added some data), depending on which information you are rendering on the profile. Sometimes it’s a good idea to set default data after user has added your application.

Creating profile FBML content with ASP.NET

For profile content generating I propose to use UserControls:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProfileFBML.ascx.cs" Inherits="ProfileFBML" %>
<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>

How to get string to put it into the profile.setFBML? Here is the code:

1
2
3
4
5
6
7
8
StringBuilder sb = new StringBuilder();
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();

I’ve added control to the Controls collection to get events fired. If you would call this snippet from OnLoad, only OnInit would be fired in ProfileFBML, so do not forget to call DataBind method to force data binding from OnInit in this case.

18 Responses to this entry

Subscribe to comments with RSS

said on September 15th, 2007 at 19:10 · Permalink

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?

said on September 15th, 2007 at 19:11 · Permalink

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.

said on October 17th, 2007 at 16:07 · Permalink

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

arash
said on October 18th, 2007 at 00:56 · Permalink

Dear sir,
many thanks. it is realy very good article and it is so usefull.
great.
well done.
many thanks :)

kapil
said on December 4th, 2007 at 21:08 · Permalink

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

molox
said on December 17th, 2007 at 15:10 · Permalink

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

dNetGuru
said on December 25th, 2007 at 00:31 · Permalink

really liked the idea of using web controls to render fbml !

Andy_IL
said on December 31st, 2007 at 17:35 · Permalink

Как бы сделать FBML аппликацию (не IFRAME) в ASP.NET??

Дим, мож подскажеш?

Andy_IL
said on January 2nd, 2008 at 15:52 · Permalink

Спасибо, разобралса.

Не работает при использовании локалхоста

Callback URLhttp://localhost:xxxx/

Rosie
said on January 17th, 2008 at 23:40 · Permalink

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

virdfel
said on March 28th, 2008 at 17:19 · Permalink

салют!
вопрос не потеме но может хоть вы помежите,

нетак давно я начал использовать zend framework, мне предложили работу в этой сфепе + создание преложений на платформе facebook,
я уже n-й день пытаюсь разобратся как там всё устроенно, но так до конца и не понял:
например: как происходит загрузка проекта
1. напрямую с моего компа
2. с хранилища на сайте…
мне прислали тестовый проект, сказали что в пакете собрана всё необходимое, так вот если я правильно понимаю то файл application/configs/main.xml
отвечает зо потключение с facebook посколбку хранит id,api…
на данный момент я пробывал создавать свой проект на fb но так и несмог его ‘завести’..
немагли бы вы потсказать как правильно создовать преложения на facebook

зарание благодарен )

RomanOwn
said on April 16th, 2008 at 07:49 · Permalink

Я в той же ситуации. сделал все как написано в мануалах. но результат такой:
при входе на мою страницу, где лежат файлы, происходит редирект на Facebook и просит залогиниться, а при входе на страницу Facebook пишет, что страница не найдена.
Помогите кто-нибудь. Хотя бы полезными ссылками.

Asifuddin
said on July 1st, 2008 at 14:43 · Permalink

Hi
I am Asifuddin actually i developing one game site through face book. so very new from this site.
so pl z help me to give some suggestions.

Actually i can deploye my application with iframe.but how can i deployee my application with the FBML.

thanks
asif

said on July 1st, 2008 at 14:58 · Permalink

Hi Asifuddin,

Can you explain what exact problem you have faced with during deploying your FBML site?

Neil
said on August 21st, 2008 at 15:12 · Permalink

Is it possible to view our application on developers Profile before submitting it to the product directory.

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.