Przycisk 'Lubię to' w aplikacji na Facebooku

Od niedawna Facebook udostępnił w ramach Social Plugins możliwość umieszczania przycisku Lubię to (dawnego Zostań fanem) na swoich stronach. Dobrym pomysłem byłoby umieszczenie takiego przycisku w naszej aplikacji działającej na Facebook'u - czy to do naszej strony, czy do strony aplikacji. Niestety sam komponent fb:like może służyć tylko do linków zewnętrznych. Wówczas z pomocą przychodzi nam komponent fb:like-box przystosowany właśnie do aplikacji oraz stron - przy odrobinie ustawień możemy zrobić kontrolkę, która będzie całkiem schludnie zachęcać użytkowników do polubienia naszej aplikacji.

Podgląd plugin'u Lubię to dla bloga

Co prawda założenie Social Plugins zakładało stosowanie ich na zewnętrznych stronach, natomiast umożliwiają one funkcjonalności niedostępne z poziomu wewnętrznych API Facebook'a. Tworząc aplikację w iframe i stosując XFBML mamy dostęp do komponentów z kategorii Social Plugins. Co natomiast mają zrobić osoby korzystające z FBML'a? Także zastosować iframe! Ale od początku...

Generowanie like-box'a

Pierwszym krokiem jest zapoznanie się z kreatorem like-box'ów (http://developers.facebook.com/docs/reference/plugins/like-box). Aby zminimalizować liczbę dodatków wyłączamy checkbox'y Show stream oraz Show header, a liczbę Connections dajemy na 0. Wówczas powinien pojawić się obrazek podobny do tego zamieszczonego powyżej. Następnie w miejsce Facebook Page ID wpisujemy numer ID naszej aplikacji lub strony (tak, to nie ma znaczenia...). Podgląd powinien się uaktualnić już z prawidłowymi danymi. Jeżeli np. wysokość iframe'a jest za mała poprawimy ją za moment. Następnie klikamy Get Code! i kopiujemy zawartość iframe.

Okno z wygenerowanym kodem

<iframe src="http://www.facebook.com/plugins/likebox.php?id=403116485292&amp;width=292&amp;connections=0&amp;stream=false&amp;header=false&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>

Wstawianie like-box'a do aplikacji

Wstawienie like-box'a sprowadza się do wklejenia danych do kodu naszej aplikacji, jednocześnie zmieniając znacznik iframe na fb:iframe oraz usuwając nieuprawnione atrybuty (allowTransparency="true").
Jeżeli chcemy zmienić wielkość ramki, w tym celu zmieniamy w atrybucie style parametr height oraz w atrybucie src, także height (zmiana w url'u).
W ten sposób wdrożyliśmy like-box do naszej aplikacji.

<fb:iframe src="http://www.facebook.com/plugins/likebox.php?id=403116485292&amp;width=292&amp;connections=0&amp;stream=false&amp;header=false&amp;height=82" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:82px;"></fb:iframe>

Liczę także, że Facebook wkrótce udostępni API, które będzie udostępniało te funkcjonalności bez konieczności kombinowania ;)