02 września 2010 ~ Komentarzy: 58

Facebook Like-Box (dawniej Fan-Box)

CSS JavaScript
{lang: 'pl'}

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
iframeFBMLscript
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.

Tagi: , , , , , ,

Podobne wpisy

Komentarze dla “Facebook Like-Box (dawniej Fan-Box)”

  1. Rafał 26 listopada 2010 at 07:47 Permalink

    Tekst bardzo pomocny, żółtodziób sobie poradzi bez problemu.

  2. Michał Saks 5 grudnia 2010 at 22:57 Permalink

    Jak wstawić like box z tekstami w języku Polskim?

  3. Maciej Chałapuk 5 grudnia 2010 at 23:03 Permalink

    W kodzie ramki <iframe> na końcu atrybutu src trzeba dopisać: &locale=pl_PL

  4. magd 30 grudnia 2010 at 21:39 Permalink

    a gdzie sie wpisuje ten kod na własnej stronie, w którym miejscu?

  5. Maciej Chałapuk 31 grudnia 2010 at 13:42 Permalink

    W miejscu, gdzie chcesz mieć swój likebox.

  6. internetowy 15 stycznia 2011 at 17:54 Permalink

    Dzięki za ten tekst,bardzo sie przydał.
    Pozdrawiam

  7. marazz 8 lutego 2011 at 16:47 Permalink

    Witam,
    Mam kluczowe pytanie: czy Like Box działa tylko na wordpress.org, czy również na wordpress.com?
    Pozdrawiam,
    mrz

  8. Maciej Chałapuk 8 lutego 2011 at 18:45 Permalink

    Na pewno działa na każdej domenie.

  9. Dream 18 lutego 2011 at 10:14 Permalink

    Jestem nowicjuszem i mi nie wyszło :-(
    iframe w ogole nie chce się wkleić, tj po zapisaniu zmian „znika”. XFBML da się wkleić, ale nic się nie wyświetla. Strona jest w joomla. Kod wklejam do tresci artykulu w edytorze kodu. Proszę o pomoc!

  10. Maciej Chałapuk 18 lutego 2011 at 23:36 Permalink

    W przypadku CMS-ów najlepiej korzystać z gotowych wtyczek
    http://extensions.joomla.org/extensions/social-web/republish/12589

  11. Dream 19 lutego 2011 at 23:37 Permalink

    Wielkie dzięki! Wygląda na to, że ta wtyczka jest osobnym modułem w Joomla, a ja potrzebuję wstawić Like box’a w treść artykułu – czy wiecie moze jak to osiągnąć?

  12. Maciej Chałapuk 20 lutego 2011 at 00:25 Permalink

    http://www.formularze.eu/przewodnik-pomoc/formularze-joomla
    Na tej stronie znajdziesz 3 sposoby zamieszczania znacznika <iframe> w treści artykułu Joomla.

  13. Dream 1 marca 2011 at 23:04 Permalink

    Wielkie dzięki!!!! Działa :-) :-) :-)

  14. Dado 2 marca 2011 at 20:41 Permalink

    Mam dwa problemy dotyczące wtyczki Like Box:
    1. W przeglądarce FF nie widać w ogóle wtyczki ( w innych przeglądarkach jest widoczna)
    2. Jak już ktoś kliknie ‘Lubię to’ są dwa jego zdjęcia. Jakoś tak dziwnie powielają się zdjęcia użytkowników.
    Czym to może być spowodowane?

  15. Maciej Chałapuk 2 marca 2011 at 21:08 Permalink

    Ad 1. Jeżeli chodzi o Like-Box na stronie bystrzyca.info.pl, to u mnie w Firefoksie działa bez zarzutu.
    Ad 2. To normalne – chyba bug w Like-Boksie. Jak będziesz miał więcej „lajkujących”, to nie będzie sie zdarzać.
    Pozdrawiam :)

  16. Dado 2 marca 2011 at 22:34 Permalink

    Dzięki za odpowiedź :)
    Pozdrawiam.

  17. Roxter 19 marca 2011 at 20:04 Permalink

    Witam serdecznie!

    Probowałem już chyba wszystkiego. I tu i na oficjalnym fejsie.
    Ale moja strona jakoś opiera się Likeboxowi.

    Może robię coś źle z tym css.? nie mam pojęcia ale generalnie albo się pojawia rozsypana to pole albo wogóle się nie pojawia.
    Pomożecie?
    Moja strona to Wersowanie i tak też chciałbym ją nazwać
    Rozmwiary to wysokość 200 na 150szerokości ilość widocznych fanów 3
    tradycyjny wygląd jakiś…
    Mam stronę na blogspot.com
    moje id to 133478526725778
    Co myslicie?

  18. Roxter 19 marca 2011 at 20:21 Permalink

    http://wersowanie.blogspot.com/

    Zobaczcie… niby jest i wszystko ładnie styka.

    ale tło sie nie łduje ;/ Nie wiem czy to wina witryny czy moja ;p

    Propozycje?

  19. Roxter 19 marca 2011 at 20:29 Permalink

    No czarny niby się ładuje ale biały nie bardzo..

  20. Maciej Chałapuk 26 marca 2011 at 01:00 Permalink

    Nie wiem do końca jaki efekt chcesz osiągnąć. Moim zdaniem to wygląda OK. Pojawia się normalny likebox w wersji dark. Jeżeli chcesz zmienić wygląd wtyczki, to musisz to zrobić tak, jak jest opisane w akapicie Jak zmienić wygląd Like-Boxa?

  21. Krzysztof Dębicki 17 kwietnia 2011 at 14:46 Permalink

    Opis jest rewelacyjny … A jaku uzyskać efekt wtyczki takiej jak na stronie: http://www.miss.warszawa.pl/?

  22. Bob 7 maja 2011 at 13:41 Permalink

    Skorzystałem z Fan-Box’a ładowanego sposobem FBML przy pomocy javascriptu jednak nie czyta mi pliku CSS. W kodzie podany jest css=”adres” który po wpisaniu w przeglądarke wyświetla się jednak wtyczka nie czyta go w ogole. Prosze o pomoc.

  23. Maciej Chałapuk 7 maja 2011 at 20:38 Permalink

    Musisz podać linka do twojego niedziałąjącego FanBoxa.

  24. Markoss 11 maja 2011 at 18:13 Permalink

    Wszystko jest ok tylko wklejam Fan Box w Html i wyskakuje mi pod postem. W którym miejscu nalezy ten kod wkleic zeby wyskakiwał mi po prawej stronie np pod obserwatorami. Dodam ze jestem tatalnym laikiem jeśli chodzi o HTML czy jakikolwiek inny język
    Adres mojego bloga to
    http://nieprzyzwoityblog.blogspot.com/

  25. Markoss 11 maja 2011 at 18:16 Permalink

    dodam że chciałbym ją umieścic nad Archiwum Bloga

  26. Maciej Chałapuk 11 maja 2011 at 19:53 Permalink

    Wejdź Design>Page Elements i kliknij link Add-A-Gadget. Wybierz HTML/Javascript i wklej tam kod. Następnie zapisz.

  27. Markoss 12 maja 2011 at 14:55 Permalink

    Dziekuje bardzo:) działa..

  28. WujekSamoZuo 7 czerwca 2011 at 01:27 Permalink

    U mnie jest taki problem jak widac na stronie http://www.pogawedka.eu pasek sie wysuwa aczkolwiek cos jest nie tak z obrazkiem bo na dole jest jak by za długi, na dodatek wyswietla sie tylko jakie info strony a nie kto lubi to, na dodatek jak sie wejdzie w głab forum i wyswietli pasek to jest znowu jeszcze inna zawartosc widgetu..

  29. WujekSamoZuo 7 czerwca 2011 at 01:29 Permalink

    apomniałbym dodac, bład w generatorze mi sie pojawia jak tylko wpisze ID konta które jest nastepujace:100002379264538 OCB?

  30. Pawel Krawczyk 15 czerwca 2011 at 10:01 Permalink

    Czy jest mozliwe ukrycie zdjecia profilowego ktore jest po lewej stronie od nazwy profilu i przycisku Like ?

  31. Maciej Chałapuk 15 czerwca 2011 at 10:20 Permalink

    Tak. Dzięki arkuszom CSS można ukryć dowolny element strony. Powyżej jest instrukcja jak dołączyć własny CSS do LikeBox-a. Podpowiedź (display: none;)

  32. Rafał 22 czerwca 2011 at 20:31 Permalink

    Ja z kolei próbuję uruchomić fan boxa (tzn. wczytywanie danych) po najechaniu na diva. Kod wstawiony na stronie działa o.k. Wklejony za pomocą jquery nie.
    Niestety poległem. Wykombinowałem tak:

    $(function (){
    $(„.wfacebook”).hover(
    function(){
    if($(„.wfacebook”).html()==”"){
    $(„.wfacebook”).html(„tu kod XFBML”);
    }
    $(„.wfacebook”).stop(true, false).animate({right:”0″},”medium”);

    },
    function(){
    $(„.wfacebook”).stop(true, false).animate({right:”-205″},”medium”);
    },
    500
    );
    });

  33. Maciej Chałapuk 22 czerwca 2011 at 21:05 Permalink

    Fan-Box powinien być załadowany na starcie strony, a tylko pokazywany(animacja) na hover.

  34. Grzyn 23 czerwca 2011 at 17:15 Permalink

    Mam taki problem ponieważ raz Fan Box działa a raz nie i wyskakuje napis The page you are trying to access is restricted or unavailable. Co mam zrobić?

  35. Maciej Chałapuk 24 czerwca 2011 at 09:15 Permalink

    Spróbuj usunąć stronę z Facebooka, założyć na nowo i wygenerować fan box-a dla nowego ID.

  36. Wojtek 6 lipca 2011 at 14:00 Permalink

    Sorry za głupie pytanie ale żółtodziób jestem. Dodałem fan-boxa na stronie. Wszystko działa na IE i Chrome. A na mozilli nie ładyją się zdjęcia. Gdzie szukać błędu w kodzie??? Dzięki

  37. Misiek 11 lipca 2011 at 14:29 Permalink

    Hej!

    Wiem, że temat like boxa po polsku był już poruszany, jednakże próbowałem dopisywać &locale=pl_PL i nic z tego nie wychodzi. Mógłbyś podać jaśniej lub podać jakiś przykład kodu, gdzie mam to wpisać?

    Dzięki i pozdro Misiek

  38. Maciej Chałapuk 11 lipca 2011 at 14:33 Permalink

    Kod fanbox-a na tym blogu wygląda tak:

    <iframe scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 350px; width: 282px; " src="http://www.facebook.com/plugins/fan.php?connections=12&css=http%3A%2F%2Fwww.chalapuk.pl%2Fcss%2Ffbfanbox.css%3F1&height=350&id=120014894715595&locale=pl_PL&sdk=joey&stream=false&width=282"></iframe>
  39. Misiek 11 lipca 2011 at 14:41 Permalink

    hmm… a jak idzie kod idzie przez XFBML.

  40. Maciej Chałapuk 11 lipca 2011 at 15:21 Permalink

    Kod z akapitu „FaceBook Markup Language” załatwia sprawę.

  41. Misiek 11 lipca 2011 at 15:42 Permalink

    Dzięki:) działa

  42. Art 21 lipca 2011 at 12:44 Permalink

    Witam u mnie jest taki problem, gdy podaje kod na mojego like box`a wyskakuje mi taki komunikat „Could not retrieve id for the specified page. Please verify correct href was passed in like box”

    Nie wiem jak sobie z tym poradzić;/

  43. Mati 24 sierpnia 2011 at 14:51 Permalink

    Witam, mam forum na darmowefora.pl i chciałbym wstawić taką wtyczkę społecznościową. Problem jest taki, że nie mam zielonego pojęcia jak to zrobić. Po wygenerowaniu kodu po na stronie powyżej pojawiają się trzy ramki: iframe, FBML i script. Kod z której ramki mam wkleić i gdzie?

  44. Maciej Chałapuk 25 sierpnia 2011 at 08:57 Permalink

    Najłatwiej iframe. Tam gdzie chcesz mieć likebox-a.

  45. GKS TARNOVIA 8 września 2011 at 13:34 Permalink

    Witam chce na własnej stronie internetowej dac odnosnik do profilu na FB jak to zrobić ??

  46. Maciej Chałapuk 8 września 2011 at 13:52 Permalink

    wstawić na stronę kod (zamiast ADRES_PROFILU przekleić adres swojego profilu):

    <a href="ADRES_PROFILU">Mój profil FB</a>
  47. guzy 4 października 2011 at 23:55 Permalink

    Jak sie pozbyć niebieskiego tła w za napisem: Find us on Facebook? Pozbyłam się już ramki, tzn. ustawiłam na białą, ale tego tła nie umiem ustawić na białe. A jestem noga kompletna i wstawienie Like-boxa do strony z szablonu to szczyt moich osiągnięć informatycznych. Zresztą, dzięki tej stronie ten szczyt osiągnęłam. :)

  48. evaguzy.com 4 października 2011 at 23:58 Permalink

    ok, już sobie poradziłam, usunełam caly nagłówek i jest ok. :)

  49. Jula 6 października 2011 at 11:42 Permalink

    Może nie będę oryginalna, ale mam problem z wstawieniem like box-a na mojej stronce, dokładnie w sklepie… Posiadam sklep w sklepna5.pl wygenerowałam kod like box-a ale nie mam zielonego pojęcia gdzie go wkleić i czy w ogóle jest taka możliwość w tym sklepie a bardzo mi na tym zależy… BARDZO PROSZĘ O POMOC!!!

  50. Maciej Chałapuk 6 października 2011 at 15:56 Permalink

    Na pewno jest możliwość. Najlepiej zapytać twórcy twojego sklepu.

Nowsze komentarze »

Dodaj komentarz