JavaScript Facebook API. Co nieco o programowaniu aplikacji Facebook.

Facebook

Poziom średnio-zaawansowany

W dzisiejszym artykule prezentuję niewielki zbiór zagadnień, z którymi najczęściej miałem do czynienia podczas pracy z programowaniem aplikacji Facebook.

Programowanie aplikacji FB

Oczywiście aplikacje zwykle miały elementy bazujące na PHP SDK, jednak generalnie większość funkcjonalności tworzona była z użyciem dedykowanego SDK dla JavaScript Facebook API.

Programowanie Facebook Apps to dość obszerny temat ogólnie, jak i w przypadku poszczególnych SDK (PHP, Mobile i oczywiście JavaScript).

Nie wspominając o wszystkich komplikacjach i błędach, jakie mogą pojawić się podczas pracy nad realnymi aplikacjami. Do tego trzeba dodać godziny spędzone na stackoverflow.com i niestety także różne wymagania, ograniczenia i zmiany narzucane przez Facebook, które twórcy aplikacji po prostu muszą respektować.

Czasami trzeba zmienić coś w starszych aplikacjach z powodu Breaking changes. Tak już jest, ale przynajmniej programista nie jest z tym sam dzięki dużym społecznościom skupionym wokół Facebook Apps Development.

Przejdźmy jednak do rzeczy bardziej praktycznych.

JavaScript Facebook API

Najbardziej podstawowymi aspektami są tutaj wczytanie i inicjalizacja Facebook JavaScript SDK oraz metoda getLoginStatus() obiektu FB.

Przykład:

// ...
FB.getLoginStatus(function(response) {
  alert('OK');

});
// ...

Metoda ta zajmuje się sprawdzaniem, czy użytkownik jest w ogóle zalogowany do Facebook’a (i naszej aplikacji).

Natomiast standardowe wczytanie i inicjalizację SDK prezentuje kolejny przykład kodu.

Przykład – zaprzęganie do pracy JavaScript Facebook API:

HTML – zadbajmy aby dokument zawierał element fb-root:

<div id="fb-root"></div>

JavaScript:


window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({
    appId      : 'YOUR_APP_ID', // App ID from the App Dashboard
    status     : true, // check the login status upon init?
    cookie     : true, // set sessions cookies ...
    xfbml      : true  // parse XFBML tags on this page?
  });

  // Additional initialization code (e.g. adding Event Listeners) goes here ...

  FB.getLoginStatus(function(response) {
    alert('OK');

  });
};

// Load the SDK's source Asynchronously
(function(d, debug){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
  ref.parentNode.insertBefore(js, ref);
 }(document, /*debug*/ false));

Tym samym możemy zacząć korzystać z JavaScript Facebook API.

Aby szczegółowo zbadać czy użytkownik jest zalogowany do naszej aplikacji, możemy posłużyć się kodem jak poniżej:


FB.getLoginStatus(function(response) {

  if (response.status === 'connected') { // [1]

    // the user is logged in and has authenticated our app
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;

  } else if (response.status === 'not_authorized') { // [2]

    // the user is logged in to Facebook, 
    // but has not authenticated your app

  } else { // [3]

    // the user isn't logged in to Facebook.

  }
});

czyli:

przypadek [1] – użytkownik jest zalogowany do Facebook’a oraz do naszej aplikacji,

przypadek [2] – użytkownik jest zalogowany do Facebook’a, ale nie przeszedł procesu autoryzacji w naszej aplikacji,

przypadek [3] – użytkownik nie jest zalogowany do Facebook’a.

FB.login

Użytkownik może być niezalogowany, wtedy można posłużyć się metodą FB.login(), która umożliwia użytkownikowi uwierzytelnienie aplikacji za pomocą okna dialogowego OAuth.

Przykład – użycie metody FB.login:


 FB.login(function(response) {
   if (response.authResponse) {
     alert('Welcome! Fetching your information... ');

     FB.api('/me', function(response) {
       alert('Hello, ' + response.name + '!');
     });

   } else {
     alert('User cancelled login or did not fully authorize.');
   }
 });

Ważną możliwością udostępnianą przez tę metodę jest poproszenie użytkownika o uprawnienia:

FB.login(function(response) {

  // ...

}, {scope: 'email,user_likes'}); // permissions

co może być potrzebne w przypadku niejednej aplikacji, jako że wykonują one przeróżne działania, do których muszą mieć dostęp (również do określonych danych użytkownika).

Szczegółowe informacje o uprawnieniach przedstawia dokumentacja.


Więcej kodu

Poniżej prezentuję małą bibliotekę JS, w której zebrałem często używane funkcje. Jest napisana w prosty sposób, jako zbiór osobnych funkcji z parametrami dostępnymi globalnie.

To oznacza że nie przekazujemy ich do funkcji, tylko definiujemy globalnie w szablonach podstron aplikacji, a następnie wywołujemy funkcję.

Przykładowo:


var window.psDialogName = 'Test';
// ...
var window.psDialogLink = 'http://url.com';

publishStory();

Poniżej zbiór funkcji.


/**
 * @name fb.js
 * @description Toolbox - JavaScript Facebook API
 * @author Dominik Wlazlowski <office@directcode.eu>
 * @version 0.5
 */

// publish a story to the user wall
function publishStory() {
  FB.ui({
    method: 'feed',
    name: window.psDialogName,
    caption: window.psDialogCaption,
    description: window.psDialogDesc,
    link: window.psDialogLink,
    picture: window.psDialogPicture
  },
  function(response) {
    console.log('publishStory() response: ', response);
  });
}

// publish a story to the wall of user friends
function publishStoryForFriend() {
  randNum = Math.floor ( Math.random() * friendIDs.length );
  var friendID = friendIDs[randNum];
  // console.log('Opening a dialog for friendID: ', friendID);
  
  FB.ui({
    method: 'feed',
    to: friendID,
    name: window.psDialogName,
    caption: window.psDialogCaption,
    description: window.psDialogDesc,
    link: window.psDialogLink,
    picture: window.psDialogPicture,
    user_message_prompt: window.psDialogPrompt
  },
  function(response) {
    console.log('publishStoryForFriend() response: ', response);
  });
}

// send invite friends request (simple)
function inviteFriends() {
  FB.ui({
    method: 'apprequests',
    message: window.ifDialogMessage
  },
  requestCallback);
}

// invite specified friends
function inviteFriendsByIDs() {
  FB.ui({
    method: 'apprequests',
    suggestions: window.ifDialogFriendIDs,
    message: window.ifDialogMessage
  },
  requestCallback);
}

// send a single (random) friend
function inviteSingleFriend() {
  randNum = Math.floor(Math.random() 
    * window.ifDialogFriendIDs.length);

  var friendID = window.ifDialogFriendIDs[randNum];
  
  FB.ui({
    method: 'apprequests',
    to: friendID,
    message: window.ifDialogMessage
  },
  requestCallback);
}

function requestCallback(response) {
  // console.log('Invite friends request: ', response);
  return true;
}

To typowe czynności, jakie może mieć do zrobienia programista pracujący nad aplikacją Facebook.

Funkcja requestCallback to typowe dla AJAX wywołanie zwrotne, przyjmujące response czyli odpowiedź z API jako parametr. W tym przykładzie nie ma potrzeby wykonywania w tej funkcji dodatkowych czynności, więc jest wspólna dla kilku funkcji (służących wysyłaniu użytkownikom zaproszeń do aplikacji).

Niektóre funkcje przyjmują parametr jak xxxFriendIDs na przykład ifDialogFriendIDs. Jest to lista ID użytkowników oddzielona przecinkami.

Taką listę można generować w różny sposób, ale chciałbym polecić tutaj sprawdzone rozwiązanie. Jest to plugin jQuery z wieloma możliwościami konfiguracji.

Plugin to jquery-facebook-multi-friend-selector dostępny na GitHubie:

https://github.com/mbrevoort/jquery-facebook-multi-friend-selector

W parametrach możemy ustawić maksymalną liczbę znajomych, jaką użytkownik może wybrać i zdefiniować inne opcje.

jquery-facebook-multi-friend-selector

W ten prosty sposób uzyskujemy listę ID użytkowników, którą można dalej przetwarzać.

Więcej narzędzi

Świetnym narzędziem jest fbrell. Pozwala na szybko uruchamiać i testować rozwiązania bazujące na FB JavaScript API.

Przykład:

http://www.fbrell.com/auth/account-info

Kod nad którym pracujemy możemy zapisać pod unikalnym adresem URL, wracać do niego i dzielić się z innymi programistami.

Kolejne przydatne programiście narzędzia udostępnia Facebook:

https://developers.facebook.com/tools/

szczególnie Graph API Explorer:

https://developers.facebook.com/tools/explorer

oraz Debug:

https://developers.facebook.com/tools/debug

i inne.

Na koniec jako bonus dla dociekliwych gotowe rozwiązanie, które szybko pozwoliło mi zaimplementować pilną funkcjonalność w pewnej aplikacji. Mowa o AutoComplete, a konkretnie o wyszukiwaniu swoich Facebook’owych znajomych z auto-uzupełnianiem.

Facebook API search friends

Dostępne jest pod adresem:

https://gist.github.com/aarongrando/1635158

świetne w swej prostocie (niecałe 60 linii kodu).

Podsumowanie

Programowanie aplikacji Facebook to współcześnie pożądana umiejętność u programisty WWW. SDK dla JavaScript oraz API są dopracowane i całkiem dobrze się z nimi pracuje.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.