Fan Box - boks z fanami - wakacyjny kurs Facebook'a

Komponent Fan Box dostępny w XFBML'u jest bardzo zbliżony do social pluginu Like Box - posiada praktycznie tą samą funkcjonalność - natomiast FB dołączył Fan Box'a w miarę dokładną specyfikację oraz do niedawna oferował możliwość łatwej integracji z platformami blogowymi takimi jak Blogger, TypePad. Niestety obecnie kreator Fan Box'a przenosi nas do kreatora Like Box'a.


Fan Box podobnie jak Like Box pozwala na umieszczenie na stronie listy osób lubiących daną stronę - ew. można dołączyć listę aktywności. Boks umieszczamy za pomocą znacznika <fb:fan>, a następnie dodając do niego atrybuty opisane poniżej:
  • profile_id - identyfikator strony - może być używany zamiennie z name, jednak chociaż jeden z tych parametrów musi być zdefiniowany
  • name - nazwa strony (ciąg znaków umieszczony po http://www.facebook.com/pages, czyli w przypadku tego bloga to Informatyczny-blog-o-najnowszym-JavaScripcie) - używany zamiennie z profile_id - u ta opcja mnie nie działa, trzeba użyć profile_id ;)
  • stream - flaga czy informacje umieszczane na tablicy strony mają być dołączone do boksu (domyślnie włączone)



  • connections - maksymalna ilość fanów do wyświetlenia; w celu wyłączenia wyświetlania ikonek należy wpisać wartość 0 (domyślna wartość to 10, a maksymalna to 100)



  • width - szerokość
  • height - wysokość 
  • css - adres URL (bezwzględny) do arkusza stylów - dzięki czemu można w miarę dokładnie ostylować boks
  • logobar - flaga określająca, czy logo Facebooka na górze boksu ma być wyświetlane


Oto przykładowy kod wygenerowany przez dawny kreator:

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/pl_PL"></script>
<script type="text/javascript">
 FB.init("89e91e80becc96459d5dd04917d0ea22");
</script>
<fb:fan profile_id="403116485292" stream="0" height="298" connections="8" logobar="1" width="263"></fb:fan>
<div style="font-size:8px; padding-left:10px">
 <a href="http://www.facebook.com/pages/Informatyczny-blog-o-najnowszym-JavaScripcie/403116485292">Informatyczny blog o najnowszym JavaScripcie</a>
 na Facebooku
</div>

A oto wynik działania kodu:

Prześlij dalej:

5 komentarzy:

Ajka pisze...

Wszystko fajnie, ale gdzie to dodać na stronie?

Michał Biniek pisze...

W przypadku Bloggera istnieją dwa sposoby dodawania:
- w dziale Design wybieramy miejsce, gdzie chcemy umieścić widżet i klikamy w "Add a gadget"; nastepnie wybieramy z listy HTML/JavaScript i tam w Content wklejamy zawartość.
- umieszczamy kod bezpośrednio w szablonie strony Design > Edit HTML

blekitnooki pisze...

Hmmm a jesli ktoś jest totalnie zielony w tych sprawach?? Co gdzie jak krok po kroku?? Jak to sie ma do witryny Blogspot

Michał Biniek pisze...

Nie ukrywam, że poradnik przygotowałem dla osób nieco "wtajemniczonych" w HTML, stąd sporo skrótów przy tworzeniu dodawaniu widżetu.

Opis do Bloggera/Blogspota jest w komentarzu powyżej - najprościej umieścić widżet HTML/JavaScript, w którego kod wklejamy zawartość wygenerowaną z kreatora Facebooka.

Sophie pisze...

Super! Właśnie tego szukałam. ;3

Prześlij komentarz