Kako napraviti Facebook landing page sa iFrame-om
Igor Jovanovski 
Projekti 
facebook, facebook aplikacije, facebook application, fan strana, FBML, iframe, landing page
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.
27 Comments to “Kako napraviti Facebook landing page sa iFrame-om”
Post comment
Pratite me na Twitteru!Web developer, SEO, Internet marketing, poznavalac društvenih medija
Istaknuti radovi
SEO činjenice
- 40% korisnika odustaje posle pregledanih 10 rezultata pretrage
- Povratni linkovi (backlinks)
- Broj poseta pre kupovine na sajtu
-
Arhiva SEO činjenice »
Poslednji tekstovi
- Formular – Nalog za službeno putovanje u zemlji
- Iskustvo sa Vip mobile mobilnim operaterom u Srbiji
- Facebook aplikacije i varanje u nagradnim konkursima sa osvrtom na Bambi JOŠ foto konkurs
- Kako otvoriti firmu (doo) u 10 koraka
- Neke stvari o SEO (search engine optimization) – Optimizacija sajtova
Tagovi
Zanimljivosti
- Težak je posao komercijaliste
- Devojčica koja je ućutala svet na 6 minuta
- Tehnološki hendikepiran
-
Arhiva Zanimljivosti »
[…] 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“. […]
Hvala Igore, imam neku test aplikaciju koju sam radio u Silverlight-u, pa ću baš probati da odradim sve po uputstvu.
Nema na cemu. Ako negde zapnes, slobodno se javi da ti pomognem
Radi sve kako treba, hvala još jednom. 🙂
Jel moze link do aplikacije?
Može. 🙂 http://apps.facebook.com/prokuplje-mapa/
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
Sakupis 25 lajkera i mozes da editujes stranu (basic settings) i da izaberes zeljeno ime.
primeri mojih strana su: http://www.facebook.com/IgorJovanovskiBlog http://www.facebook.com/kameleonlab
Igore, svaka cast za tutorial. Prije nego se bacim na isti, da li je moguce preko ovoga imati vise stranica ili samo jednu?
Moguce je sve. od mini sajta (sa vise stranica) do vise tabova od kojih jedan moze a ne mora da bude landing page.
Iskreno mogucnosti su ogromne, sto moze dovesti do toga da se neke kompanije preorijentisu samo na FB i da zanemare svoje sajtove. Izgleda "Freaky", ali FB lagano stavlja sapu na ceo Internet
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?
Hello just thought i would tell you sogtmhine.. This is twice now i’ve landed on your blog in the last 3 days hunting for completely unrelated things. Spooky or what?
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?
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
http://www.facebook.com/apps/application.php?id=1…
ili http://apps.facebook.com/petarce/
kako da napravim ono sa 3 koraka like share i da ode na taj link .Ako mozete objasniti i dati html ;:)
[…] tehničke strane Facebook pages su samo Iframe stranice i kao takve ukoliko se koristi bezbednosni protokol HTTPS nije moguće prikazati stranicu koja […]
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 🙂
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.
e da mail je ivic.vanja@yahoo.com
Pozdrav Vanja,
stvarno ne znam da li postoji problem sa MTSom. Ja nisam imao problem sa Telenorom. Svaki put je stigao kod putem SMSa
Ja imam isti problem kao i vanja ako neko ima resenje neka pomaze.
Dobar rad, samo tako nastavi! Što više ovakvih blogova to bolje! Pozdrav!
[…] 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 […]
like facebook dino.pb@hotmail.com 😀
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
Pogledajte Facebook API. Morate nešto malo programirati.
Ukoliko ne uspete sami, možemo i mi to za vas da odradimo.
Igor Jovanovski
Kameleon Lab