Pagina de aterizare pe Facebook (Fan Page & FBML)

La cererea unui cititor, am intocmit o lista de intrebari si raspunsuri cu privire la introducerea anumitor elemente FBML intr-o pagina de aterizare pe Facebook, pe care sper sa le gasiti utile. Lista este completata de cateva resurse, de unde puteti afla mai multe detalii despre personalizarea unui tab al paginii de fani cu ajutorul FBML (Facebook Markup Language).

Pentru realizarea unei pagini de aterizare pe Facebook in scop comercial, este interesant de citit >Anatomia Paginii de Aterizare Perfecte.

Cum se adauga aplicatia FBML in Fan Page ? Cum marchezi tab-ul ca pagina de aterizare pentru noi vizitatori ?

Un articol de la Mashable explica in detaliu acest proces > Build Facebook Landing Page.

Cum inserezi un videoclip intr-o pagina de aterizare cu ajutorul FBML?

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/Video_ID&autoplay=1'
imgsrc='http://img.youtube.com/vi/ Video_ID /2.jpg' width='340' height='270' />

Cand am facut aceasta pagina de aterizare, mi s-a parut mult mai interesant sa pun un clip in locul unei simple imagini.

Cum adaugi butonul de Share in FBML?

<div><fb:share-button class="url" href="http://www.facebook.com/DenumireaPaginii" />
</div>

Cum plasezi un buton de Twitter in FBML?

Odata ce ai plasat un buton de Share pentru Facebook, ai putea adauga un widget simpatic pentru contul tau de Twitter, cum este cel din exemplul de mai jos, al carui cod il puteti genera cu ajutorul VistaPrint.

<a href="http://www.twitter.com/Ana_Matei"> <img src="http://www.vistaprint.com/vp/images/b09/misc-graphics/social_networking/Twitter-125x125-004.png" alt="Twitter Widgets" /> </a> <br/> Powered By <ahref="http://www.vistaprint.com">Vistaprint</a>

Cum introduci codul de Analytics ?

Monitorizarea activitatii pe pagina de aterizare este un lucru destul de usor de facut: adaugi un nou cont in Google Analytics si inserezi UA. In general, folosesc si un URL Shortener ca goo.gl pentru toate URL-urile folosite in pagini de aterizare pe Facebook.

<div><fb:google-analytics uacct=”UA-XXXXXXX-X″ />
</div>

Cum sa-ti diversifici mesajele in pagina de aterizare?

Sa zicem ca ai vrea sa oferi utilizatorilor o noua imagine la fiecare accesare a paginii tale de aterizare…

<fb:random pick="1">
<fb:random-option>
<img src="http://site.ro/image-1.jpg" />
</fb:random-option>
<fb:random-option>
<img src="http:// site.ro /image-2.jpg" />
</fb:random-option>
<fb:random-option>
<img src="http:// site.ro /image-3.jpg" />
</fb:random-option>
</fb:random>

Cum sa afisezi 2 mesaje diferite, unul pentru Fani si unul pentru vizitatori noi) ?

<fb:visible-to-connection bgcolor="#660000">
<div style="position:absolute; top:5; left:15;">Viziteaza site-ul<a href="http://site.ro" style="color: #cc9999;">www.site.ro</a></div>
<fb:else>
<div style="position:absolute; top:5; left:15;">Daca vrei sa te tinem la curent cu noutatile de pe site-ul nostru, nu uita sa dai Like !</div>
</fb:else>
</fb:visible-to-connection>

Cum soliciti fanilor sa-si invite prietenii pe pagina ta? (Send Facebook Page Invitation Button)

Daca butonul de Share nu a functionat…

<fb:fbml>
<fb:request-form
action="index.php"
method="POST"
invite="true"
type="NumeleAplicatieiTale"
content="Textul tau. <?php echo htmlentities("<fb:req-choice url=\" CANAVAS URL \" label=\"Authorize My Application\"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="Invita-ti prietenii pe NumeleAplicatieiTale.">
</fb:request-form>
</fb:fbml>

! INFO:

De retinut ca aceste snippets FBML nu pot fi utilizate ca atare, ele reprezentand doar exemple de implementare a anumitor elemente intr-o pagina de aterizare pe Facebook. A se analiza inainte de utilizare!

Resurse:

Facebook Developers

FBM Hell

Labnol

Resurse: Facebook Marketing