Kako narediti IFrame zavihek?

11. marca so se možje pri Facebooku odločili, da ukinejo podporo FBML zavihkom. Stari zavihki, ki so bili ustvarjeni pred tem datumom še delujejo, novih pa ne moremo več postavljati.

To je sicer velika škoda za programersko slabše opismene, saj je bilo upravljanje s FBML zavihki sila enostavno, iFrame pa je nekoliko bolj zahteven. Vendar pa prinaša ogromno novosti, ki pa so v splošnem pozitivne, saj omogoča veliko več možnosti, kot FBML.

Kaj je iFrame?

Iframe (Inner frame) je HTML-jev dokument vgnezden v drug HTML-jev dokument. V spletnih straneh se ne uporablja pogosto, saj delo z okvirji večinoma velja za slabo prakso, predvsem zato, ker težko kontroliramo vsebino notranjega okvirja. Spletna stran, na kateri se v okvirju prikazuje »error 404«, pač ne velja ravno za programerski presežek. iFrame uporabljamo, ko moramo del spletne strani pogosto menjavati, vendar pa tega iz kateregakoli razloga ne moremo ali ne želimo storiti s popravki v kodi osnovne strani.

Prednosti in slabosti uporabe okvirjev

Prednost uporabe okvirjev je, da omogočajo veliko več, kot je omogočal FBML. Karkoli lahko naredite z uporabo HTML-ja, PHP-ja, JavaScripta in ostalih spletnih jezikov, lahko sedaj preko iFrame-a pripeljete tudi na dvorišče vaše Facebook strani, vse dokler vaš strežnik vse to podpira. Slabost uporabe okvirjev namesto FBML-ja so predvsem v tem, da je treba datoteke gostovati izven Facebooka, kar ni zastonj ali pa ni kvalitetno. Druga slabost je, da je izdelava zavihka nekoliko bolj zahtevna, vendar z navodili iz tega članka ter nekaj vaje to ne bo več težava.

1. korak: kreiranje HTML zavihka in spletno gostovanje
 

Pisanje HTML kode smo pri FBML zavihkih začeli pri znački "body" in končali pri koncu te značke. Vse ostale elemente je Facebook priskrbel sam od sebe, kar nas je oropalo dobršnega dela funkcionalnosti. Sedaj bo treba seveda poskrbeti za vse elemente spletne strani. Za vse nevešče priporočam branje vodičev ali pa uporabo katerega izmed brezplačnih HTML urejevalnikov, ki so vam lahko v veliko pomoč.

a. Brezplačni programi, ki jih lahko uporabimo
Na spletu boste našli obsežno zbirko brezplačnih WYSIWYG (»kar vidiš, to dobiš«) spletnih urejevalnikov, ki so za začetnike še najbolj primerni, vseeno pa pred izdelavo spletne strani v teh urejevalnikih priporočam vsaj bežen pogled na internetne vodiče za HTML in CSS. Eden najbolj uporabljenih in HTML urejevalnikov je Komodo Edit, seveda pa lahko preizkusite tudi katerega drugega, ki bi vam morda celo bolj ustrezal.

b. Možnosti brezplačnega gostovanja
Za gostovanje vaših zavihkov lahko izberete brezplačno gostovanje, ki ga ponuja kar nekaj spletnih strani. Vendar pa je zanesljivost takih strežnikov vprašljiva, poleg tega pa ti strežniki pogosto ne podpirajo izvajanje zahtevnejših programskih ukazov, ki jih na primer najdemo v PHP-ju. Nekaj spletnih servisov, ki ponujajo brezplačno goostovanje boste našli tukaj. Brezplačni spletno gostovanje vam večinoma nudi tudi vaš ponudnik internetnih storitev, preverite na njihovi strani. Lahko pa se seveda odločite za plačljivo gostovanje, ali pa to uredite na vašem obstoječem www strežniku.

2. korak: registracija Facebook developer računa

Svoj račun odprete in registrirate na spletnem naslovu http://developers.facebook.com, kjer kliknete na »Moje aplikacije/My apps«. Po kliku nas bo pričakal že znan obrazec za potrditev aplikacije.

Novo aplikacijo ustvarimo s klikom na gumb »+ ustvari novo aplikacijo«, če še niste Facebooku sporočili svoje telefonske številke, bo to sedaj na žalost potrebno. Vpišite telefonsko številko in prejeli boste SMS s potrditveno kodo, ki jo vpišete v nadaljevanju, Ko zaključite postopek, bo Facebook prikimal v odobravanju, da ste vi res vi, in vam dovolil, da nadaljujete z ustvarjanjem zavihka.

3. korak: ustvarimo novo aplikacijo

Klik na »Moje aplikacije« in »Ustvari novo aplikacijo« in svoji aplikaciji smo ravno sprostili prostor pod soncem. Vpišite poljubno ime, označite, da se strinjate s pogoji, čaka vas še CAPTCHA in vaša aplikacija je nared za urejanje.

Ime aplikacije ni relavantno za vaše oboževalce, ker se z njim ne bodo srečali. Izberite ga tako, da ga boste na seznamu vaših aplikacij čim lažje našli pri morebitnem urejanju aplikacije. Opis pišite po presoji – če gre za aplikacijo s široko distribucijo ga napišite natančno in razumljivo, za pristajalni zavihek pa to ni pomembno. Logotip bo viden le na strani aplikacije, ki jo vaši uporabniki ne bodo videli, je pa zato toliko bolj pomembno, da izberete ikono, ki mora biti dimenzij 16x16 pikslov. Ikona se prikaže ob imenu aplikacije v meniju na levi strani. V primeru, da organizirate nagradno igro in želite to izpostaviti na zavihku uredite tudi povezavo do pogojev nagradne igre. Nenazadnje lahko dodate še vaše prijatelje kot administratorje aplikacije, v kolikor se zgodi, da v krizni situaciji vi nimate dostopa do spleta.

4. korak: povežimo našo stran z aplikacijo

Na desni strani kliknemo »Web site« in prikaže se nam naslednje okno, kjer vpišemo lokacijo našega zavihka (vpišemo le mapo, kjer se nahaja glavna datoteka poimenovana index.html) ter domeno s končnico. Domena je enota v našem URL-ju, ki se skriva med zadnjo piko v URL-ju in končnico. Pri http://www.matejspehar.si je domeno s končnico torej matejspehar.si, pri http://developers.facebook.com pa facebook.com.

5. korak: spojimo zavihek s Facebookom

V levem meniju kliknemo na »Facebook integration«, ker moramo vpisati sledeče podatke:

V »Canvas page« določimo naslov, preko katerega bomo dostopali do naše aplikacije, vsebuje pa lahko le male črke, vezaje in podčrtaje. V »Canvas URL« še enkrat napišemo lokacijo naše strani (brez index.html). V »Secure Canvas URL« vpišemo povezavo do pristajalnega zavihka, ki je gostovan preko varnega protokola https, če ta seveda obstaja. Če ne želimo grdih drsnikov ob strani, odkljukamo še polje »Auto-resize«.

Uredimo še ime zavihka (to ime bo vidno vašim uporabnikom v meniju na levi strani) in pa naslov URL zavihka, tokrat z index.html. Shranimo vse kar smo uredili do sedaj in preusmeri nas na osnovno stran naše Facebook aplikacije.

a. Varna ali »nevarna« povezava?

Slabost je definitivno ta, da vsa spletna gostovanja ne omogočajo »varnega načina«, ali pa ga zaračunavajo posebej. Vendar pa se, odkar so pri Facebooku zaradi vdora v račun Marka Zuckenberga uvedli varno brskanje, vedno več ljudi odloča za to opcijo. In tem se – če ne vpišemo tudi varnega URL-ja – naš zavihek na žalost ne bo prikazal. Presodite, koliko je teh uporabnikov v vaši ciljni skupini in v kolikšni meri jih to lahko odvrne od lajkanja.

6. korak: pokažite zavihek oboževalcem na vaši strani

Ko smo shranili spremembe, ki smo jih naredili na vseh treh področjih se torej vrnemo na nadzorno ploščo aplikacije, kjer najdemo povzetek vseh pomembnih informacij o aplikaciji. Kliknemo na »Application profile page« in znašli smo se na strani naše aplikacije.

V meniju spodaj desno izberemo »Dodaj na mojo stran« in iz seznama strani, na katerih smo administratorji izberemo željeno stran.

Tako, prišli smo do konca.  Veselo na delo!

Follow @MatejSpehar