Connect with us

Cześć, czego szukasz?

Internet Maker

Jak napisać prostą aplikację na Facebook’a w JavaScript SDK?

Chcesz stworzyć aplikację na Facebooka? Koniecznie zapoznaj się z JavaScript SDK i stwórz pierwszą aplikację w kilkanaście minut.

JavaScript SDK to zalecany przez Facebooka sposób pozwalający uzyskać dostęp do wszystkich możliwości Graph API. Jeśli skorzystamy z SDK, bez problemu stworzymy pierwszą aplikację. Facebook udostępnia ponadto narzędzia takie jak menadżer aplikacji albo konsola testowa do debugowania kodu ({link}http://developers.facebook.com/tools{/lnk}). Samo SDK jest udostępnione na zasadach open source (http://github.com/facebook/connect-js).

Tworzymy szkielet aplikacji

„Aplikacja Facebooka” to dość szumnie nazywane określenie strony internetowej, która wykorzystuje API Facebooka. Mimo górnolotnego określenia, będziemy się go trzymali, gdyż tak się przyjęło.

Podstawowa aplikacja składa się z trzech części: obiektu div o ID „fb-root”, zewnętrznego obiektu script linkującego bibliotekę oraz drugiego obiektu script z metodą inicującą FB.init() i resztą kodu. Facebook zaleca umieścić kod tuż przed tagiem {html}{/html}. Według dokumentacji (http://developers.facebook.com/docs/reference/javascript/fb.init/ ) najczęściej wywoływane parametry metody init() to:

  • appId – identyfiaktor aplikacji, który odczytamy w ustawieniach aplikacji
  • status – sprawdza status logowania
  • cookie – daje serwerowi dostęp do informacji o sesji przez ciasteczka
  • xfbml – parsuje język XFBML

Wszystkie parametry są opcjonalne, a typowy kod ma postać taką jak poniżej. Pozwala użytkownikowi połączyć się z aplikacją za pomocą konta Facebooka. Jeśli chcemy zmienić język elementów, które wywołamy z biblioteki (np. okien dialogowych), należy zmienić ustawienia języka w adresie. Dla angielskiego będzie to en_US.

SDK można wywołać asynchronicznie, ale żeby nie zaciemniać obrazu nie będziemy tego robić. Wyjaśniono to w sekcji „Loading the SDK Asynchronously” dokumentacji (http://developers.facebook.com/docs/reference/javascript/FB.init).

Podstawowa aplikacja, uruchomiona w debuggerze (który oczywiście sam jest aplikacją FB) powinna wyglądać podobnie jak na zrzucie ekranu poniżej. Uruchamiamy ją kiedy zapiszemy kod i klikniemy „Run Code”. Przyciski znajdujące się na górze pozwalają zalogować i wylogować się z aplikacji debuggera, nie naszej!

Logowanie do aplikacji przez konto FB

JavaScript SDK umożliwia łatwe tworzenie okien dialogowych Facebooka. Aby użytkownik mógł zalogować się do naszej aplikacji, musimy skorzystać z metody FB.login(). Metoda ma dwa parametry: obowiązkową funkcję wywoływaną po udanym logowaniu i opcjonalny obiekt zawierający oddzielone przecinkiem opcje modyfikujące zachowanie okna logowania, które np. proszą o udostępnienie danych osobowych użytkownika. My ograniczymy się do podstawowego okna. Dodatkowe parametry opisano w dokumentacji (http://developers.facebook.com/docs/authentication/permissions).

Jako że przeglądarki zwykle blokują wyskakujące automatycznie okna, okno logowania powinno aktywować się po kliknięciu w przycisk. W obiekcie div odpowiadającym za interfejs aplikacji powinniśmy więc umieścić przycisk:

{html}{/html}

W sekcji logicznej umieszczamy skrypt wykorzystujący SDK do wywołania okna logowania.

{html}{/html}

Skrypt wyszukuje w dokumencie elementu o ID „fb-login” i dodaje akcję wyzwalaną kiedy klikniemy na znaleziony element. Metoda FB.login() wywoływana jest z jednym parametrem, funkcją response, która od razu zostaje zadeklarowana. Między klamerkami powinniśmy umieścić kod funkcji, na przykład zapisanie logu.

Hello, Facebook JavaScript SDK!

Nasza aplikacja jest już tak dobra, że możemy pokazać ją światu. Wykorzystamy do tego metodę FB.ui(), która wywoła okno dialogowe Send to Many. Służy ono do wysyłania zaproszeń do aplikacji znajomym. Kiedy użytkownik kliknie w kolejny przycisk pojawi się okno do zapraszania znajomych.

Dodajemy więc kolejny przycisk do interfejsu aplikacji:

{html}{/html}

W rzeczywistości powinien pojawić się on dopiero po zalogowaniu, ale znowu nie chcemy zaciemniać kodu. Do skryptu dodajemy natomiast kod:

document.getElementById('send-to-many').onclick = function() {
  FB.ui({
    method: 'apprequests',
    message: 'Hello, Facebook JavaScript SDK!',
  });
} 
};

Tak jak poprzednio dodajemy nowemu przyciskowi akcję wywoływaną po kliknięciu. Mianowicie, wywołujemy metodę FB.ui() z jednym parametrem składającym się z tablicy asocjacyjnej. Wymagany klucz method opisuje nazwę okna dialogowego jakie ma zostać wywołane i przyjmuje wartość „apprequests”, która oznacza, że wywołamy okno wysyłania zaproszeń do znajomych. Inne okna dialogowe opisano w sekcji Dialogs dokumentacji (http://developers.facebook.com/docs/reference/dialogs/). Wartość klucza message odpowiada informacji, jaką użytkownik wysyłający zaproszenia zobaczy w oknie dialogowym. Odbiorca zaproszenia nie zobaczy tej wiadomości. Inne okna dialogowe przyjmują inne parametry.

Oto gotowa aplikacja!

Cała aplikacja wygląda jak poniżej:



 


 
Wyślij do wielu

Naszą aplikację możemy rozszerzyć wykorzystując między innymi następujące metody:

Uwaga! Facebook jest nieprzewidywalny!

Pisząc aplikacje pod Facebooka, musimy koniecznie brać pod uwagę jego nieprzewidywalność. Facebook ogłosił na przykład, że język FBML (Facebook Markup Language) czy REST API nie będą dłużej rozwijane. Serwis zaleca korzystać z JavaScript SDK i wtyczek społecznościowych, ale nie mamy pewności, czy i te projekty nie zostaną zawieszone. Poprzednią wersję JavaScript SDK (http://developers.facebook.com/docs/reference/oldjavascript/) spotkał już ten los.

W 2010 roku, kiedy Facebook wprowadzał system mikropłatności, ogłosił nagle, że developerzy aplikacji muszą korzystać z tego systemu zamiast np. PayPal. Problem w tym, że Facebook pobiera aż 30% prowizji. Informacja nieomal nie doprowadziła do zerwania kontaktów z największym developerem gier na FB, firmą Zynga (producent m.in. FarmVille i Texas HoldEm Poker). Dla Zyngi oznaczałoby to poważne uszczuplenie ich przychodów wynoszących ok. pół miliarda dolarów rocznie. Firmom udało się jednak porozumieć i ustalić niższą prowizję. Niestety mniejsi gracze nie mogli na to liczyć.
Nawet jeśli będziemy trzymali się regulaminu, powinniśmy cały czas mieć świadomość, że założenia leżące u podstaw aplikacji (np. zarabianie na mikropłatnościach, wykorzystanie SDK), mogą ulec zmianie.

Dopiero te zaawansowane funkcje pozwalają w pełni wykorzystać dane zgromadzone na serwerach Facebooka i infrastrukturę przygotowaną do pracy w trybie rzeczywistym. Jeśli chcemy z nich skorzystać, powinniśmy szczególnie zainteresować się powyższymi metodami. Inne zaawansowane API, pozwalające m.in. na wykorzystanie kredytów albo dołączenie chatu do zewnętrznego komunikatora opisano w dokumentacji (http://developers.facebook.com/docs/advancedtopics ).

Biorąc pod uwagę rozwój Facebooka i coraz częstsze jego wykorzystywanie, nauka pisania aplikacji wydaje się dobrą inwestycją.

Freelancer związa­ny z mediami od 2007 roku. Opublikował do tej pory ­ponad 500 artykułów m.in. dla Magazynu T3, Gazety Wyborczej, Onetu czy Nexta. Jako bloger pomaga przy projektowa­niu i wdroże­niach serwisów internetowych. Jest prezesem zarządu Stowarzyszenia FreelanCity.org.

Może cię też zainteresować

Newsy

Ma on chronić konta osób publicznych przed atakami.

Newsy

Podczas konferencji „The Connect” Mark Zuckerberg podzielił się z nami nową wizją na swoje internetowe imperium. Według Zuckerberga, nazwa Facebook nie była w stanie oddać dłużej tego, nad czym...

Newsy

Firma obiecuje usunięcie wszystkich zebranych dotychczas danych.

Newsy

Mark Zuckerberg dzieli się z użytkownikami wizją metawersum.