Skip to content

Kako narediti Facebook zavihek z iFrame-om

Zadnje čase izgleda, da pišem samo še o Facebooku, ampak hej, kuj železo, dokler je vroče=) Tokrat si bomo pogledali, kako v par korakih narediti zavihek na Facebook strani z uproabo iFrame-a.

Facebook je že pred časom oznanil, da ne bo več podpiral aplikacije Static FBML, prek katere si z vnosom HTML kode in dodatnih Facebook značk lahko oblikoval zavihke na svojih Facebook straneh. Namesto tega na zavihkih sedaj podpira iFrame. To je na eni strani dobra  novica, saj je iFrame zgolj vključena spletna stran v drugo spletno stran, kar pomeni, da je lahko tam, kar ti srce poželi, po drugi strani pa je produkcija zavihkov sedaj postala malenkost bolj zapletena. A brez skrbi, sledijo natančna navodila, kako se tega lotiti.

Prednost iFrame zavihkov je v tem, da sedaj lahko nemoteno vstavljamo flash, Youtube posnetke, Google mapse itd. Poseben žur pa predstavlja tudi možnost vstavljanja Google Analytics kode, ki je FBML zavihki niso podpirali. Ne bomo odkrili tople vode, če rečemo, da se veeelika večina ogledov zgodi v uporabnikovem news feedu in na zidu strani, a sedaj imamo lahko končno bolj konkretno oceno, kaj se na zavihkih dogaja.

1. Znanje HTML in gostovanje

Tega ta zapis sicer ne pokriva, a za začetek moraš znati HTML. Prej si potreboval svoj strežnik samo za spletno gostovanje datotek (fotografije, dokumenti), ki si jih prikazoval na Facebook zavihku, sedaj pa potrebuješ gostovanje (in domeno) tudi za HTML datoteke. Če gostovanja še nimaš, lahko poskusiš recimo na Prašiček.si, kjer imajo ugodne cene in dobro podporo.

2. Produkcija zavihka

Tudi tu ne bom odkrival tople vode, saj bo vsak moral že sam vedeti, kakšno vsebino bo dal v zavihek. Če pa slučajno nimaš idej in ti manjka pomoč pri produkciji, pa me kontaktiraj na anej@anej.si in bomo skupaj našli pravo rešitev zate ;) Kar je tu potrebno paziti, je v glavnem samo širina zavihka, ki znaša 520px. Ko je koda pripravljena, jo skupaj z datotekami in grafikami naložiš na strežnik.

HTML datoteka, ki se prikaže, ko uproabnik obišče zavihek, mora biti poimenovana z “index.html”. To je potrebno narediti zaradi tega, ker nas bo Facebook v naslednjih korakih vprašal za mapo na strežniku in ne za URL HTML datoteke. Ker bo HTML datoteka imela ime “index.html”, bo Facebook lahko razumel to mapo in prikazal to datoteko kot domačo stran zavihka.

3. Postani Facebook razvijalec!

To se sliši kar kul, a?;) Facebook tu pa tam rad zaplete življenje velikega števila ljudi, tudi v tem primeru je tako, saj moraš za prikazovanje iFrame zavihka na Facebook strani najprej ustvariti Facebook aplikacijo. V brskalniku vneseš naslov facebook.com/developers/ in klikneš na Set Up New App:

registracija facebook razvijalec nova aplikacija

Če svojega Facebook računa še nisi potrdil s telefonsko številko ali kreditno kartico, se ti pokaže spodnje opozorilo. Žal, brez potrdive svojega uporabniškega računa ne moreš nadaljevati.

regitracija-facebook-razvijalec

4. Poimenuj svojo aplikacijo in potrdi strinjanje s pogoji

Ime aplikacije je poljubno, služi za razlikovanje aplikacij na seznamu in to ni še ime zavihka. Potem potrdiš strinjanje s pogoji; v koraku po kliku na Create App pa te čaka še vnos captche, tako da Facebook ve, da nisi robot;)

iframe poimenuj aplikacijo

5. Vnesi opis, logo in (fav)icon aplikacije

V About področju je pomembno predvsem, da vneseš ikono aplikacije, saj bo ta predstavljala zavihek na seznamu. Če želiš, vnesi še opis in logotip aplikacije.

iframe about

6. Vnesi URL strani

V levem meniju se premakni na “Web Site” področje. Tu boš sedaj dodal URL strani. Facebook hoče v tem primeru samo mapo, kjer so datoteke strani, ki si jo ustvaril. URL vneseš v obliki http://anej.si/facebook-zavihek/.

iframe-site-url


7. Facebook integracija

V levem meniju se premakneš na “Facebook Integration” področje. Tu najprej vpiši URL Facebook aplikacije. Npr. http://apps.facebook.com/landing-tab/. Potem ponovi URL strani iz prejšnjega koraka, ki je v obliki http://anej.si/facebook-zavihek/. Potem pa je pomembno, da izbrereš še možnosti iFrame in Auto-resize, da se na zavihku ne prikazujejo scroll bari.

iframe fb integracija

Potem pa se premakni v istem področju na podpodročje “Page Tabs”, kjer izbereš ime zavihka, ki se potem tudi prikazuje na Facebook strani, izbereš iFrame za Page Tab Type in vneseš popoln URL “index.html” datoteke.

iframe page tabs

9. Klikni Shrani in namesti aplikacijo na zavihek

Shrani vse, kar si naredil. Po kliku si preusmerjen na stran s podrobnostmi aplikacije. V desnem meniju nato klikneš na Application profile page.

iframe app page

Ta klik te vodi na stran aplikacije. V aplikaciji samo še klikneš “Add To My Page” in s seznama izbereš stran, na katero želiš dodati aplikacijo (no, zavihek).

iframe add to page


Voila in smo na koncu;)


DOBER ZAPIS? NE ZAMUDI NASLEDNJEGA.
Pridruži se naročnikom, ki vsako sredo prejemajo zadnje objave z bloga in vsebine na temo grajenja posla na internetu in uporabniške izkušnje.
Tvoj e-mail naslov seveda ostane samo pri meni.
  • Fajn opisan postopek. Edino pripombica: “index.html” ni nujen.

  • Ja, a dal not, da je za zih ;)

  • Kakorkoli: FB je otežil delo administratorjem strani, predvsem tistim, ki so prej znali le kopipejstat html v FBML. Zdaj pa morajo kar naenkrat vsi postat FB developerji :-)

  • Zadeva v resnici sploh ni tako težavna…

    1. greš na stran od “Static HTML: iframe tabs”
    2. klikneš “Add Static HTML to a Page”
    3. izbereš strani na katere želiš iframe dodati
    4. od tu naprej pa se poslužiš starega dobrega copy/paste (pod profilno sliko je treba le izbrati “zavihek/stran”, ki jo želiš urejati in počakati 1-2 sec. da se na desni strani prikaže vse potrebno

  • Watiz

    Ja jaz imam tudi en komentar… preko https varne povezave stran ne deluje

  • SchPN

    Pozdravljen… 

    Se mi zdi, da je tukaj pravo mesto za tole vprašanje. Torej…

    Imam problem, ki se navezuje na kreiranje costum iFrame.ov za FB page. Ker bi se rad izognil temu, da bi bil FB page kakorkoli povezan z mojim osebnim profilom sem kreiral račun za stran brez profila za brand or product… vse ok…
    Problem pa je, da sedaj ne morem dostopati preko tega računa do linka https://developers.facebook.com/apps, s katerim bi dodal par dodatnih tab.ov za dobrodošlico, promocije itd…Za kakršno koli pomoč ali nasvet bom zelo hvaležen!LP, Rok

  • Verjetno moraš prej potrditi ta account prek mobilnega telefona.

  • SchPN

    Ne pomaga… ko grem na ta link me vedno vrže na osnovno stran profila.

    Mogoče še kakšna ideja?

  • Poskusiš z https://developers.facebook.com/ in se “registriraš” kot developer?