Line Education Center Academy

Facebook a început de la un mic proiect creat într-un campus şi a devenit cel mai mare portal social din lume. Succesul se datorează nu numai faptului că social media a luat amploare în ultimul timp ci şi faptului că Facebook nu e un simplu portal, ci o platformă Web. Această platformă permite site-ului să crească şi să genereze noi aplicaţii cu ajutorul componentelor existente în ea.

Facebook Markup Language şi Facebook Components

Pentru ca programatorii să poate interacţiona cu datele platformei, Facebook îşi defineşte propriul limbaj de markup – FBML (Facebook Markup Language). De fapt, FBML nu este decât o extensie a HTML-ului care îţi permite să adaugi nişte tag-uri noi de HTML într-o pagina Web. Aceste tag-uri se mai numesc şi componente Facebook (Facebook Components). Tag-urile tip FBML au structura <fb:numetag />. Elementele tip FBML ce pot fi folosite într-o aplicaţie Facebook se află pe Facebook Wiki: http://wiki.developers.facebook.com/index.php/FBML

Pagina pe care o creiezi poate rula într-un Iframe pe site-ul www.facebook.com ca aplicaţie internă, într-un Canvas. O pagină demo cu componente FBML se afla aici: http://apps.facebook.com/testlecacademy/

În exemplul de mai sus am setat ca platforma Facebook să preia conţinutul unei pagini HTML de pe serverul lec-academy.ro şi să o afişeze într-un Iframe pe facebook.com. Pentru a seta cum rulează aplicaţia ta trebuie sa configurezi formularul din Facebook Apps şi să îţi adaugi info despre aplicaţia ta: http://www.facebook.com/developers/apps.php

Extended Facebook Markup Language

Însă crearea unei aplicaţii care rulează doar în interiorul la facebook.com nu e ce ne interesează. Ideal ar fi dacă aş putea include componentele Facebook în site-ul meu pe care îl fac să meargă cum vreau eu şi nu mai sunt limitat de design-ul platformei Facebook sau de funcţionalitatea acestuia. Pentru aceasta a fost creat XFBML-ul.

XFBML vine ca o extensie la FBML. Această extensie aduce nişte tag-uri noi tip Facebook care pot fi folosite în exteriorul platformei Facebook, incluse în site-ul personal şi afişate ca nişte Facebook Components. Facebook ştie să gasească tag-urile incluse în site cu ajutorul unui script Javascript (pe care trebuie să îl incluzi în pagina ta) şi să le aplice stiluri şi funcţionalitate (le transformă în componente Facebook). O listă cu toate elementele XFBML pe care le poţi include în site-ul tău se găseşte în pagina cu Facebook Wiki: http://wiki.developers.facebook.com/index.php/XFBML

Există componente simple XFBML care nu necesită ca un utilizator să fie autentifcat pe facebook.com pentru a afişa informaţie. Drept exemplu poate servi Facebook Fan Box, pe care l-am încadrat în site-ul lec-academy.ro şi se află în partea de jos a sidebar-ului. Acest Component afişează ultimii fani înregistraţi pe LEC Facebook Fan Page. Pentru a insera Facebook Fan Box nu e nevoie decât să faci rost de un API Key pentru aplicaţia ta de la pagina Facebook Developer sau să foloseşti Facebook Application Wizard care te ajută să configurezi componentele dorite: http://developers.facebook.com/setup.php

După ce ai făcut rost de un Facebook API Key trebuie sa inserezi scriptul de Javascript în site care ştie să parseze elementele XFBML şi elementul XFBML dorit (<fb:fan></fb:fan>)

Facebook Connect

Este un set de functionalităţi pe care Facebook îl pune la dispoziţie print-un API şi permite includerea în site-ul tău a Facebook Components mai avansate sau care necesită datele unui utilizator logat cu Facebook. Partea cea mai bună pe care o pune la dispoziţie acest API este că îţi permite să loghezi utilizatorii pe site-ul tău cu un cont de Facebook. În modul acesta nu mai trebuie să forţezi utilizatorii să creieze cont pe site-ul tău pentru a scrie un simplu comentariu la un articol sau pentru a accesa o interfaţă de client.

Completarea unui formular pentru un nou cont pe un site spulberă experienţa utilizatorului pe acel site. O bună parte din ei renunţă la interacţiunea cu site-ul, căci utilizatorul de obicei este leneş şi nu are timp să completeze numeroase formulare şi să confirme noi conturi pentru fiecare comentariu lăsat pe un blog. Dacă incluzi Facebook Connect în site-ul tău creşte automat şi rata utilizatorilor activi, majoritatea utilizatorilor online având deja un cont Facebook.

Procesul este destul de simplu: trebuie să incluzi în site-ul tău componenta Facebook Connect şi să detectezi datele utilizatorului logat cu Facebook. Întreg procesul de validare a utilizatorului se face pe platforma Facebook la tine ajungând doar informaţia despre profilul său.

Mai jos voi demonstra cum să implementezi Facebook Connect în site cu PHP. Un exemplu al aplicaţiei finale se găseşte aici: http://lec-academy.ro/exemple/fbconnect/

Pas 1: Facebook API Key şi Secret Key

Trebuie să faci rost de un Facebook API Key şi un Facebook Secret Key. Se obţine completând formularul de creare a noi aplicaţii pe pagina Facebook Developer: http://www.facebook.com/developers/apps.php sau pe Facebook Connect Wizard: http://developers.facebook.com/setup.php

Pas 2: Configurare host Facebook Connect

Trebuie configurată adresa hostului unde va fi inserat Facebook Connect în secţiunea de Connect şi configurarea în pagina Advanced a hostului de unde se vor trimite email-uri utilizatorilor de pe site (de obicei este acelaşi host) ca în imaginile de mai jos:

Pas 3: Quick Start Facebook Connect PHP API library

Este nevoie de a descărca clasa Facebook care ştie să comunice cu platforma Facebook pentru a prelua datele despre utilizatorul logat. Scriptul se găseşte aici: http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz

După download trebuie descărcate fişierele din el în folderul proiectului.

Pas 4: Creare fişier xd_reciver.htm

În calea de root al proiectului trebuie create un fisier cu denumirea xd_receiver.htm în care se va afla următorul cod:

Acest fişier va comunica cu serverul care face logarea cu Facebook Connect. Trebuie creat neapărat pentru ca să funcţioneze scriptul.

Pas 5: Creare pagină de login – index.php

O pagina unde vom afişa butonul de Facebook Connect şi datele de logare a utilizatorului.

Mai întâi definesc două constante cu API Key şi Secret Key.

Funcţia statică function get_fb_user_info() mă ajută să verific dacă utilizatorul este logat şi îmi returnează datele lui de logare. E mai mult pentru a trata o excepţie ce apare cand utilizatorul nu este logat.

Include fişierul cu clasa Facebook şi creiez obiect nou de clasa Facebook .

În variabila $fbUserId voi păstra id-ul utilizatorului curent.

Urmează partea HTML a paginii.

În tag-ul HTML trebuie să inclus namespace-ul “fb” – xmlns:fb=”http://www.facebook.com/2008/fbml pentru ca browser-ul să valideze corect codul paginii.

În partea de head iniţializez variabila FBAPIKey unde păstrez cheia API-ului pentru Javascript.

În partea de body verific dacă id-ul utilizatorului curent este valid. Dacă da – atunci utilizatorul este logat şi pot să afişez componenta <fb:profile-pic> </fb:profile-pic> , adica poza utilizatorului şi informaţia despre el. Datele despre utilizator pot să le păstrez într-o bază de date de pe serverul meu.

Dacă nu am utilizator logat- afişez butonul de Facebook Connect – <fb:login-button></fb:login-button>

La final include scriptul care stie să afişeze componentele Facebook:

Trebuie initializat parserul de tag-uri XFBML cu funcţia FB.init(). Funcţia ia ca parametri cheia API şi calea spre fişierul xd_receiver.htm care l-am creat la pasul 4. Al treilea parametu este optional şi permite configurarea funcţionalităţii de login. Prin “permsToRequestOnConnect” specific scriptului că trebuie să întrebe utilizatorul dacă vrea să permită vizualizarea adresei sale de e-mail iar prin “reloadIfSessionStateChanged” reîncarc pagina pe care se află utilizatorul după logare cu succes pentru a afişa informaţie despre profilul său.

Demo

Pentru o demostraţie a aplicaţiei finale vizualizaţi:

http://lec-academy.ro/exemple/fbconnect/

Concluzie

După integrezi în site Facebook Connect poţi să foloseşti şi componente Facebook care necesită utilizator logat: Bookmark, Comments, Share, Live Stream etc. Facebook Connect ar putea să nu funcţioneze la testarea de pe localhost, cea mai bună testare se face pe un server online. Se poate încerca pe un server ce oferă free hosting.

Tags: apache, component, connect, facebook, fbml, http, javascript, PHP, web, xfbml

This entry was posted on marți, martie 30th, 2010 at 7:01 am and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.