Dodavanje novog taba na Facebook strani

Dragan Filipović Blog Comments (2)

Coca-Cola Facebook tab kurs web dizajna

Facebook je u poslednjih godinu dana uveo dosta novina, kako u izgledu, tako i u funkcionisanju Strana – Facebook Pages. Mnoga uputstva i tutoriali na netu sada nisu upotrebljivi. Dodavanje novog taba ipak nije tako komplikovano.

Osnovni pojmovi

Aplikacija – Program, Web sajt, deo Web sajta, Igra … 

SSL, HTTPS – SSL je sigurnosni sertifikat koji označava da je sajt bezbedan (nema krađe podataka, malvera isl.).  Adresa bezbednih sajtova počinje sa HTTPS://

API – način ‘saradnje’ različitih aplikacija. Facebook API – povezivanje facebook aplikacija i vaših aplikacija.

1. Izrada Aplikacije 

- Napravite Apclikaciju koju želite da prikažete u FB tabu. Neka za početak to bude jednostavna web strana (HTML, CSS i slike).

Maksimalna širina treba da bude 810px. Najbolje je napraviti Responsive stranu

npr.  

Web Edukator - Kurs Web Dizajna

 

2. Hostovanje Aplikacije

- Facebook zahteva da vaša aplikacija bude hostovana na nekom bezbednom serveru, sa SSL sertifikatom (Hosting koji ste dobili na kursu nema ovaj sertifikat). Postoji dosta free SSL hosting varijanti – pronađite ih na netu. Ja sam koristio hostfb.com, ali im je podrška poslednjih meseci dosta slaba, pa je neke stvari dosta teško izmeniti, kada jednom postavite aplikaciju. 

Na hostu koji ste pronašli postavite vašu aplikaciju. Dobićete dva domena, HTTP i HTTPS.

npr.

http://hostfb.com/files/11792/ad9e6c5275b305a6e01be7d71f63d2e5d35f6e42/

https://hostfb.com/files/11792/ad9e6c5275b305a6e01be7d71f63d2e5d35f6e42/

3. Facebook Aplikacija

- Ulogujte se na Facebook, napravite novu Aplikaciju na https://developers.facebook.com/apps

Nakon klika na Create New App dobićete prozor za ime aplikacije.

Facebook Developers

 

App namespace će biti adresa aplikacije na Facebook-u.

npr. https://apps.facebook.com/kurs-web-dizajna-inf/

Free Web hosting (Heroku) koji Facebook nudi može da posluži za hostovanje aplikacije, ali je za početnike dosta zahtevan, obzirom da je potrebno znanje GIT-a. Zato je bolje ne izabrati ovu opciju, već naći neki drugi hosting.

4. Podešavanja Aplikacije

U narednom koraku treba da podesite osnovne informacije o vašoj Aplikaciji.

Zapišite ili kopirajte App IDAdresu Aplikacije

Basic- Facebook Developers (1)

 

Popunite Basic Info i kliknite na Facebook Tab u donjem delu.

Page Tab Name:  Naziv koji će se pojaviti na Tabu.

Page Tab URL:  Adresa do vaše aplikacije sa HTTP

Secure Page Tab URL: Adresa do vaše aplikacije sa HTTPS

Page Tab Edit URL: Adresa do strane za izmenu (možete uneti bilo šta, ukoliko nemate ovu opciju na hostingu koji koristite)

Page Tab Image: Ubacite sliku – mora biti 111 x 74 piksela

Snimite izmene. Nekada FB server ne može da preradi zahtev, pa pokušajte da snimite kasnije. Ukoliko se graška ponovi probajte da dodate port linku ka Aplikaciji.

npr. Secure Page Tab URL: http://hostfb.com:80/files/11792/ad9e6c5275b305a6e01be7d71f63d2e5d35f6e42

Ukoliko imate interaktivnu aplikaciju, morate da popunite detalje i prijavite Aplikaciju. U našem primeru to nije slučaj.

5. Dodajte Aplikaciju na Tab FB strane

U brovseru posetite adresu

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

YOUR_APP_ID je broj koji ste ranije zapisali, nešto kao 517313081664697

YOUR_URL je adresa Aplikacije, npr.  http://hostfb.com/files/11792/ad9e6c5275b305a6e01be7d71f63d2e5d35f6e42/

Tako da je cela adresa za aktivaciju aplikacije, npr:

http://www.facebook.com/dialog/pagetab?app_id=517313081664697&next=http://hostfb.com/files/11792/ad9e6c5275b305a6e01be7d71f63d2e5d35f6e42

Otvoriće se prozor u kome treba da izaberete FB stranu kojoj želite da dodate Aplikaciju.

1  Add Page Tab

 

Na FB strani pojaviće se novi tab sa izabranim imenom. Redosled tabova možete menjati prikazom svih tabova (klikom na strelicu desno pored vidljivih tabova), a zatim klikom na ikonicu olovka koja se pojavljuje kada stanete mišem iznad nekog taba (Swap position with). Poslednji tab ne može da zameni mesto sa prethodnim, ali možete bilo koji prethodni da postavite na poslednje mesto.

Sada napravite neke zanimljive Aplikacije i postavite ih na FB stranu. Podelite vaš rad na FB strani Kursa Web Dizajna, i javite ukoliko naiđete na neki problem.

 

Comments (2) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Komentara (2)

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.