Facebook Like-Box (dawniej Fan-Box)
Posiadacze blogów i stron internetowych mogą promować je za pomocą znanego na całym świecie serwisu społecznościowego Facebook. Najbardziej popularną i moim zdaniem najlepszą formą promocji strony na FB jest wtyczka społecznościowa Like-Box. Jak dodać stronę do Facebooka? Jak zainstalować Like-Box na stronie? Jak zmienić jego wygląd? Jak zadbać o walidację? W tym wpisie można znaleźć odpowiedzi na te pytania.
Czy tworzyć konto Facebook dla strony?
Dedykowane konto Facebook jest potrzebne jedynie w przypadku, gdy chcemy mieć możliwość komentowania jako strona WWW. Jeżeli nie potrzebujemy takiej funkcjonalności, lepiej po prostu dodać stronę do Facebooka ze swojego konta prywatnego.
Jak dodać stronę do Facebooka?
Dodanie strony do Facebooka jest bardzo proste. Trzeba wypełnić formularz znajdujący się na stronie www.facebook.com/pages/create.php, a następnie przesłać logo i wypełnić zakładkę Informacje. Na koniec, klikając w przycisk Udostępnij, można pochwalić się dodaną stroną na tablicy swojego profilu.
Jak zainstalować Like-Box na stronie?
Przed instalacją wtyczki społecznościowej należy poznać Facebook-owy identyfikator dodanej strony. Jest on widoczny na końcu adresu strony na FB. Przykładowo, adres mojego bloga to facebook.com/pages/Maciej-Chalapuk-O-programowaniu-stron-WWW/120014894715595, a więc jego identyfikator to 120014894715595.
Poznany w ten sposób identyfikator wpisujemy w pole formularza o nazwie Facebook Page ID na stronie developers.facebook.com/docs/reference/plugins/like-box. Kliknięcie poza formularz spowoduje pojawienie się Like-Boxa z prawej strony. Po dostosowaniu parametrów i kliknięciu w przycisk Get Code, w ramce iframe pojawi się kod do wklejenia na stronę.
Jak zmienić wygląd Like-Boxa?
Like-box jest stosunkowo nową wtyczką społecznościową. Na obecną chwilę nie ma sposobu na zmianę jego wyglądu. Można jednak skorzystać ze starszej wersji wtyczki, Fan-Box. Zmiana wyglądu realizowana jest poprzez dołączenie pliku kaskadowych arkuszy stylów. Poniższy formularz generuje kod Fan-Boxa do wklejenia na stronę.
| Strumień FB |
Włącz JavaScript!
W pole o nazwie CSS należy wpisać adres pliku, który będzie załadowany jako styl wtyczki społecznościowej. Przed utworzeniem pliku stylów trzeba poznać strukturę DOM dokumentu Fan-Boxa. Można do tego celu użyć narzędzia FireBug lub podobnego.
FaceBook Markup Language
Wstawienie ramki na stronę wydłuża czas ładowania. Można jednak uniknąć takiego efektu używając języka znaczników aplikacji FaceBook. Zamiast elementu <iframe> na stronę wstawiamy kod z ramki FBML, a zaraz za nim następujący skrypt.
<div id="fb-root"></div> <script type="text/javascript"> // </script>
Jest to lekko zmodyfikowany skrypt ładujący FBJS API w trybie asynchronicznym. Od oryginalnego skryptu różni tym, że nie powoduje wycieku pamięci w IE.
Jak zadbać o walidację?
Poprawne użycie języka FBML jest możliwe tylko w dokumencie XHTML. Do korzenia dokumentu należy dodać deklarację przestrzeni nazw fb.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
Pomimo dodania przestrzeni nazw, walidator W3C nie przepuszcza tagów Facebooka. Jedynym obejściem jest wstawienie tagu FBML za pomocą języka JavaScript. Realizujemy to wklejając zamiast FBML-a kod z ramki script wygenerowany w powyższym formularzu.
Witaj Macieju,
dzięki za świetny wpis, dokładnie taki efekt mnie interesuje. Mam tylko jedno pytanie, a mianowicie: mam zmieniony adres fanpage na FB na własny i nie mam pojęcia w jaki sposób mogę sprawdzić ID, czy wiesz może gdzie je znajdę?
Pozdrawiam!
Witam,
Jak chcę zrobić stronę firmową na facebooku i mam przygotowane folery html, css, images: gdzie to się tam kopiuje? Jakoś niedawno zacząłem tam zaglądać, mam stronę z nazwą tylko co dalej?
Pozdro, Krzysztof