Gorm’s blog

FBML Landingpage

A trick for FBML geeks

A special little trick in the below code is that a “Join” button is shown, for those who are not fans.  And a different message is shown for those that are fans of the Facebook page. This is done with the FBML tag “fb: visible-to-connection”. This tag is special in that the part that is hidden for those who are not fans is still in the source HTML code on the final page, and it still shown to non fans as white space. So in order to get rid of the white space that is show to non fans, you want to place the content on top of each other. NOTICE the administrator of the facebook page will actually see both messages / pieces of content on top of each other.
One way of doing this is with a table where you hide the background picture in a table cell by showing a picture on top of the background image  (content on top of each other).
<table width=”xx” height=”yy” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td background=”http://www.yourdomain.com/linkto/nonfans.jpg”>
<fb:visible-to-connection>
<img src=”http://www.yourdomain.com/linkto/fans.jpg” height=”xx” width=”yy” /> </fb:visible-to-connection>
</td>
</tr>
</table>

My solution is slightly different I place two <div> boxes on top of each other with position absolute. This solution is a more flexible in that you do not have to use images.

<div style=”position:relative;top:0;left:0;”>
<fb:visible-to-connection>
<div style=”position: absolute;top:0px;left:0px;”>
CONTENT FOR FANS
</div>
<fb:else>
<div style=”position: absolute;top:0px;left:0px;”>
CONTENT FOR THOSE WHO ARE NOT FANS
</div>
</fb:else>
</fb:visible-to-connection>
</div>

Entire code below

&lt;fb:visible-to-connection&gt;&lt;/p&gt; &lt;div style="width:320px;height:50px; position: absolute;top:0px;left:0px;"&gt; &lt;h2 style="font-weight:bold;" mce_style="font-weight: bold;"&gt;&lt;a href="http://www.facebook.com/facultyofengineering?ref=ts#/facultyofengineering?v=wall&amp;ref=ts" mce_href="http://www.facebook.com/facultyofengineering?ref=ts#/facultyofengineering?v=wall&amp;ref=ts"&gt;Go to the Wall and chat with international students at the Faculty of Engineering&lt;/a&gt;&lt;/h2&gt; &lt;/p&gt;&lt;/div&gt; &lt;p&gt;        &lt;fb:else&gt;&lt;/p&gt; &lt;div style="width:320px;height:50px; position: absolute;top:0px;left:0px;"&gt; &lt;h2 style="font-weight:bold;" mce_style="font-weight: bold;"&gt;Join and chat with international students&lt;/h2&gt; &lt;p&gt;            &lt;span id="profile_connect"&gt;&lt;br /&gt;             &lt;a class="UIButton UIButton_Gray UIButton_CustomIcon UIActionButton" href="#" mce_href="#" rel="async-post" ajaxify="/ajax/pages/fan_status.php?fbpage_id=56430622305&amp;add=1&amp;reload=1&amp;preserve_tab=1&amp;use_primer=1"&gt;&lt;br /&gt;             &lt;span class="UIButton_Text"&gt;&lt;br /&gt;             &lt;img class="UIButton_Icon spritemap_icons sx_icons_group" alt="" src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif" mce_src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif"/&gt;&lt;br /&gt;             Join&lt;br /&gt;             &lt;/span&gt;&lt;br /&gt;             &lt;/a&gt;&lt;/p&gt;&lt;/div&gt; &lt;p&gt;        &lt;/fb:else&gt;&lt;br /&gt;         &lt;/fb:visible-to-connection&gt;

But my solution is not perfect because the height is a fixed number of pixels, so if you make or have seen a more flexible solution, then please share it with us.

Ok the above is not violently pedagogically, but write and I will answer you:)

The rest is a danish translation…

Harley Davidson gør det, Coca Cola gør det og Ingeniør uddannelserne på SDU gør det. De laver customiserede sider på deres Facebook side. Som man kan se i ovenstående eksempel, så vælger Harley Davidson at sprænge alle Facebook rammer og design regler, og laver en side der lige så godt kunne befinde sig på deres website harley-davidson.com. Dvs. de producerer sider til deres Facebook sider, og det kan så være f.eks. en landingpage for nye medlemmer eller lign. Der ligger faktisk en lille design diskussion her – skal vi tilpasse os Facebook design, eller skal vi tage vores webside design med over på Facebook siden – er der nogen designere eller kommunikationsfolk som har en mening om det?.

Men i praksis hvordan gør man, og hvad kan man?

Her kommer den helt korte version.

1. Du installerer Static FBML
2. Du skriver almindelig HTML kode, CSS etc og laver på den måde en side.
3. Den lidt mere avancerende kan vælge at tilføje lidt FBML koder – sådan at du f.eks. kan vise en “Join” knap for dem som ikke er fan er fan af siden og en anden besked form dem som er fan af din Facebook side.

Ovenstående kan man jo ikke kalde en FBML tutorial, men kort sagt kan du lave en almindelig dødelig HTML side, så kan du også lave en Facebook side.

FBML static Template

Kopier nedenstående kode og du har en fuld template for en FBML side. Alt du behøves at gøre er sådan set at ændre linksne. Se hvordan template ser ud her på denne study engineering abroad side.

CTRL A, CTRL C og CTRL V når du er under rediger i Static FBML.

&lt;fb:fbml version="1.1"&gt;&lt;/p&gt; &lt;div style="position:relative;top:0;left:0; width:675px;"&gt; &lt;div style="position:relative;top:0;left:0;width:675px;"&gt;       &lt;img style="margin-bottom:15px;" mce_style="margin-bottom: 15px;" src="http://www.madsgormlarsen.dk/engineering.gif" mce_src="http://www.madsgormlarsen.dk/engineering.gif" alt="Study Engineering abroad" /&gt;       &lt;/div&gt; &lt;div style="float:left;margin-right:15px;width:320px;"&gt; &lt;h1&gt;Study engineering abroad&lt;/h1&gt; &lt;h3 style="font-weight:normal;" mce_style="font-weight: normal;"&gt;The Faculty of Engineering in Denmark offers a range of engineering programmes.&lt;/p&gt; &lt;div style="float:right;top:0;left:0;width:150px;height:191;"&gt;             &lt;a href="http://www.e-pages.dk/syddanskuniversitet/19/" mce_href="http://www.e-pages.dk/syddanskuniversitet/19/"&gt;&lt;img style="margin:0px 0px 5px 10px;" mce_style="margin: 0px 0px 5px 10px;" src="http://www.madsgormlarsen.dk/engineering.jpg" mce_src="http://www.madsgormlarsen.dk/engineering.jpg" alt="Study Engineering abroad" /&gt;&lt;/a&gt;             &lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/englishtaugth_program.aspx?sc_lang=en" mce_href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/englishtaugth_program.aspx?sc_lang=en"&gt;English taught&lt;/a&gt; degree programmes &lt;/li&gt; &lt;li&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.sdu.dk/Uddannelse/Fuldtidsstudier/Exchange_Programmes.aspx?sc_lang=en" mce_href="http://www.sdu.dk/Uddannelse/Fuldtidsstudier/Exchange_Programmes.aspx?sc_lang=en"&gt;English taught&lt;/a&gt; exchange programmes  &lt;/li&gt; &lt;li&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/danishtaugth_prog.aspx?sc_lang=en" mce_href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/danishtaugth_prog.aspx?sc_lang=en"&gt;Danish taught&lt;/a&gt; degree programmes&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;             Read our prospectus &lt;a href="http://www.e-pages.dk/syddanskuniversitet/19/" mce_href="http://www.e-pages.dk/syddanskuniversitet/19/"&gt;Real Life. Engineering programmes&lt;/a&gt;. &lt;/p&gt; &lt;/h3&gt; &lt;h2&gt;&lt;a href="http://sdu.dk/Information_til/Internationale_studerende.aspx" mce_href="http://sdu.dk/Information_til/Internationale_studerende.aspx"&gt;Practical information for international students&lt;/a&gt;&lt;/h2&gt; &lt;h3 style="font-weight:normal;" mce_style="font-weight: normal;"&gt;             For further information about our English taught programmes, contact The International Office on &lt;a href="mailto:int@sdu.dk" mce_href="mailto:int@sdu.dk"&gt;int@sdu.dk&lt;/a&gt;.&lt;br /&gt;             &lt;/h3&gt; &lt;/p&gt;&lt;/div&gt; &lt;div style="float:left;margin-left:20px;width:320px;"&gt; &lt;div style="position:relative;top:0;left:0; width:320px;"&gt;         &lt;fb:visible-to-connection&gt;&lt;/p&gt; &lt;div style="width:320px;height:50px; position: absolute;top:0px;left:0px;"&gt; &lt;h2 style="font-weight:bold;" mce_style="font-weight: bold;"&gt;&lt;a href="http://www.facebook.com/facultyofengineering?ref=ts#/facultyofengineering?v=wall&amp;ref=ts" mce_href="http://www.facebook.com/facultyofengineering?ref=ts#/facultyofengineering?v=wall&amp;ref=ts"&gt;Go to the Wall and chat with international students at the Faculty of Engineering&lt;/a&gt;&lt;/h2&gt; &lt;/p&gt;&lt;/div&gt; &lt;p&gt;        &lt;fb:else&gt;&lt;/p&gt; &lt;div style="width:320px;height:50px; position: absolute;top:0px;left:0px;"&gt; &lt;h2 style="font-weight:bold;" mce_style="font-weight: bold;"&gt;Join and chat with international students&lt;/h2&gt; &lt;p&gt;            &lt;span id="profile_connect"&gt;&lt;br /&gt;             &lt;a class="UIButton UIButton_Gray UIButton_CustomIcon UIActionButton" href="#" mce_href="#" rel="async-post" ajaxify="/ajax/pages/fan_status.php?fbpage_id=56430622305&amp;add=1&amp;reload=1&amp;preserve_tab=1&amp;use_primer=1"&gt;&lt;br /&gt;             &lt;span class="UIButton_Text"&gt;&lt;br /&gt;             &lt;img class="UIButton_Icon spritemap_icons sx_icons_group" alt="" src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif" mce_src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif"/&gt;&lt;br /&gt;             Join&lt;br /&gt;             &lt;/span&gt;&lt;br /&gt;             &lt;/a&gt;&lt;/p&gt;&lt;/div&gt; &lt;p&gt;        &lt;/fb:else&gt;&lt;br /&gt;         &lt;/fb:visible-to-connection&gt;       &lt;/div&gt; &lt;div style="position:relative;top:50px;left:0px; width:320px;"&gt; &lt;h3 style="font-weight:normal;" mce_style="font-weight: normal;"&gt;Double-click to wacth this movie made by international students during their stay in Denmark &lt;/p&gt; &lt;/h3&gt;&lt;/div&gt; &lt;div style="position:relative;top:50px;left:0px; width:320px; height:320px"&gt;       &lt;fb:swf&lt;br /&gt;       swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"&lt;br /&gt;       swfsrc='http://www.youtube.com/v/vMFto_R5t8E'&lt;br /&gt;       imgsrc='http://www.madsgormlarsen.dk/study_abroad.jpg' width='320' height='270'&lt;br /&gt;       waitforclick="false" /&gt;       &lt;/div&gt; &lt;div style="position:relative;top:0px;left:0px; width:320px;"&gt;         &lt;br /&gt; &lt;h3&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.facebook.com/facultyofengineering?v=app_2392950137" mce_href="http://www.facebook.com/facultyofengineering?v=app_2392950137"&gt;Watch more movies about the Faculty of Engineering &lt;/a&gt;&lt;/h3&gt; &lt;/p&gt;&lt;/div&gt; &lt;/p&gt;&lt;/div&gt; &lt;p&gt;&lt;fb:share-button class="url" href="http://www.facebook.com/facultyofengineering?v=app_7146470109" /&gt; &lt;/div&gt; &lt;p&gt;&lt;/fb:fbml&gt;

Kom meget gerne med kommentarer til koden, kritik af design, debat om ideen med en landingpage på en Facebook side etc. etc.

Et PS for FBML nørder

Et særlig lille trick i ovenstående kode er der vises en “Join” knap for dem som ikke er fan er fan af siden, og en anden besked form dem som er fan af din Facebook side. Der er der særlige ved fb:visible-to-connection at for dem der ikke er fans bliver indholdet vist som en hvid plads, og det som holdes skjuldt er stadig med i kildekoden. Deraf kommer behovet for at placerer indhold oven i hinnanden (som administrator af en facebook siden, så ser du faktisk begge beskeder oven i hinanden).

&lt;fb:fbml version="1.1"&gt;&lt;/p&gt; &lt;div style="position:relative;top:0;left:0; width:675px;"&gt; &lt;div style="position:relative;top:0;left:0;width:675px;"&gt;       &lt;img style="margin-bottom:15px;" mce_style="margin-bottom: 15px;" src="http://www.madsgormlarsen.dk/engineering.gif" mce_src="http://www.madsgormlarsen.dk/engineering.gif" alt="Study Engineering abroad" /&gt;       &lt;/div&gt; &lt;div style="float:left;margin-right:15px;width:320px;"&gt; &lt;h1&gt;Study engineering abroad&lt;/h1&gt; &lt;h3 style="font-weight:normal;" mce_style="font-weight: normal;"&gt;The Faculty of Engineering in Denmark offers a range of engineering programmes.&lt;/p&gt; &lt;div style="float:right;top:0;left:0;width:150px;height:191;"&gt;             &lt;a href="http://www.e-pages.dk/syddanskuniversitet/19/" mce_href="http://www.e-pages.dk/syddanskuniversitet/19/"&gt;&lt;img style="margin:0px 0px 5px 10px;" mce_style="margin: 0px 0px 5px 10px;" src="http://www.madsgormlarsen.dk/engineering.jpg" mce_src="http://www.madsgormlarsen.dk/engineering.jpg" alt="Study Engineering abroad" /&gt;&lt;/a&gt;             &lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/englishtaugth_program.aspx?sc_lang=en" mce_href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/englishtaugth_program.aspx?sc_lang=en"&gt;English taught&lt;/a&gt; degree programmes &lt;/li&gt; &lt;li&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.sdu.dk/Uddannelse/Fuldtidsstudier/Exchange_Programmes.aspx?sc_lang=en" mce_href="http://www.sdu.dk/Uddannelse/Fuldtidsstudier/Exchange_Programmes.aspx?sc_lang=en"&gt;English taught&lt;/a&gt; exchange programmes  &lt;/li&gt; &lt;li&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/danishtaugth_prog.aspx?sc_lang=en" mce_href="http://www.sdu.dk/Om_SDU/Fakulteterne/Teknik/Uddannelse/danishtaugth_prog.aspx?sc_lang=en"&gt;Danish taught&lt;/a&gt; degree programmes&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;             Read our prospectus &lt;a href="http://www.e-pages.dk/syddanskuniversitet/19/" mce_href="http://www.e-pages.dk/syddanskuniversitet/19/"&gt;Real Life. Engineering programmes&lt;/a&gt;. &lt;/p&gt; &lt;/h3&gt; &lt;h2&gt;&lt;a href="http://sdu.dk/Information_til/Internationale_studerende.aspx" mce_href="http://sdu.dk/Information_til/Internationale_studerende.aspx"&gt;Practical information for international students&lt;/a&gt;&lt;/h2&gt; &lt;h3 style="font-weight:normal;" mce_style="font-weight: normal;"&gt;             For further information about our English taught programmes, contact The International Office on &lt;a href="mailto:int@sdu.dk" mce_href="mailto:int@sdu.dk"&gt;int@sdu.dk&lt;/a&gt;.&lt;br /&gt;             &lt;/h3&gt; &lt;/p&gt;&lt;/div&gt; &lt;div style="float:left;margin-left:20px;width:320px;"&gt; &lt;div style="position:relative;top:0;left:0; width:320px;"&gt;         &lt;fb:visible-to-connection&gt;&lt;/p&gt; &lt;div style="width:320px;height:50px; position: absolute;top:0px;left:0px;"&gt; &lt;h2 style="font-weight:bold;" mce_style="font-weight: bold;"&gt;&lt;a href="http://www.facebook.com/facultyofengineering?ref=ts#/facultyofengineering?v=wall&amp;ref=ts" mce_href="http://www.facebook.com/facultyofengineering?ref=ts#/facultyofengineering?v=wall&amp;ref=ts"&gt;Go to the Wall and chat with international students at the Faculty of Engineering&lt;/a&gt;&lt;/h2&gt; &lt;/p&gt;&lt;/div&gt; &lt;p&gt;        &lt;fb:else&gt;&lt;/p&gt; &lt;div style="width:320px;height:50px; position: absolute;top:0px;left:0px;"&gt; &lt;h2 style="font-weight:bold;" mce_style="font-weight: bold;"&gt;Join and chat with international students&lt;/h2&gt; &lt;p&gt;            &lt;span id="profile_connect"&gt;&lt;br /&gt;             &lt;a class="UIButton UIButton_Gray UIButton_CustomIcon UIActionButton" href="#" mce_href="#" rel="async-post" ajaxify="/ajax/pages/fan_status.php?fbpage_id=56430622305&amp;add=1&amp;reload=1&amp;preserve_tab=1&amp;use_primer=1"&gt;&lt;br /&gt;             &lt;span class="UIButton_Text"&gt;&lt;br /&gt;             &lt;img class="UIButton_Icon spritemap_icons sx_icons_group" alt="" src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif" mce_src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif"/&gt;&lt;br /&gt;             Join&lt;br /&gt;             &lt;/span&gt;&lt;br /&gt;             &lt;/a&gt;&lt;/p&gt;&lt;/div&gt; &lt;p&gt;        &lt;/fb:else&gt;&lt;br /&gt;         &lt;/fb:visible-to-connection&gt;       &lt;/div&gt; &lt;div style="position:relative;top:50px;left:0px; width:320px;"&gt; &lt;h3 style="font-weight:normal;" mce_style="font-weight: normal;"&gt;Double-click to wacth this movie made by international students during their stay in Denmark &lt;/p&gt; &lt;/h3&gt;&lt;/div&gt; &lt;div style="position:relative;top:50px;left:0px; width:320px; height:320px"&gt;       &lt;fb:swf&lt;br /&gt;       swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"&lt;br /&gt;       swfsrc='http://www.youtube.com/v/vMFto_R5t8E'&lt;br /&gt;       imgsrc='http://www.madsgormlarsen.dk/study_abroad.jpg' width='320' height='270'&lt;br /&gt;       waitforclick="false" /&gt;       &lt;/div&gt; &lt;div style="position:relative;top:0px;left:0px; width:320px;"&gt;         &lt;br /&gt; &lt;h3&gt;&lt;a style="font-weight:bold;" mce_style="font-weight: bold;" href="http://www.facebook.com/facultyofengineering?v=app_2392950137" mce_href="http://www.facebook.com/facultyofengineering?v=app_2392950137"&gt;Watch more movies about the Faculty of Engineering &lt;/a&gt;&lt;/h3&gt; &lt;/p&gt;&lt;/div&gt; &lt;/p&gt;&lt;/div&gt; &lt;p&gt;&lt;fb:share-button class="url" href="http://www.facebook.com/facultyofengineering?v=app_7146470109" /&gt; &lt;/div&gt; &lt;p&gt;&lt;/fb:fbml&gt;&lt;/p&gt; &lt;p&gt;

Den eneste måde jeg har set dette løst på er med en gammeldaws <table> (se tip 3), og med billed filer. Jeg valgte en lidt anden fremgangsmåde, som gav mig muligheden for at skifte andet end billedfiler (jeg benytter CSS og position absolute). Løsningen er ikke helt perfekt da height er et fast antal pixels, hvis du kan lave eller har set en bedre, mere fleksibel løsning, så del den endelig med os andre.

Ok ovenstående er ikke voldsomt pædagogisk, men skriv så svarer jeg gerne :)

Update

http://www.nodes.dk/blog/facebook-faneblade-bredde/