Mediovski Technology

Facebook Connect

Data: 22 Czerwiec 2010 12:35 Autor: Tomek | Kategoria: Programowanie,Społeczność

Facebook opanowuje świat! Użytkownicy portalu niemal na każdej stronie internetowej mogą spotkać się z “Facebookiem”.

Wiele firm po założeniu “fanpage’a” na tym portalu umieszcza na swojej stronie informacje o liczbie fanów strony wraz z możliwością zostania fanem tej firmy.

Lecz Facebook to nie tylko fanpage, ostatnimi czasy bardzo popularną funkcjonalnością staję się “Facebook Connect“. Moduł ten pozwala na osiągnięcie podobnych rezultatów co “OpenId”.

W przypadku stron wizytówek Facebook Connect raczej nie ma zastosowania, jednak w przypadku bardziej rozbudowanych “portali”, w których użytkownicy mają możliwość komentowania, oceniania itp. moduł Facebooka spisuje się idealnie.

Facebook Connect daje możliwość “połączenia” (“wykorzystania”) konta na Facebooku na innych portalach, tj. użytkownik może komentować, oceniać, dodawać artykuły bez potrzeby logowania na specjalne konto na danej stronie lecz może zalogować się raz na Facebooku, a następnie strona, na której jest zaimplementowany Facebook Connect wykryje, że użytkownik jest już zalogowany (wcześniej użytkownik musi połączyć konto z Facebooka z aplikacją danej strony – co odbywa się pół automatycznie) i od tej pory użytkownik może publikować treści na “naszej” stronie za pomocą konta na Facebooku.

Aby zaimplementować Facebook Connect na naszej stronie należy wykonać kilka czynności:

  • Do podstawowego działania aplikacji nie ma konieczności zmiany domyślnych parametrów aplikacji. Ważnym elementem jest wprowadzenie w dziale “Połączenie” (“Connect”) adresu strony, z którego użytkownicy będą się łączyli z aplikacją.
  • Opcjonalnie można umieścić logo (99px x 22px w formacie  JPG, GIF lub PNG), które będzie pokazywanie w oknie Facebook Connect.
  • Kolejnym krokiem podczas integracji modułu na naszej stronie jest umieszczenie specjalnego pliku “xd_receiver“, który służy do komunikacji między API Facebooka a naszą stroną, w sekcji body tego pliku powinna znajdować się linijka:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"><!--mce:0--></script>
  • Następnie należy do sekcji html na naszej stronie dodać przestrzeń nazw Facebooka:
xmlns:fb="http://www.facebook.com/2008/fbml"

co pozwala na korzystanie z tagów fb (pełna lista tagów XFBML – http://wiki.developers.facebook.com/index.php/XFBML.)

  • Następnie trzeba załadować plik javascript z API
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"><!--mce:1--></script>

by w pełni korzystać z możliwości Facebook Connect.

  • Kolejnym ważnym krokiem jest skopiowanie API_KEY naszej aplikacji tak by kod na naszej stronie komunikował się bezpośrednio z aplikacją napisaną na Facebooku.

Podstawowa implementacja Facebook Connect, która sprawdza czy użytkownik jest zalogowany, a jeżeli tak to pobiera zdjęcie główne oraz Imię i Nazwisko wygląda następująco:

	function facebook_onlogin()
	{
		var userBox = document.getElementById('userBox');
 
		userBox.innerHTML = "<span>"
		+ ""
		+ "Witaj, "
		+ " jesteś zalogowany przy pomocy konta fecebook."
		+ "</span>";
 
		FB.XFBML.Host.parseDomTree();
	}
 
	FB.init("API_KEY", "xd_receiver", {"ifUserConnected":facebook_onlogin} );

Podczas ładowania strony jeżeli użytkownik jest zalogowany pobierane są jego dane w przeciwnym wypadku pojawia się przycisk : Connect with Facebook

Po kliknięciu tego przycisku użytkownik jest pytany czy chce połączyć konto ze stroną:

facebook

Możliwości Facebook Connect tak naprawdę są dość duże, wszystko zależy od stopnia skomplikowania aplikacji napisanej na Facebooku.

RSS
Get Adobe Flash player