Integracija Facebooka sa ASP.NET aplikacijama

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:adminsor fb: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)

Pošalji svoj komentar