Pimp your Facebook page with FBML

By | 09/01/2010

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

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:)

For those that are fans - have already clicked like.
For those that are fans – have already clicked like.
For those that are not fans - have not already clicked like.
For those that are not fans – have not already clicked like.
TAKE NOTICE - this is how it lookes for those that are administrators of the site
TAKE NOTICE – this is how it lookes for those that are administrators of the site

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.

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

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/

58 thoughts on “Pimp your Facebook page with FBML

  1. Daniel

    Hej Mads,
    God lille guide til at få folk i gang med FBML. Vedr. diskussionen om design tror jeg ikke der er et entydigt svar. Det handler om smag. Jeg mener at huske en undersøgelse (kan ikke lige finde reference) der konkluderede, at det effektmæssigt ikke betød noget om applikationer fulgte Facebooks designlinie. I de tilfælde hvor det havde positiv effekt, mente rapporten at kunne konkludere at dette skyldes at Facebook har en brugervenlig designlinie.

    Se iøvrigt http://www.customfacebookpage.com/ for inspiration til tilpasning af Facebook sider.

    Reply
  2. Mads Gorm Larsen

    Hej Daniel

    Tak for de pæne ord, det betyder virkelig noget, når det kommer fra en partner i en virksomhed der arbejder professionelt med Facebook applikationer. I har den bedste danske blog om Facebook udvikling som jeg har set. Og jeg kan se at jeg måske snart skal til at opdaterer min template / design. Er der korrekt forstået at fanside fanblade bliver mindre, og at jeg derfor skal hen og skærer lidt af designet?

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

    Så skal du lige have tak for dit super link til
    http://www.customfacebookpage.com/

    Kan du dele et par links med os andre til gode danske / internationale blogs om FBML og facebook applikationsudvikling. Jeg har en lille plan om at jeg på hobby basis vil lave en lille rigtig Facebook applikation.

    Omkring design skal – skal ikke ligne Facebook, så tænker jeg lidt på gode gamle Jakob Nielsen, som jeg tilbage i gamle dage yndende at sige “husk dine brugere bruger 99% af deres tid på andre websider end din”. Pointen kunne i denne sammenhæng være at hvis du gerne vil have brugeren til at benytte almindelige Facebook handlinger – som f.eks. “Share” – ja så skal din “Share” kanp måske se ud som den gør på alle de andre 99% af Facebook siderne.
    Et andet spørgsmål som jeg tænkte over var om man måske i højere grad bliver opfattet som reklame, hvis man vælger at bryde med Facebook standard design. F.eks. for min egen siden – Study engineering abroad så bliver det pludselig en corporate side, og ikke de studerende som henvender sig til andre studerende. Hvis du finder linket til den undersøgelse så del det endelig.

    Tak for kommentar og godt link

    Reply
  3. Pingback: uberVU - social comments

  4. Pingback: www.anyhed.dk

  5. Mads Gorm Larsen

    Hej Daniel

    Mange tak for link, og ja jeg smider en mail når jeg har en app i luften. Vil da super gerne have feedback fra professionelle.

    Mange hilsner
    Mads

    Reply
  6. Mads Gorm Larsen

    Hi Islatur

    You can do it with anything you like, I have written about the FBML trick in English now. Hope it makes better sense for you know.

    Best regards
    Mads

    Reply
  7. Sophie Hovdekorp

    Øv bøv bøv. Fik endelig tid til at prøve din kode af, men får ikke andet end kodeteksten frem på skærmen.
    har tjekket at jeg har fået alt med.
    Andre der har problemer?

    kh.
    Sophie

    Reply
  8. Mads Gorm Larsen

    Hej Sophie

    Du skal være opmærksom på at den eneste kode du kan stage fuldstændigt copy – paste er den som står i kassen under

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

    Ellers så skal du placerer koden i skal vi sige en sammenhæng. Kan du henvise til siden hvor du afprøver koden?

    Mads

    Reply
  9. carina

    Super god vejledning. Tak for det – har allerede haft stor glæde af det.
    Er der nogen der ved hvordan man kan lave en “foreslå til venner” til en fanside? Det ville være helt fantastisk hvis det overhovedet kan lade sig gøre :O))

    Reply
  10. Mads Gorm Larsen

    Hej Carina

    Det er skam med i ovendstående kode

    Du skal så bare ændre linket. Skriv hvis der er mere jeg kan hjælpe med.

    God weekend
    Mads

    Reply
  11. anders sorensen

    hej
    jeg er ved at lave lidt FB fan side til min shop. Jeg for lavet en velkomstside som ikke fans lander paa og hvor der skrives nogen fordele ved at blive fan. Rabat, konkurrence kun for fans etc..

    Nu har jeg lavet en FBML side til konkurrencerne. Men det skal jo kun være fans som kan se hvad der staar paa denne side og vinde.
    Jeg er ikke html haj, saa hvordan er det lige det kan gøres?
    fatter lidt minus af hvad der stod ovenover ;-)
    Naar jeg skal lave lidt html bruger jeg windows live writer og napper koden derfra.

    hej
    mvh
    anders

    Reply
  12. Mads Gorm Larsen

    Hej Anders

    Det er sådan set forholdsvis enkelt, du tager den her kode.

    <div style=”position:relative;top:0;left:0;”>
    <fb:visible-to-connection>
    <div style=”position: absolute;top:0px;left:0px;”>
    Her skriver du det dine fans skal se
    </div>
    <fb:else>
    <div style=”position: absolute;top:0px;left:0px;”>
    Her skriver du det som dem der ikke er fans skal se
    </div>
    </fb:else>
    </fb:visible-to-connection>
    </div>
    Prøv at se om ikke der skulle være en i omgangskredsen som har lavet en webside. Eller få fat i et IDG hæfte om html for begyndere, det tager en enkelt lørdag at komme igennem.

    Skriv igen
    Mvh
    Mads

    Reply
  13. anders sorensen

    hej Mads
    tak for det. Maa jeg spørge en ekspert om noget. Jeg kom op paa 25 fans, wow ;-) ,og tænkte at jeg ville give fan siden eget URL. Det gjorde jeg saa men nu virker det ikke.
    Jeg fik denne url af FB: http://www.facebook.com/organicdreams.cosmetiquebio
    Men jeg kunne ikke aabne siden. Nogen kunne godt andre ikke. Jeg kan ikke. Du kan se mere her: http://www.amino.dk/forums/t/81601.aspx
    Undskylder men tænkte lige at jeg ville prøve at spørge dig ;-)
    Mvh
    anders

    Reply
  14. Mads Gorm Larsen

    Jeg har ellers royalt besøg på mit seneste indlæg om Superbest:) Men du får lige et hurtigt svar, jeg gætter på at følgende er sket. En sløv programmør har glemt at Facebook ikke vil tillade punktum i en url, dvs. du har fået godkendt en ulovlig url – så at sige. Det er 101% gæt.
    Hvis du søger efter din side, og besøger den fra søge listen, så virker kort url efterfølgende. Det er kun ved første besøg den ikke virker.
    Hvad var den gamle url – før du fik kort url?

    Reply
  15. anders sorensen

    Hej Mads
    Tak fodi dit svar. Hvis . ikke er lovligt ja hvordan søren har den saa kunne blive godkendt. Og hvordan for man det saa ændret er vel nok et endnu større spørgsmaal..?? Men at da jeg oprettede URl’en stod der at . var ok at bruge, mener jeg.

    Før den korte url skulle den hedde som dette:
    http://www.facebook.com/#/pages/OrganicDreams-Cosmetique-Bio/73945097504?ref=sgm

    Men jeg kan ikke komme paa siden uanset browser og styresystem. Hverken fra min personlige facebook konto eller via en anden “fake/test” facebook konto jeg har eller internettet.
    Jo nogen gang er jeg heldig at den er aaben et par min. men saa gaar den ned igen lige bagefter.

    Og tillykke med det royale besøg ;-)

    mvh
    anders

    Reply
  16. Mads Gorm Larsen

    Har du det samme problem hvis du bruger den gamle url? Faktisk er . tilladt, så der burde ikke være et problem.

    Den virker i 3 browsere på min Mac. Har du prøvet fra en anden computer?

    Reply
  17. Anders

    Hej
    ja jeg har samme problem med den gl URL. Uanset pc/mac/browser.
    Får denne besked:

    “The page you requested was not found.
    You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.

    Return home
    Go back to the previous page”

    meget meget mærkeligt.
    Jeg må se om jeg kan komme til at oprette en sag hos FB.

    Takket igen
    Mvh
    anders

    Reply
  18. Mike Olesen

    Hej Mads!

    Tak for en super fed guide – jeg er ved at opsætte en FB page, og det info var lige nøjagtig hva jeg manglede :)

    Men en ting jeg mangler, og som jeg ikke kan finde info om andre steder, er til fanerne.
    Det jeg tænker på, er om man kan omdøbe de faner man har på en page? Her tænker jeg på at omdøbe “discussions” til “Snak” f.eks.
    Og er det muligt at fjerne “info” også? Den irriterer mig da man ikke rigtig kan bruge den til særlig meget :(

    Håber du kan give et tip eller to :)

    -Mike

    Reply
  19. Mads Gorm Larsen

    Tak for de pæne ord.

    “discussions” kan du fjerne men ikke omdøbe. Hvis du har dansk opsætning slået til hedder den Debat, og hvis du klikker på den er der mulighed for vælge slet fane.

    Væggen og indformation kan du hverken omdøbe eller fjerne.

    Håber det hjalp :)

    Reply
  20. Pingback: CapeLinks Blog

  21. Pingback: How to Pimp Your Facebook Fan Page » CapeLinks Blog

  22. Nathan

    Hi,

    Just off this main post you can replace the white space with alternative content using

    You can see this because you are a fan You are NOT a fan – join now

    Reply
  23. Rachel Toft

    Hej Mads.

    Jeg prøvede at paste hele koden ind men det eneste der kommer frem er koden selv og intet andet.. :-(

    Hvad gør jeg forkert?

    Reply
  24. Rachel Toft

    Nu får jeg billederne frem.. men DIV’erne ligger ikke ovenpå hinanden.. Hmmm.. øv!

    Reply
  25. Mads Gorm Larsen

    Muligvis har du gjort det rigtig Rachel – når du er lokket ind som administrator for siden så skal noget af det vises oven på hinanden. Giv os et link til siden.

    Mads

    Reply
  26. Anette Sand

    1000 tak for rigtig god information og koden, der er lige til at sætte ind, jeg snuppede den direkte fra en af dine tidligere kommentarer og det virker perfekt. Så nu kan jeg gå i gang med at lave en FB side som matcher den helt nye http://hobbyvirksomheder.dk.

    De bedste hilsner
    Anette Sand

    Reply
  27. Mads Gorm Larsen

    Hej Anette

    Mange tak fordi du skriver og siger tak, det er rart når man lige får at vide at det kunne bruges. Du er selvfølgelig velkommen til at give tippet videre til andre erhversdrivende.

    Mvh
    Mads

    Reply
  28. Nichlas

    Hej Mads

    Jeg har lavet en FBML fane, men når jeg skriver i den og vil lave nye afsnit kører det hele ud i en lang sætning. Hvad skal jeg gøre for at lave nye afsnit på fansiden.

    Håber du kan hjælpe mig, da jeg ikke er en ørn til det overhovedet.

    Med Venlig Hilsen Nichlas

    Reply
  29. Mads Gorm Larsen Post author

    Hej Nichlas

    Har du tidligere lavet noget i HTML? Hvis du aldrig har lavet lidt i HTML så er der et lille stykke vej førend du har noget oppe og kører.

    Mvh
    Mads

    Reply
  30. Pingback: Pimp your Facebook page II | Gorm's blog

  31. Lasse

    Hej Mads, Super guide til det facebook halløj. Jeg har dog et problem med den funktion med at folk som synes godt om kan se et billede og dem som ikke er kan se et andet. Når jeg ser på siden så kan jeg rigtig nok se det billede som jeg skal fordi jeg selv synes godt om, men fjerner jeg tilkendegivelsen så forsvinder det rigtige billede rigtig nok men men men.. Det billede som nu skal vises står stadig nedeunder det andet billede som nu er usynligt? Meningen er at det skal hoppe op og bytte plads med det billede som er forsvundet!

    Reply
  32. Mads Gorm Larsen Post author

    Hej Lasse

    Ja, min blog post trænger vist rigtig meget til en kærlig hånd, jeg mistede alle billedfilerne da jeg skiftede web udbyder. Men jeg gætter på at det problem består i at du kigger på siden som administrator af siden, prøv at logge på facebook med en person profil som ikke er administrator af siden.

    Mvh
    Mads

    Reply
  33. Ida

    Hej Gorm

    Jeg vil bare høre, om du ved, om det er muligt at lave sin FBML fanen om til landing page for ALLE som klikker på siden. I øjeblikket har jeg fået fanen til at være landing page for folk som ikke har klikket synes godt om. Men dem som allerede synes godt om virksomheden lander på vores væg og ikke på FBML fanen. Er der mulighed for at gøre den fane til default landing page for alle, eller har FB alligevel sat visse begrænsninger på mht. customizing?

    Reply
  34. Peter Laursen

    Hej Ida,

    Det kan du sagtens. Når du står på din væg (logget ind selvfølgelig) trykker du på “muligheder” og derefter “indstillinger”.

    “Standarddestinationsfane for alle andre:” Her kan du vælge hvilken side du vil have ikke-fans skal lande på.

    /Peter

    Reply
  35. Mads Gorm Larsen Post author

    @Ida & Peter – beklager den uhyggeligt lange svar tid – jeg tror ikke det kan lade sig gøre, det som Ida har i tankerne. Er du sikker på du ikke misforstår spørgsmålet Peter?

    Reply
  36. Peter Laursen

    Jeg var helt sikker på at jeg læste den rigtig da jeg svarede – men nu har jeg lige læst beskeden fra Ida igen, og det var jo slet ikke det hun spurgte om. Nej den løsning som Ida søger, mener jeg heller ikke at man kan klare.
    :-)

    Reply
  37. Mads Gorm Larsen Post author

    @Peter – det er helt ok – du skal have mange tak for at deltage, og svarer når jeg sover i timen.

    Reply
  38. Søren Bo

    Hej Mads!

    Mon du kan lokkes til at hjælpe en desperat mand!!!??
    Jeg er (næsten) nybegynder i den her html / fbml-verden og det er derfor at jeg simpelthen STJAL koden til din “study engineering abroad”, som jeg så igen har slettet det meste af og erstattet med min egen kode for at få skidtet til at virke…
    Der er så en lille YouTube-rest, som lissom’ ligger sig oven på de billeder med links, som jeg har lagt ind.. men, hvis jeg sletter de få YouTube-koder går det helt galt med mine billeder… Jeg har også stjålet koden til et baggrundsbillede og det kan jeg HELLER ikke få til at virke!! Hvad gør jeg forkert!!!??

    Du kan se siden her::: http://www.facebook.com/pages/KevinGibsonasia/314253961213?v=app_10531514314&ref=ts

    -Og koden ser (indtil videre) sånt’ ud::: -På forhånd tak for hjælp!!!

    <a class="UIButton UIButton_Gray UIButton_CustomIcon UIActionButton" href="v" rel="async-post"

    swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
    imgsrc=’http://www.madsgormlarsen.dk/study_abroad.jpg’ width=’520′ height=’1770’waitforclick=”false” />

    Den Skæve Vinkel ”Gør dig og kunderne tættere” ved at rådgive om hvordan du kommer i gang med din Facebook virksomhedsside på en god og fordøjelig måde.

    Tag selv styring for dig og din virksomhed!
    Bliv gearet til vækst på dine forudsætninger.
    Vi tilbyder første samtale uforpligtende, hvor vi finder de områder der fremadrettet skal arbejdes med.

    Basic BassMent ER det bedste sted for indspilning af vokal, mastering osv..

    Reply
    1. Søren Bo

      Njaa det fik jeg sku ikke meget ud af. Jeg får nok brug for at kunne ligge flere billeder ud, som linker til et andet sted…
      Noget helt andet er, at når jeg laver apps, her i firefox på min mac, virker det FINT, men i det øjeblik jeg skal se siden via Internet emploder på en XP-maskine er siderne bare blanke! -Suk! Men kunne få lyst til at skrive noget RIGTIG GRIMT til microsoft!!!

      Og IGEN på forhånd MANGE tak for hjælpen!!!

      Reply
  39. Anonym

    Jeg er altid med på at skælde ud på microsoft. Men måske er problemet min gamle kode som er fra før fb fik et smallere design ?
    Jeg tror under alle omstændigheder at du skal kaste dig over noget html læsning.

    Reply
  40. Frederikk

    Super spændende indlæg!

    Men jeg har lige et spørgsmål:
    Er der nogle der ved hvordan man viser én side til dem der der ikke har trykkel “Del” og en anden til dem der har. Altså præcis på samme måde som med , men bare med “Del” i stedet for “Synes godt om”.

    Så ville jeg blive rigtig glad.

    Reply
  41. Mads Gorm Larsen Post author

    Jeg ved ikke om det er muligt tvivler på det

    Reply
  42. Jonas H

    Hej Mads

    Super fin vejledning du giver på denne side. Sidder selv og leger lidt med noget FBML.

    Jeg har dog lige et spørgsmål:

    Hvis jeg gerne vil have det mine ikke-fans kan se, før det mine fans kan se i følgende;

    Her skriver du det dine fans skal se

    Her skriver du det som dem der ikke er fans skal se

    hvordan kommer den så til at se ud??

    Vh
    Jonas

    Reply
    1. Jonas H

      Hov… i den formel du skrev d. 12. februar 2010 til Anders.

      Reply
  43. Marlene

    Er der nogle tips og tricks til nye sider på Facebook. Disse tricks virker vist ikke mere… Og vil jo gerne ende op med en lækker facebookside.

    Reply

Skriv et svar til Marlene Annuller svar

Din e-mailadresse vil ikke blive publiceret.