Aplikacja w Facebooku

Wstępne założenia: aplikacja będzie w iframe, będzie wywoływać ajaxa, pisać na ścianie oraz wyświetlać facebookowe okna z informacjami (zamiast alertów).

Integracja z Facebookiem
Na stronie (np. przed ) umieszczamy kod osadzający facebookowe skrypty:

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

<script>
  window.fbAsyncInit = function() {
     FB.init({
      appId: 'ID_APLIKACJI',
      session : <?php echo json_encode($session); ?>,
      status: true, cookie: true,
             xfbml: true});
     FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
     FB.Canvas.setSize();
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Div #fb-root posłuży jako kontener pod javascript, który zostanie wstawiony po załadowaniu się strony (document.ready). Następnie zostanie wywołana funkcja FB.init. Najważniejsze w tej funkcji jest appId (określające numer aplikacji) oraz session (dzięki któremu określamy, że użytkownik jest zalogowany i można wysłać mu tekst na ścianę). FB.Event.subscribe zadba o zapytanie użytkownika o odpowiednie zezwolenia, a FB.Canvas.setSize o dopasowanie ramki do wielkości strony (dzięki czemu nie będą potrzebne suwaki). Jedynym problemem jest uzyskanie zmiennej $session. Na stronie http://github.com/facebook/php-sdk/tree/master/src/ jest plik facebook.php, ściągamy i wgrywamy go obok strony. Następnie na stronie na początku wstawiamy:

<?
require 'facebook.php';

$facebook = new Facebook(array(
  'appId' => 'ID_APLIKACJI',
  'secret' => 'SEKRETNY_KLUCZ',
  'cookie' => true,
));

$session = $facebook->getSession();

if (!$session) {
    $url = $facebook->getLoginUrl(array(
               'canvas' => 1,
               'fbconnect' => 0
           ));

    echo "<script type='text/javascript'>top.location.href = '$url';</script>";
    exit() ;
}
?>

ID_APLIKACJI oraz SEKRETNY_KLUCZ bierzemy z panelu informacyjnego aplikacji. Całość działa automatycznie, a w ostateczności dostajemy odpowiednie dane w zmiennej $session.

Publikowanie na ścianie
Utworzenie wiadomości wymaga wywołania FB.ui z odpowiednimi parametrami. Całość może wyglądać następująco:

<script type="text/javascript">
FB.ui({
     display: "dialog",
     method: 'stream.publish',
     message: '',
     attachment: {
       name: '',
       caption: '',
       description: (''),
       media: [
	 {'type': 'image','src': 'ADRES_OBRAZKA','href': 'ADRES_DOCELOWY'}
       ],
       href: 'ADRES_DOCELOWY'
     },
     action_links: [
       { text: '', href: '' }
     ],
     user_message_prompt: ''
   },
   function(response) {
     if (response && response.post_id) {
       // dobrze
     } else {
       // źle
     }
   }
 );
</script>

Display określa sposób przedstawienia okienka (według informacji znalezionych na forach dostępne są wartości: dialog, iframe, popup). To ostatnie powoduje wyświetlenie zwykłego okienka popup. Tak samo stanie się przy próbie wyświetlenia okienka bez podania wartości session w FB.Init. Media w załączniku (attachment) pozwala określić element do dołączenia do wiadomości (obrazek, plik muzyczny lub wideo). W przypadku obrazków występuje ograniczenie wielkości.

Okna z wiadomościami
Informacje z publikowania na ścianie można wyświetlać jako alerty, ale nie wygląda to zbyt dobrze. Warto napisać własną funkcję, która użyje okienek facebookowych.

<script type="text/javascript">
function show_dialog( title, message ) {
FB.UIServer.Methods["fbml.dialog"].size = {width:280, height:60};
FB.ui({
    method:'fbml.dialog',
    display: 'dialog',
    fbml: (
       '<div class="pop_content" id="pop_content">'+
       '<h2 class="dialog_title"><span>'+title+'</span></h2>'+
       '<div class="dialog_content">'+
       '<div class="dialog_body">'+message+'</div>'+
       '</div>'+
       '</div>' ),
     width: '280px',
     height: '60px'
     },
     function(response) {
     });
}
</script>

Domyślne okienko na Facebooku ma wymiary ustawione na sztywno, więc nawet jeśli treści jest niewiele, to zajmuje ono sporo miejsca. Przy pomocy FB.UIServer.Methods[„fbml.dialog”].size określamy wielkość jaką powinno mieć okienko. Jeśli będziemy pokazywać więcej okien, to warto wcześniej zapamiętać domyślną wartość (tak na wszelki wypadek). Parametry width i height dla FB.ui dodałem tak na wszelki wypadek (być może nie potrzebnie). Gdy już mamy gotową funkcję możemy wstawić ją w miejsce oznaczone wcześniej jako „// dobrze” i „// źle” np:

show_message( 'Dodanie wiadomości', 'Udało się dodać wiadomość !' );

Ajax
jQuery wzięte z code.google (CDN) działa bez problemów. Dotyczy to także ajaxa. Bez problemu można wywoływać zapytania typu:

  var id_obrazka ;
  $.ajax({
    url: 'http://adres/rob_obrazek.php',
    data: 'dane='+dane,
    type: 'GET',
    async: false,
    success: function(data) {
      	id_obrazka = data ;
    }
  });

Ważne jest, żeby adres był identyczny jak adres strony w iframe. Jeżeli strona znajduje się w miejscu http://xxx.yy, to błędem będzie wpisanie http://www.xxx.yy (zostanie wykonana operacja, ale nie otrzymamy odpowiedzi, a na dodatek odpali się zdarzenie obsługi błędu). Przy przekazywaniu danych można dorzucić kilka facebookowych zmiennych np: fb_sig_user (id użytkownika) albo session (dane sesyjne, na podstawie których użytkownik jest autoryzowany). Przydadzą się, gdy będziemy chcieli powiązać danego użytkownika z wywołaniem.

Zakładki
Możliwe jest osadzenie zakładek (fb:tabs) na stronie z iframe:

<fb:serverFbml style="height:20px; padding-bottom:20px; overflow: hidden; display: block;">
<script type="text/fbml">
<fb:fbml>
<fb:tabs>
  <fb:tab-item href='http://apps.facebook.com/adres_aplikacji/?akcja=poza' title='Wyskocz poza aplikację' />
  <fb:tab-item href='http://apps.facebook.com/adres_aplikacji/?akcja=tutaj' title='Tu jesteś' selected='true'/>
 </fb:tabs>
</fb:fbml>
</script>
</fb:serverFbml>

Tylko takie rozwiązanie udało mi się znaleźć i nie spełnia ono swojej funkcji zbyt dobrze (aplikacja jest w iframe, zakładki wstawiane są do jeszcze jednego iframe). Ogółem efekt kliknięcia jest nieciekawy (w najlepszym wypadku zobaczymy logo facebooka w miejscu menu).
Mniej kłopotliwym rozwiązaniem jest wstawienie diva z ul i odpowiednimi linkami (całość odpowiednio ostylowana) i przekierowania javascriptowego na samym początku strony:

<?
if( $_GET['akcja'] == 'poza' ) {
?><script type="text/javascript">
   top.location.href = 'http://www.facebook.com/jakaś_strona/' ;
 </script>
<?
exit() ;
}
elseif( $_GET['akcja'] == 'tutaj' ) {
?>
<script type="text/javascript">
   top.location.href = 'http://apps.facebook.com/adres_aplikacji/' ;
 </script>
<?
exit() ;
}
?>

To pozwala wyskoczyć z aplikacji, np. na facebookową stronę, którą ta aplikacja ma reklamować.

Tweet
Pin It

Dodaj komentarz