Kako napraviti Facebook landing page sa iFrame-om

Ne tako davno napisao sam malo upustvo za postavljanje Facebook landing page sa FBML-om, ali pošto je Facebook definitivno izbacio FBML iz upotrebe, red je da napišem i kratko upustvo za postavljanje novih Facebook landing pages sa iFrames.

Iako je iFrame praktično otišao u penziju, Facebook ga je ponovo oživeo, dopuštajući da kroz njihovu mrežu postavljate sadržaj koji vi želite. U skrivene namere Facebook-a ne želim da ulazim.

Koja je razlika između FBML i iFrames

FBML je ustvari HTML kod koji se upisuje u tekst editor vaše stranice na Facebook-u.

IFrames su stranice unutar stranica. HTML naredba koja je pomalo bila zaboravljena zbog loše optimizacije i pozicioniranja sajta na pretraživačima. Sa ovom mogućnošću otvara vam se mogućnost da napravite kompletan sajt i da ga uvezete u Facebook i da imate svoj sajt na “Fejsu”.

Kako da postanete “Verifikovani Facebook Developer”

Da biste postavili Facebook landign page sa iFrames potrebno je da postanete verifikovani Facebook Developer. Ovo je proces od par minuta i objasniću ga u 2 koraka.

Korak 1:

Idite na Facebook Developers sajt

Korak 2: Verifikacija naloga

Kliknite na “Set Up New App” i ako do sada niste pravili aplikacije za Facebook, bićete redirektovani na stranicu gde treba da potvrdite vaš identitet putem mobilnog telefona ili platnom karticom.

Ja sam svoj nalog verifikovao putem mobilnog telefona. Stigao mi je SMS sa kodom koji sam uneo na Facebook i ceo proces verifikacije je time završen.

Izrada aplikacije

Korak 1: Dizajn strane

Sledeće što je potrebno jeste da uradite dizajn stranice koju želite da postavite na Facebook. To možete uraditi u bilo kom programu za crtanje. Kako biste što pre završili ovaj posao, predlažem vam da izaberete neku proizvoljnu sliku, a da se kasnije vratite na ovaj deo i da dizajnirate svoju novu Facebook landing page.

Napomena: Facebook Aplikacija je široka 760 piksela, a sam tab 520 piksela i predlažem vam da kada pravite aplikaciju širina bude malo manja od 520 piksela kako bi se stranica lepo prikazala. Takođe uzmite u obzir da ukoliko imate scroll sa desne strane, automatski vam se širina stranice smanjuje na 503 piksela.

Korak 2: Izrada HTML strane

Nakon što ste kreirali sliku, potrebno je da napravite HTML stranicu u vašem omiljenom tekst ili HTML editoru.

Napomena: Kada kreirate stranicu, predlažem vam da sve fajlove (slike, stilove, animacije i slično stavljate u isti folder kako biste kasnije lakše uploadovali fajlove na server.

Korak 3: Postavljanje fajlova na hosting

Kada ste napravili vašu html stranu, potrebno je da fajlove postavite na server. Jedan od načina je da to uradite putem FTP-a. Kako biste fajlove organizovali na najbolji način, postavite fajlove u novi folder. Naziv izaberite proizvoljno.

Ja sam svoj fajl nazvao Index.php i uploadovao u folder “iframefb” tako da moj link izgleda ovako: http://www.igorinjo.com/iframefb/index.php

Da biste bili sigurni da će vam se stranica prikazati onako kako ste želeli, testirajte vaš link.

Ovo do sada je bilo najteže jer zahteva malo znanja, ostalo se rešava u par klikova.

Vratite se opet na Facebook.

Podešavanje Facebook aplikacije

Korak 1: Kreiranje aplikacije

Nakon što ste verifikovali nalog na Facebook Developer, došao je na red da podesite vašu prvu aplikaciju. Kliknite na “Set up new App” i nakon što se otvori prozor sa slike ispod u polje “App Name” ukucajte naziv aplikacije a zatim kliknite na “Create App” i time je aplikacija napravljena. Jednostavno zar ne! :)

Korak 2: Podešavanje aplikacije

Kada ste kreirali aplikaciju, potrebno je da uradite par podešavanja. Na delu “About” je potrebno da upišete “Application Name” i “Description” i da ukoliko želite postavite ikonicu i logotip.

Sledeće što treba da podesite se nalazi na kartici “Web Site“. U polje “Site URL” je potrebno uneti putanju do vaše aplikacije (vratite se iznad i pogledajte koja je putanja do index.php fajla kada ste ga uploadovali na server). Moja putanja je http://www.igorinjo.com/iframefb/.

U kartici “Facebook Integration” potrebno je da unesete nekoliko podataka. U polje “Canvas Page” unesete željenu facebook adresu aplikacije, a u “Canvas URL” putanju do vaše aplikacije na serveru. Kao “Canvas Type” stavite “IFrame“. “IFrame Size” podesite na “Auto-resize“. Jako bitna stvar je da podesite “Tab Name” onako kako želite da vam se prikazuje naziv dolazne stranice na Facebook-u. Ja sam upisao Igorinjo Blog (ograničenje je 16 karaktera), U polje “Tab URL” uneti naziv fajla sa servera. U mom slučaju to je index.php, a u vašem to može biti neko drugo ime fajla.

Kada ste sve ovo uradili, možete kliknuti na “Save Changes“.

Instalacija Facebook aplikacije

Ako ste već ranije instalirali neku aplikaciju, ovaj deo vam je onda već poznat.

Korak 1: Idite na stranicu profila vaše aplikacije

U meniju sa desne strane kliknite na opciju “Application Profile Page“.

Korak 2: Instalacija aplikacije na vašu Facebook stranu

Da biste instalirali aplikaciju na vašu Fun stranu potrebno je da kliknete na “Add to My Page” u meniju sa leve strane. Otvoriće vam se prozor sa svim stranama na kojima ste administrator. Izaberite stranicu na koju želite da dodate aplikaciju.

 

Korak 3: Pogledajte vašu aplikaciju

Vaša aplikacija je sada instalirana na Facebook stranu i možete je videti u meniju sa leve strane. Sada je potrebno da vidite još da li aplikacija stvarno radi. Kliknite na nju. Treba da vam se prikaže slika koju ste izabrali. U mom slučaju to su poslednji tekstovi sa Bloga.

Korak 4: Postavite aplikaciju kao Landing Page

Ako želite da vam novi tab bude prikazan kao “Landing page” svim novim posetiocima vaše fan strane potrebno je da u “Manage Permissions” u padajućem meniju “Default Landing Tab” izaberete aplikaciju. U mom slučaju to je Igorinjo Blog.

Potencijal iFrame-a

Kao što sam u tekstu napomenuo, putem iFrame-ova možemo da pravimo bukvalno mini sajtove u okviru Facebook-a. Prepustite se mašti i dizajnirajte vašu Facebook stranu onako kako vi želite. Mogućnosti su nezamislive.

Da li vam se svidelo ovo mini upustvo?

Ako vam se svidelo ovo upustvo, podelite svoje utiske samnom kroz komentare, voleo bih da čujem vaša zapažanja i mišljenja. Takođe bih vas zamolio da lajkujete stranicu Bloga na Facebook-u.

 

28 Comments to “Kako napraviti Facebook landing page sa iFrame-om”

  • Kako napraviti Facebook Landing page | Igor Jovanovski Blog 18. marta 2011. u 00:26

    […] Updade: 18.03.2011. – Nakon što je Facebook izbacio FMBL strane i dozvolio da se prave stranice putem iFrame-a, napravljeno je kratko upustvo “Kako napraviti Facebook Landing page sa iFrame-om“. […]

  • Dušan 18. marta 2011. u 09:11

    Hvala Igore, imam neku test aplikaciju koju sam radio u Silverlight-u, pa ću baš probati da odradim sve po uputstvu.

  • @VeljkoDjuric 24. marta 2011. u 15:30

    A kako se postiže, da URL stranice na FB bude u formatu facebook.com/imestranice. Ne mislim na prfil.
    Kao ovo npr https://www.facebook.com/vukajlija

  • XIII 26. marta 2011. u 23:29

    Igore, svaka cast za tutorial. Prije nego se bacim na isti, da li je moguce preko ovoga imati vise stranica ili samo jednu?

  • XIII 27. marta 2011. u 01:20

    Ja sam zanemario stranicu svoje firme i potpuno se preorjentisao na FB. Mnogo kvalitetnije rezultate mi donosi. A znaci moze vise stranica na ovaj fazon? Odlicno! A imam jedan problem, pa ako moze savet. Kada preusmerim domen na svoju FB stranicu, prvo mi se pokaze FB logo, pa tek klik na to vodi na stranicu. Ima li tome leka?

  • XIII 27. marta 2011. u 01:25

    To je odlicno, onda cu moci odraditi ceo sajt na FB stranici. A ja sam jedan od tih sto su preusmerili domen na FB stranicu i ugasili sajt firme :) Nego, kad smo vec kod toga. Kad preusmerim domen, prvo mi prikaze FB logo, pa tek klik na to vodi na stranicu. Moze li se kako zaobici?

  • Stojan 2. aprila 2011. u 22:17

    http://apps.facebook.com/postermovie/

    Ako nisi logiran Chrome pokazuje oko 720 width
    Opera skoro nista
    Firefoks oko 800 width

    Ako si logiran smanjuje se na 520 width kada se gleda preko
    fejsbuk strane

    http://apps.facebook.com/stojankicevo/
    Ovde radi i muzika, fles, java.. ali nemam 720 width

  • xddd 21. avgusta 2011. u 11:01

    kako da napravim ono sa 3 koraka like share i da ode na taj link .Ako mozete objasniti i dati html ;:)

  • Facebook fan stranice i sigurnosni protokoli | Igor Jovanovski Blog 21. septembra 2011. u 13:34

    […] tehničke strane Facebook pages su samo Iframe stranice i kao takve ukoliko se koristi bezbednosni protokol HTTPS nije moguće prikazati stranicu koja […]

  • Igor 17. decembra 2011. u 22:15

    KAko da na svoju fb stranicu napravim ono sa tri koraka like,share pa tek onda da ode na onaj link.Ako moze neko da mi objasni sta treba sve da uradim,posaljite mi na onligile97@gmail.com Hvala unapred :)

  • Vanja 15. januara 2012. u 10:29

    Da li meni neko može pomoći? Naime, nikako da mi stigne kod kojim bih potvrdila identitet na svom profilu i ne mogu se ulogovati u njega. Već danima pokušavam da dobijem kod i ništa… to pokušavam sa mts karticom, ali sam čitala na nekom blogu da Srbija trenutno ima problem sa identifikacijom, šta da radim? Ako imate neko rešenje obavestite me.

  • Vanja 15. januara 2012. u 10:29

    e da mail je ivic.vanja@yahoo.com

  • Kata 26. januara 2012. u 00:25

    Ja imam isti problem kao i vanja ako neko ima resenje neka pomaze.

  • ZgrabiPopust 29. januara 2012. u 11:10

    Dobar rad, samo tako nastavi! Što više ovakvih blogova to bolje! Pozdrav!

  • Facebook fan strane prelaze na Timeline | Igor Jovanovski Blog 3. marta 2012. u 12:17

    […] ponovo uvodi novine na Fan stranicama. Nakon što je izbacio FBML (Facebook Markup Language) i uveo iframe za tabove i uveo sigurnosne protokole za tabove iz Facebook-ove kuhinje izlazi Timeline za fan […]

  • Dino 5. marta 2012. u 18:20

    like facebook dino.pb@hotmail.com 😀

  • Zlatko 15. aprila 2013. u 16:18

    Postovani,
    Interesuje me da kako da postavim slike ili video na fun stranici, a da se ne mogu videti ukoliko niste prethodno lajkovali stranicu?

    Pozzzz

Post comment

Pratite me na twitteru! Pratite me na Twitteru!
Web developer, SEO, Internet marketing, poznavalac društvenih medija

Istaknuti radovi

SEO činjenice

Poslednji tekstovi

Tagovi

Zanimljivosti

Linkovi

Facebook Fun Strana

Komentari