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
Dziękuję za artykuł. Już prawie ukończyłem „Fan-box”. Jeszcze jakby mógł Pan dokładniej opisać ten punkt: „Przed utworzeniem pliku stylów trzeba poznać strukturę DOM dokumentu Fan-Boxa. Można do tego celu użyć narzędzia FireBug lub podobnego.” Wiem co to Firebug, mam już utworzony i wrzucony na serwer plik fbfanbox.css, ale nie wiem jaką dokładnie treścią go wypełnić. Z góry dziękuję za pomoc.
Potrzebna jest podstawowa znajomość CSS. Polecam kurs css webmaster helion.
Dzięki za przejrzysty, prosty i konkretny opis tworzenia fanboxa, skorzystałem z niego i utworzyłem tą wtyczkę poprawnie, nie wiem dlaczego nie działał mi po wklejeniu kodu który generował api facebooka.
Sławek pliku css nie musisz modyfikować jeżeli nie widzisz takiej potrzeby, ja pozostawiłem go niezmieniony a ewentualny jego wygląd czy tło możesz zmienić w htmlu np. dodając jakiegoś diva.
Instrukcja super, ale mam problem bo nie wiem jak mam to wkleić na bloga aby było widoczne.
Spróbuj znaleźć odpowiedź na swoje pytanie w poprzednich komentarzach. Jeśli nie znajdziesz, napisz jakiego używasz bloga.