Jak osadzić XFBML na własnej stronie - wakacyjny kurs Facebook'a

Każdy social plugin Facebook'a może być umieszczony za pomocą XFBML - niektóre tylko za jego pomocą. Co to jest i w jaki sposób go osadzić na własnej stronie? XFBML jest rozszerzeniem HTML'a, który pozwala na umieszczanie elementów Facebook'a za pomocą znaczników - są one tłumaczone i przekształcane np. w button like. Ich zasadniczymi plusami są:
  • łatwiejsze osadzanie na stronie
  • większe możliwości konfiguracji osadzanych obiektów
Minusem jest konieczność skorzystania z dodatkowej biblioteki Javascript SDK - i zaraz właśnie o tym...


Pierwszym etapem skorzystania z Javascript SDK jest zarejestrowanie aplikacji na Facebook'u.


Jeżeli uda nam się przejść przez ten etap powinniśmy uzyskać id aplikacji - próbując w ostatnich dniach zarejestrować aplikację serwer Facebooka zawsze zwracał komunikat błędu 500 - co nie przeszkadzało mu utworzyć aplikacji. Tak więc po otrzymaniu białej strony warto wejść na facebook.com/developers i sprawdzić czy nasza aplikacja nie została dodana.


Istnieje kilka metod uruchomienia XFBML'a - zdaje się, że najszybsza metoda polega na dodaniu kodu JavaScript'owego opisanego pod metodą FB.init - najlepiej kod umieścić na samym początku w znaczniku <body>. Poniżej kod do asynchronicznego załadowania tej metody.
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : 'ID APLIKACJI',
      status : true, // czy ma sprawdzać logowanie
      cookie : true, // uruchomienie cookiesów do sesji
      xfbml  : true  // parsowanie XFBML
    });
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/pl_PL/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
W ten oto sposób po uruchomieniu strony XFBML zostanie znaleziony i podmieniony na odpowiadające mu komponenty Facebook'a.
Oprócz komponentów social plugins XFBML ma dużo większe możliwości. Pozwala nam m.in. na dodawanie zdjęć z Facebook'a. Pełna (chyba) lista tagów dostępnych w ramach XFBML znajduje się w dokumentacji na developers.facebook.com.

A następnym razem zajmiemy się już social plugin'ami, które wymagają XFBML'a - Comments Box.

Prześlij dalej:

8 komentarzy:

lukastyniec pisze...

Niestety nie da się zarejestrować aplikacji. Wyskakuje okno:
"Abyś można było wykonać tę operację, Twoje konto musi zostać zweryfikowane. Możesz to zrobić, dodając jedną z następujących informacji: telefon komórkowy lub karta kredytowa."
Sms nie przychodzi, a karty facebook nie może zweryfikować. Da się jakoś to obejść?
Lukas

Michał Biniek pisze...

Rzeczywiście w ostatnich dniach włączyli weryfikację użytkowników, którzy chcą stworzyć aplikacje - natomiast u mnie proces weryfikacji przebiegł bezproblemowo - po kilku sekundach otrzymałem smsa

Marek Biśta pisze...

Ja dostałem sms-a po 2 dniach, tyle że mieszkam za granicą

lukastyniec pisze...

Sms przyszedł, ale jak podałem telefon z innej sieci. Z sieci PLAY niestety nie przyszedł nigdy.
Byłbym wdzięczny jakby na blogu (ukłon do autora :) pojawił się szczegółowy i łopatologiczny opis jak stworzyć Comments Box. Eksperymentowałem z tym i pojawiły się problemy, np. osoba zalogowana przez facebooka nie może dać komentarza(?), zresztą teraz chyba i anonimowa nie może(!). W sieci nie znalazłem żadnego prostego tutoriala (szukałem na stronach ang), a już na polskich stronach tym bardziej. U mnie w serwisie wygląda to tak: http://asserwisowy.pl/szukam_partnera_do_gry_w_tenisa.html

Michał Biniek pisze...

Hmm, z tego co widzę, to u Ciebie na stronie dwa razy wywołujesz skrypt facebookowy i masz dwa razy <div id="fb-root"></div>
Wpis o komentarzach już zrobiłem - ale może faktycznie uzupełnię go o pełny kod potrzebny do uruchomienia komentarzy na stronie (dajcie mi kilka dni ;)).

Co do sieci to faktycznie używałem Orange UK - wtedy wszystko jest raz raz.

Anonimowy pisze...

Sms'a jak nie było tak nie ma :/

Destylator pisze...

Dzięki!:)
prostego przewodnika, jak to zrobić było trzeba.
Czyatając dokumentację ze strony FB, chyba za dużo nadinterpretacji własnej w to wkładałem i nigdy nie działało:)

Odnośnie smsów - faktycznie, trzeba czekać b.długo. Inną opcją jest podanie nru karty kredytowej, wtedy weryfikacja "od ręki":)

Anonimowy pisze...

U mnie weryfikacja udała się jedynie z plusa. Była to jedyna opcja w wyborze operatora... niestety ;)

Prześlij komentarz