Integracija Facebooka sa ASP.NET aplikacijama
U ovom članku pojašnjavamo načine integracije najveće socijalne mreže Facebook i pratećih servisa sa ASP.NET aplikacijama.
Facebook predstavlja najveću socijalnu mrežu na Internetu sa oko 700 miliona korisnika. Ono što je jedna od bitnijih vrijednosti Facebooka jeste i oglašivački potencijal platforme zbog same kvalitete podataka o korisnicima, ali i vremena kojeg tamo provode.
Iskorištavanje ovakvog potencijala je moguće na više načina i za različite svrhe, od toga da se promoviše određeni sadržaji, usluge, proizvodi ili kompanija.
Također Facebook nudi izvanredne mogućnosti viralne promocije, gdje gotovo bez ulaganja sredstava vaš sadržaj može biti podijeljen na milione profila, grupa, stranica itd. Sve ove pogodnosti čini neophodnim da se naše web aplikacije što više i bolje integrišu sa ovom platformom.
Integracija aplikacija sa Facebookom se može učiniti na više načina:
- Putem predefinisanih načina
- API-a
Predefinisani načini integracije
Social Plugins
Like Button

Omogućuje da posjetioci podjele određeni sadržaj među svojim prijateljima na Facebooku, odnosno da vide koliko i ko je podijelio taj isti sadržaj. Integracija Like Buttona je moguće putem XFBML-a ili IFrame-a. XFBML verzija nudi vise mogućnosti ali zahtjeva korištenje Javascript SDK-a.
Konfiguracija Like Button plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: href, send, layout, show_faces, width, action, font, colorscheme, ref.
Konačno modul izgleda ovako:

Također ukoliko je potrebno napraviti i veći stepen integracije, onda se doda uz Like Button i Open Graphs Tagovi.
Open Graph Tagovi omogućavaju da se sve akcije koje korisnici rade na web stranici, kao što je djeljenje sadržaja, komentarisanje itd. automatski veže sa profile korisnika i sve ostale dijelove Facebooka.

Sa web alatom se konfigurišu meta tagovi koji se postavljaju pri vrhu stranice. Neki od tagova koji je potrebno konfigurisati su:
-
og:title– Naziv entiteta (stranice) -
og:type– Tip stranice -
og:image– URL to lokacije logoa stranice -
og:url– URL do lokacije stranice -
og:site_name– Detaljniji naziv stranice -
fb:adminsorfb:app_id– ID od Facebook stranice ili profila
Send Button

Ovaj plugin omogućuje da posjetioci mogu poslati poruku svojima prijateljima kroz privatne poruke odnosno email, zid grupe itd. Poruka sadrži URL do sadržaja, naziv, sliku i kraći opis.
Konfiguracija Send Button plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: href, font, colorscheme, ref.
Comments

Plugin omogućuje korisnicima komentarisanje sadržaja na stranici. Ukoliko korisnik komentariše neki sadržaj na stranici, na News Feedu se pojavljuje notifikacija o tome sa linkom na sadržaj. Korisnici koji vide notifikaciju mogu posjetiti link i dati vlastiti komentar.
Konfiguracija Comments plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: href, width, num_posts, colorscheme.
Ovaj plugin također je moguće podesiti da komentare prikazuje svim posjetiocima ili samo onima koji su prijavljeni.
Activity Feed

Plugin prikazuje listu aktivnosti korisnika za web stranicu. Lista aktivnosti uključuje komentare korisnika, sadržaje koji im se sviđaju ili dijele itd. Ukoliko je korisnik prijavljen putem Facebooka, lista aktivnosti je personalizirana prema njemu, a ukoliko nije onda se prikazuje aktivnosti ostalih korisnika na stranici.
Konfiguracija Activity Feed plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: site, width, height, header, colorscheme, font, border_color, recommendations, filter, ref.
Recommendations

Plugin pruža listu preporuka koje mogu sadržavati statuse, grupe, stranice, aplikacije i ostale vrste sadržaja. Ukoliko je korisnik prijavljen na Facebook onda je lista preporuka personalizirana na osnovu interesa i karakteristika korisnika.
Konfiguracija Recommendations plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: site, width, height, header, colorscheme, font, border_color, ref.
Like Box

Plugin omogućuje vlasnicima stranice da povećaju broj posjetioca kojima se sviđa njihova stranica na Facebooku. Plugin nudi broj i pregled korisnika kojima se sviđa stranica, najnovije postove i mogućnost da postanu fanovi stranice bez odlaska sa web stranice na Facebook.
Konfiguracija Like Box plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: href, width, height, colorscheme, show_faces, stream, header, border_color.
Login Button

Plugin prikazuje listu slika korisnika koji su se već prijavili na stranicu putem Login Buttona. Ovaj plugin se najčešće koristi da mi se reklamirala prijava putem ovog plugina odnosno uvjerilo i druge korisnike da učine isto.
Konfiguracija Login Button plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: show-faces, width, max-rows, perms.
Registration

Plugin se koristi za registraciju novih korisnika na web stranici putem Facebooka računa. Ukoliko je korisnika prijavljen na Facebook, ova forma je automatski popunjenja sa podacima. Pored atributa na sljedećoj slici, moguće je postaviti i dodatne kontrole za traženje informacija od korisnika.
U nastavku je prikazana forma (sa proširenim broje atributa) za registraciju:

Kod koji se nalazi u pozadini je:

Neki od atributa koji se mogu podesiti su: client_id, redirect_uri, fields, fb_only, width, border_color.
Facepile

Plugin se koristi za prikaz korisnika kojima se sviđa neka stranica na Facebooku. Najčešće se koristi u promotivne svrhe kako bi se istakla vrijednost stranice ali i privukli novi korisnici.
Konfiguracija Facepile plugina se radi najčešće putem interfejsa:

Neki od atributa koji se mogu podesiti su: href, app_id, max_rows, width, size.
Live Stream

Plugin se koristi za prikaz aktivnosti korisnika za neki događaj, bilo da je riječ o video prijenosu koncerata, govora, seminara, video igara itd.
Konfiguracija Live Stream plugina se radi najčešće putem interfejsa:

API
Integracija aplikacija sa Facebookom je moguće obaviti putem različitih API-a koji se konstantno nadograđuju i mjenjanju. Kad je u pitanju intenzitet promjena tu treba pomenuti da su one jako česte i da često izazivaju nezadovoljstvo developera zbog aplikacija koje je potrebno prepisati i doraditi. U prošlosti neki od API-a su bili: REST API (Pristup putem HTTP requestova), FBML (Maksimalna integracija aplikacije sa Facebookom putem Javascripta) i Javascript API (RIA aplikacije sa mogućnostima autentifikacije, prikaza dijaloških okvira, itd.).
Trenutno se integracija vrši na nekoliko načina od kojih se preporučuju:
- Graph API
- Javascript SDK
- iOS SDK
- Android SDK
- PHP SDK
Treba spomenuti i specifične API-e, koji su bazirani ili na trenutno podržanim ili već prevaziđenim načinima za povezivanje sa Facebook platformom, kao što su:
- Dialogs
- FQL
- Internationalization API
- Credits API
- Ads API
- Chat API
Graph API
API predstavlja jezgro za pristup socijalnom grafu (osobe, poveznice među njima, itd.) Facebooka. API se sastoji od objekata (osoba, slika, događaj, stranice itd.) i poveznica među njima (prijateljstva, djeljeni sadržaj, tagovi na slikama itd.)
Svakom objektu je moguće pristupiti na osnovu jedinstvenog ID-a (primarnog ključa). Treba spomenuti da se određenim podacima može (public), dok određenima ne može pristupiti bez prijave na Facebook. Ovo zavisi od postavki privatnosti podataka nekog profila, stranice, sadržaja itd.
Primjer: https://graph.facebook.com/19292868552
Pojedinim objektima je moguće pristupiti i na osnovu korisničkog imena.
Primjer: http://graph.facebook.com/VASUSERNAME/picture
Ukoliko je potrebno pristupiti vezama nekog objekta sa drugim objektima onda se to može učiniti na sljedeći način:
Primjer: https://graph.facebook.com/me/friends?access_token=...
Pošto je riječ o podacima koji su povjerljivi onda je potrebno u linku proslijediti access_token. Ovaj token se dobija prijavom na Facebook ili registracijom aplikacije i njenom prijavom na Facebook. Kada se proslijedi token, aplikacija treba da ima potvrdu korisnika da može koristiti određene podatke.
Na ovaj način moguće je pristupiti podacima kao što su: prijatelji neke osobe, sadržajima koje joj se sviđaju, foto albumima itd.
Detaljan spisak objekata iz Graph API-a je u nastavku:
- Album - Foto album
- Application - Aplikacija registrovana na Facebook platformi
- Checkin - Prijava na određeno mjesto kroz Facebook Places
- Comment - Komentar
- Domain
- Event - Facebook događaj
- FriendList - Lista prijatelja
- Group - Facebook grupa
- Insights - Statistika o stranicama, profilima itd.
- Link
- Message - Poruka
- Note - Facebook zabilješka
- Page - Facebok stranica
- Photo - Pojedinačna slika u albumu
- Post - Objavljeni sadržaj
- Review - Recenzija aplikacije
- Status message - Status
- Subscription - Pretplata na aplikaciju
- Thread
- User - Profil korisnika
- Video - Individualni video
Za povezivanje sa Facebook platformom postoji mnogo biblioteka koje olakšavaju posao, međutim zbog konstantnog razvoja API-a i nekompatibilnosti postojećih biblioteka trenutno se izdvaja Facebook C# SDK biblioteka koja ima odličnu zajednicu korisnika i redovan razvoj. Biblioteka je bazirana na Facebook Toolkitu kojeg je oficijelno podržao Microsoft u razvoju, ali se je kasnije odustalo od razvoja, tako da je cjelokupna zajednica prešla na razvoj ovog SDK-a.
Za integraciju je potrebno referencirati biblioteke iz Facebook C# SDK-a. Sljedeći korak je registracija aplikacije kako bi se dobili pristupni ključevi za aplikaciju. Registracijom se dobijaju: Application ID, Application Secret, Application Key i Access Token.
Ove podatke je potrebno pohraniti u web.config projekta sa kojim želimo da radimo integraciju.
NAPOMENA: U vrijeme objave ovog članka, svi prikazani tokeni i aplikacija su izbrisani, tako da za testiranje demoa, morate registrovati novu aplikaciju za Vaše vlastite Facebook profile.
Vrijeme trajanja tokena na svu sreću može biti onoliko koliko Vi želite, ali se može podesiti i da se svaki put izdaje novi token.
Sljedeći kod se ubacuje na aspx stranicu i zavisno od toga da li je korisnik (aplikacija) ima pristup ili ne, prikazuje se login button.

Treba napomenuti da atribut perms, sadrži listu dozvola, koje će korisnik prijavom na sistem, dati aplikaciji. Moguće je tražiti dozvolu za pristupu zidu korisnika, pregled prijatelja, pregled ličnih informacija itd. U aspx.cs datoteci se nalazi sljedeći kod:

Njegova uloga je da nakon što se korisnik (aplikacija) prijavi na Facebook, pristupne podatke (token) pohrani unutar web.config datoteke. Nakon što je uspješno izvršena prijava moguće je daljnja interakcija aplikacije sa korisnicima koji su dobili dozvolu za pristup podacima korisnika.
Ukoliko je potrebno prikazati listu zadnjih statusa trenutnog korisnika:

Prethodnim kodom se izvršavaju sljedeće operacije:
- Provjera da li je aplikacija autorizirana (korisnik prijavljen na sistem ili postojanje tokena)
- Dobavljanje liste statusa trenutno prijavljenog korisnika
- Parsiranje prikupljenih podatka (JSON) u format jednostavniji za prikaz unutar DataList kontrole
Listu prijatelja je moguće dobaviti na sljedeći način:

Stavljanje novog statusa na profil korisnika je moguće uraditi na sljedeći način:

Sve druge funkcionalnosti i primjere može vidjeti kroz dostupni demo projekat, ali i oficijelnu dokumentaciju Facebook C# SDK-a. I na kraju nekoliko ideja za integraciju Facebooka u Vaše aplikacije:
- Kada se objavi novi sadržaj da se objavi status sa linkom na sadržaj
- Postavljanje dugmića za podjelu sadržaja na profil posjetioca
- Dugme da korisnici mogu dodati stranicu portala na svoju "like" listu
- Kontrola za prikaz zadnjih statusa sa stranice portala ukoliko je npr. riječ o blogu
- Integracija komentara na portal (radi uštede DB resursa)
- Foto galerije integrisati kao Foto albume na Facebook stranici
- Video galerije integrisati kao Video albume na Facebook stranici
- Automatsko obavještavanje fanova Facebook stranice portala (kroz PM, status ili nešto drugo), itd.
U prethodnom tekstu je prikazano mnogo načina za integraciju ASP.NET aplikacija sa Facebookom, a u narednom tekstu pojašnjavamo integraciju ASP.NET aplikacija sa YouTube servisom.








Komentari (0)