Stilizovanje Fejsbuk Like Box-a

Dakle, Like Box je onaj Fejsbukov dodatak koji stavljate na vaš sajt kako bi ga povezali sa vašom Fejsbuk stranicom. U njemu se nalaze Like dugme, statusi sa vaše stranice, i informacija koliko ljudi je već lajkovalo vašu stranicu sa izlistanih nekoliko random ljudi. Naravno, možete odabrati koje od ovih stvari hoćete da se prikažu, a koje ne. To sve lepo podesite na stranici https://developers.facebook.com/docs/reference/plugins/like-box, kliknete na "Get Code" i od ponuđena dva koda, jedan od njih (bilo koji) ubacite u HTML kod vašeg sajta. Time ste dobili taj klasičan box koji možete videti na većini sajtova. Kako izgleda stilizovan box, možete videti kao primer na dnu Web Arene.

Verovatno ste već probali da pomoću CSS-a stilizujete dobijeni box, ali vam iz nekog razloga to nije pošlo za rukom. To je zato što sa CSS-om nije moguće stilizovati sadržaj ubačen pomoću iframe-a. Kako iframe predstavlja uvučenu stranicu unutar postojeće stranice, nju možete stilizovati samo unutar nje same. Dakle, kako onda stilizovati ovu stranicu koju vam je prosledio Fejsbuk?

Ovo ranije nije bilo moguće, međutim, uvidevši ovu stvar, Fejsbuk je uveo opciju koja omogućava stilizaciju box-a, a ona se teorijski izvršava na sledeći način:

• vi prosledite Fejsbuku vaš CSS fajl sa stilovima koji definišu elemente iz Like Box-a
• Fejsbuk taj CSS fajl kešira kod sebe na serveru i vrati ga unutar Like Box iframe-a

U prevodu, potrebno je da u onaj kod koji ste generisali, dodate samo još jednu opciju, i to je sve.

Ispod ću vam pokazati kako da dodate tu opciju na oba koda koja ste generisali. Da bi ste se lakše snašli, kodove koje ste dobili zgusnute ću samo raspetljati da bi bilo preglednije. Možda će vam se učiniti teško i nerazumljivo, ali uveravam vas da je prilično lako.

iframe

Kao što ćete primetiti, preko ovog koda vi prosleđujete Fejsbuku sve one opcije koje ste odabrali prilikom podešavanja: širinu box-a, url vaše stranice, postove sa stranice, itd... Među njima postoji parametar src sa kojim Fejsbuku šaljete url vaše stranice sa još nekim dodatnim parametrima (istakao sam redove na koje da obratite pažnju). Svaki parametar je odvojen sa & kodom.

<iframe
    src="http://www.facebook.com/plugins/likebox.php?
        href=http%3A%2F%2Fwww.facebook.com%2Fwebarena&amp;
        width=292&amp;
        colorscheme=light&amp;
        show_faces=true&amp;
        border_color&amp;
        stream=false&amp;
        header=false&amp;
        height=62" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:292px; height:62px;" 
    allowTransparency="true">
</iframe>

Sve što je sada potrebno da uradite je da na kraju prosleđenih parametara dodate još jedan.

<iframe
    src="http://www.facebook.com/plugins/likebox.php?
        href=http%3A%2F%2Fwww.facebook.com%2Fwebarena&amp;
        width=292&amp;
        colorscheme=light&amp;
        show_faces=true&amp;
        border_color&amp;
        stream=false&amp;
        header=false&amp;
        height=62&amp;
        css=http://webarena.rs/templates/webarena/css/facebook.css?3" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:292px; height:62px;" 
    allowTransparency="true">
</iframe>

Primietili ste da smo na kraj poslednjeg parametra koji je bio height=62 dodali onaj kod za odvajanje & i nakon toga dodali parametar css koji predstavlja putanju ka vašem CSS fajlu. Ali primetićete još nešto zanimljivo, a to je onaj upitnik i broj posle njega na kraju. Oni su u stvari i najbitnija stvar od svega. Kako sam na početku rekao da se taj CSS fajl kešira na Fejsbukovom serveru, potrebno je da za svaku izmenu u CSS fajlu promenite i taj broj na kraju, kako bi Fejsbuk povukao novi fajl. Dakle krenite od 1 pa dokle dogurate. :)

XFBML

Drugi kod koji je Fejsbuk ponudio je mnogo lakši za izmeniti. U principu, logika je potpuno ista.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box 
    href="http://www.facebook.com/webarena" 
    width="292" 
    show_faces="true" 
    border_color="" 
    stream="false" 
    header="false">
</fb:like-box>

Ovde je isti onaj css parametar potrebno dodati bilo gde medju HTML parametre Fejsbukovog elementa <fb:like-box>

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box 
    href="http://www.facebook.com/webarena" 
    css="http://webarena.rs/templates/webarena/css/facebook.css?3"
    width="292" 
    show_faces="true" 
    border_color="" 
    stream="false" 
    header="false">
</fb:like-box>

Obratite pažnju samo da ne pobrkate znake navoda prilikom upisa css parametra. U prvom slučaju se ne stavljaju (onaj na kraju zatvara src parametar koji je otvoren na početku), dok se u drugom slučaju stavljaju navodnici.

Sve što je sada potrebno, je da lepo stilizujete vaš Fejsbuk Like Box. Kako bi ste skratili vreme prepisivanja elemenata koje box sadrži u vaš CSS, možete se poslužiti našim CSS-om i izmeniti ga. :)

Još jedna stvar, koja se tiče samog CSS stilizovanja, je da CSS3 stilovi za sada nisu podržani.