Sa preko milijardu mesečno aktivnih korisnika Facebook (u daljem tekstu FB)  predstavlja savršenu platformu za razvoj i promociju vaše aplikacije. Samim tim što je aplikacija u samom startu deo FB vi raspolažete sa milijardu potencijalnih korisnika. Ova statistika očigledno ohrabruje mnoge developere budući da u ovom trenutku na FB postoji preko 9 miliona aplikacija.

U ovom članku potrudiću se da vam pokažem kako da kreirate FB aplikaciju, uspešno savladate potencijalne probleme, kao i da maksimalno iskoristite ponuđene opcije.

Početni koraci

FB aplikacija je zapravo klasična web aplikacija koja se izvršava unutar iframe - a na FB. U takvom okruženju aplikacija se nalazi na vašem web serveru na kome obavezno mora biti instaliran ssl sertifikat jer je HTTPS protokol obavezan. Preduslov za dalje korake jeste da imate registrovan nalog na FB. Polazna stanica za kreiranje nove aplikacije je:

https://developers.facebook.com/apps.

Sada ćemo započeti proces kreiranja aplikacije preko dugmeta Create new app. Dobićete prikaz kao na slici:

gde je potrebno popuniti sledeće podatke:

• App Name: Naziv aplikacije koji će se prikazivati korisnicima kada budu hteli da povežu istu sa FB
• App Namespace: Predstavlja naziv namespace-a koji se koristiti u radu sa Open Graph-om. Ovaj naziv predstavlja i URL do vaše aplikacije na FB te iz tog razloga mora biti jedinstven.

Kada unesete ove podatke dobićete sledeću formu:

Kada završimo sa osnovnim podešavanjima FB aplikacije, potrebno je da odaberemo način na koji ćemo našu aplikaciju integrisati sa FB. U ovom postu ću se skoncentrisati na Page Tab aplikaciju, čija forma za podešavanje izgleda ovako:

• Page tab name:  Ime taba koji će se prikazati na FB strani
• Page tab url: URL do naše web aplikacije
• Secure page tab url:  URL do aplikacije po HTTPS protokolu

Ovim smo završili sa grubim podešavanjem aplikacije. Za dalji rad će nam biti neophodni App Id  i App Secret.

Postavljanje aplikacije na FB stranu

Sada kada imamo spremnu aplikaciju možemo je postaviti kao tab na neku od svojih FB stranica (pretpostavka je da već imate svoju FB stranicu). Postavljanje je veoma jednostavno, potrebno je da budete ulogovani na FB i da u browser unesete sledeći URL: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

• YOUR_APP_ID: App Id FB aplikacije koju smo kreirali u prethodnom koraku
• YOUR_URL: URL na koji ćemo biti preusmereni nakon instaliranja aplikacije na stranu (domen URL-a mora biti isti kao i domen koji smo uneli u osnovnom podešavanju aplikacije)

Želim da napomenem da je ovim korakom moguće instalirati aplikaciju na vise stranica istovremeno.

Spremni smo za rad

Da rezimiramo, u prethodnim koracima kreirali smo FB aplikaciju, povezali je sa web aplikacijom koja se nalazi na našem serveru i dodali je na FB stranu. Sada je na vama da smislite ideju za vašu aplikaciju i nastavite da je razvijate, a ja ću vam skrenuti pažnju na određene probleme koji se javljaju u ovakvom okruženju i pomoći vam da ih prevaziđete.

Signed request

FB koristi signed_request  parametar kako bi poslao određene informacije vašoj aplikaciji. U trenutku učitavanja vaše aplikacije unutar FB strane, zahtev ka vašoj aplikaciji je bogatiji za signed_request parametar. Nalazi se u $_POST nizu i da bi nama bio koristan moramo ga parsirati i verifikovati, a to ne predstavlja problem jer FB nudi funkciju koja to obavlja za nas.

function parse_signed_request($signed_request, $secret) {
 list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

 // decode the data
 $sig = base64_url_decode($encoded_sig);
 $data = json_decode(base64_url_decode($payload), true);

 if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
   error_log('Unknown algorithm. Expected HMAC-SHA256');
   return null;
 }

 // Adding the verification of the signed_request below
 $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
 if ($sig !== $expected_sig) {
   error_log('Bad Signed JSON signature!');
   return null;
 }

 return $data;
}

Za parsiranje nam je potreban App secret parametar koji smo dobili ranije kreiranjem aplikacije. Verifikacija ovim parametrom služi nam da budemo sigurni da je podatke poslao FB jer je request potpisan našim App secret - om koga znamo samo mi i FB. Rezultat funkcije je niz koji sadrži sledeće podatke:

Array
(
   [algorithm] => HMAC-SHA256
   [issued_at] => 1358973770
   [page] => Array
       (
           [id] => 401029436648199
           [liked] => false
           [admin] => 1
       )

   [user] => Array
       (
           [country] => rs
           [locale] => en_US
           [age] => Array
               (
                   [min] => 21
               )
       )

)

Veoma je važno da znate da se signed_request parametar nalazi samo u prvom zahtevu kada neko otvori vašu Page Tab aplikaciju. Budući da će vam neki od podataka svakako zatrebati naknadno, potrebno je da osmislite neki mehanizam za čuvanje signed_request objekta i njegovo održavanje kroz HTTP zahteve. Kao logično rešenje u ovom slučaju nameće se sesija.

Graph API

Pored velikog broja potencijalnih korisnika naše aplikacije još jedan od razloga da aplikaciju razvijamo na FB je i taj sto nam je na raspolaganju velika količina podataka koju korisnik već poseduje na FB (napr. fotografije, lokacija, pol, datum rođenja...) Za uzimanje ovih podataka i interakciju sa korisnikom oslanjamo se na Graph Api sa kojim komunucuramo uz pomoć access tokena. Neki od podataka su javno dostupni i nije nam potrebna nikakva posebna dozvola korisnika da bismo ih koristili, dok za neke druge moramo od korisnika eksplicitno zatražiti dozvolu. Više o tome možete naći ovde.

Access token

Access token je proizvoljno generisani string od strane FB, koji nam služi za autorizovanu komunikaciju sa Graph API - jem. Access token možete dobiti na dva načina. Na klijentskoj strani korišćenjem FB Javascript SDK - a

FB.login(function(response) {
  // handle the response
}, {scope: 'dozvolole koje zahtevamo od korisnika odvojene zapetom'});

Ukoliko je korisnik autorizovao našu aplikaciju access token se nalazi u response.authResponse.accessToken Na serverskoj strani tako što pogodite url : https://www.facebook.com/dialog/oauth?client_id=APP_ID&redirect_uri=REDIRECT_URL&scope=SCOPE&response_type=token Gde je:

• APP_ID: Identifikator FB aplikacije koju smo kreirali ranije
• REDIRECT_URL: URL na koji će nas facebook redirektovati nakon procesa autorizacije
• SCOPE: Dozvole koje zahtevamo od korisnika odvojene zapetom

Ukoliko je korisnik autorizovao aplikaciju access token se nalazi kao parametar u URL na adresi na koju nas je FB redirektovao nakon procesa autorizacije. Access token koji ovako dobijemo je token “kratkog veka” koji traje oko 1-2 sata. Ukoliko nam je potrebno, moguće ga je produžiti. Napominjem da FB Javascript SDK nema metodu za produžavanje tokena tako da se to mora obaviti na serverskoj strani. Graph metoda za produžavanje access token - a je: 

https://graph.facebook.com/oauth/access_token?             
   client_id=APP_ID&
   client_secret=APP_SECRET&
   grant_type=fb_exchange_token&
   fb_exchange_token=EXISTING_ACCESS_TOKEN

Gde je:

• APP_ID: Identifikator FB aplikacije koju smo kreirali ranije

• APP_SECRET: Parametar koji smo dobili u procesu kreiranja FB aplikacije

• EXISTING_ACCESS_TOKEN: Validan token “kratkog veka”

Access token koji dobijemo nakon produženja je token “dugog veka” koji traje oko 60 dana. Napominjem da  token  “dugog veka” nije moguće produžiti ponovo, već je nakon isteka 60 dana potrebno da korisnik ponovo autorizuje našu aplikaciju.

Organizacija sesije

Za ovakvu vrstu aplikacije potrebno je napraviti dobru organizaciju sesije. Potencijalni problem je što se jedna ista aplikacija može naći na više FB stranica. Uzimajući u obzir da se naša aplikacija nalazi na istom domenu, može doći do mešanja sesije i preklapanja vrednosti podataka. Da bismo izbegli mešanje sesije kada korisnik otvori našu aplikaciju na dve različite FB strane, za namespace sesije nameće se kombinacija ID - a naše FB aplikacije i ID - a FB stranice na koju je aplikacija instalirana.

Optimizacija za sve pretraživače

Kada u ovom slučaju kazem optimizacija za pretraživače, ne mislim na klasičnu css - html optimizaciju. Mislim na problem koji Safari ima sa održavanjem sesije kroz iframe u FB aplikaciji. Safari ima bug da kroz zahteve u vašoj FB aplikaciji nije u stanju da pročita cookie i zbog toga dolazi do gubitka sesije. Jedno od rešenja za ovaj problem je da kroz svaki zahtev ka vašoj aplikaciji serveru prosleđujete i identifikator sesije na osnovu čega će server znati o kojoj sesiji se radi. Jedan od primera gotove aplikacije koja za cilj ima promociju web sajta možete pogledati ovde. Nadam se da sam vam ovim člankom probudio želju za razvojem FB aplikacija i otklonio eventualne nedoumice. Na kraju, ostaje mi da vam poželim sreću u izradi vaše sopstvene FB aplikacije, a za sva dodatna pitanja stojim vam na raspolaganju.