Boks Lubię to! - Like Box - wakacyjny kurs Facebooka

Ostatnio była mowa o przycisku Lubię to! - tym razem zajmiemy się całym box'em Lubię to! czyli Like Box. W odróżnieniu od przycisku jest on powiązany z profilem strony lub aplikacji na Facebook'u. Oprócz ikonki profilu i jej nazwy mamy do dyspozycji także listę osób lubiących naszą stronę, krótki przegląd treści, które umieszczamy na tablicy, a z elementów graficznych możemy włączyć lub wyłączyć nagłówek z logiem Facebooka.


Głównym wymogiem podłączenia strony lub aplikacji jest znajomość jej ID. W przypadku aplikacji możemy ją odczytać w panelu aplikacji (przykład na obrazku poniżej), zaś w przypadku stron możemy ją znaleźć w adresie URL (np. http://www.facebook.com/pages/Informatyczny-blog-o-najnowszym-JavaScripcie/403116485292 - id to 403116485292).

W momencie, kiedy posiadamy tę informację możemy przejść do kreatora Like Box'a. Podobnie jak w przypadku przycisku Lubię to! kod generowany jest w dwóch postaciach - XFBML oraz iframe po przyciśnięciu przycisku Get Code.

Wersja minimalistyczna pluginu zawiera tylko ikonkę, tytuł naszej strony (podlinkowany do Facebooka) oraz button Lubię to! Użytkownik klikając w ten przycisk jednocześnie staje się dawniej "fanem" oraz "lubiącym" naszą stronę. W celu wyłączenia wszystkich dodatków należy wyłączyć oba checkboxy (Show header oraz show stream), a liczbę kontaktów (Connections) ustawić na 0.

Jeżeli włączymy kontakty, wówczas pod informacją o naszej stronie pojawią się osoby lubiące naszą stronę.

Włączenie nagłówka powoduje dodanie do naszego boxu tekstu 'znajdź nas na Facebooku' na samej górze.

Włączenie strumienia informacji powoduje dodanie listy wiadomości umieszczonych na tablicy naszej aplikacji lub strony.


W artykule na temat umieszczania przycisku Lubię to! do aplikacji na Facebooku wykorzystałem właśnie Like Box w minimalistycznej wersji, który osadziłem w aplikacji metodą iframe.

Prześlij dalej:

23 komentarze:

Anonimowy pisze...

Fajna sprawa ... ale nie działa na google sides. Jeśli się mylę (próbowałem)czekam na podpowiedź.

Michał Biniek pisze...

Sprawdzałem czy działa na kodzie wygenerowanym jako iframe i się okazało, że da się to zrobić bez większych problemów - wystarczy wejść w edycję strony, wyedytować HTML (ostatni przycisk po prawej), dodać skopiowany z kreatora kod i zapisać (w podglądzie też się pokazuje).

Specjalnie założyłem stronkę na sites'ach:
https://sites.google.com/site/anomalia010010/

Może akurat w momencie jak próbowałeś Facebook miał problemy z działaniem ;)

mane anaroore pisze...

Witam, Właśnie dodawałem Like Box'a na stronie którą robię, ale box ten wyświetla mi się w języku angielskim tak samo jak przyciski "Recommend" i "like". Mam pytanie, co zrobić, aby te przyciski oraz like box były w języku polskim?

Michał Biniek pisze...

W przypadku iframe należy dodać parametr locale=pl_PL do adresu URL, aby wymusić język polski.

mane anaroore pisze...

A w przypadku JS w połączeniu z tagami fb istnieje taka możliwość?
Dzięki za radę :-)

Michał Biniek pisze...

W przypadku używania XFBML zmianę języka robimy w URL'u skryptu np. zamiast
http://connect.facebook.net/en_US/all.js#xfbml=1
wpisujemy
http://connect.facebook.net/pl_PL/all.js#xfbml=1

mane anaroore pisze...

Dzięki wielki bardzo mi to pomogło, teraz z czystym - Polskim :P sumieniem mogę kończyć me dzieło :D

Yoho pisze...

Czy ktoś może wie jak utworzyć like boxa na blogu wordpress.com (nie org), czytałem u nich na forum że ten blog nie czyta tego iframe, tylko html w czystej postaci (ja się nie znam).

http://developers.facebook.com/docs/reference/plugins/like-box

A FB dostarcza nam dwa kody z których żadnego wordpress nie potrafi odczytać. Da się jakoś to przerobić? Przekonwertować by dało się to wyświetlić?

Michał Biniek pisze...

Na stronie:
http://en.support.wordpress.com/code/

napisano, że zarówno iframe jak i javascript jest wyrzucany z wpisów na wordpress.com z powodów "bezpieczeństwa".

Jedyne teoretyczne rozwiązanie jakie znalazłem to umieszczenie printscreen'a like-box i link do strony na FB - ale jak dla mnie to jest to mocno naciągane

Anonimowy pisze...

Mało powiedziane :)

No cóż, poczekam na "lepsze czasy".

Tak czy siak, dzięki za zainteresowanie.

Maniek pisze...

Witam! Po wklejeniu kodu na stronie sam box wygląda ładnie, natomiast wokół niego jest nieestetyczne obramowanie. Czy istnieje jakiś sposób na edycję tego?

Michał Biniek pisze...

Przy odrobinie CSS można to wyedytować. Wystarczy iframe, opakować w diva, który będzie 2px węższy i niższy, następnie przesunąć iframe o 1px do góry i w lewo, a na diva wrzucić overflow:hidden.
Wówczas style będą wyglądały mniej więcej tak:
iframe.fb {
position:relative;
top:-1px;
left:-1px;
width:301px;
height: 301px;
}

div.nadIframe {
width:299px;
height: 299px;
overflow:hidden;
}

Kuba pisze...

Witam, co do Wordpressa to właśnie robiłem to człowiekowi w widgecie tekstowym i normalnie wyświetla wersję XFBML (WP 3).

Anonimowy pisze...

no ja mam problem gdyz nie moge stworzyc likeboxa używając adresu URL do facebook'a mój profil Bikersquad Wrocław więc założyłem aplikacje apps ale nie potrafie jej powiazac z kontem na facebook'u i nie wiem jak to zrobić jest jakaś mądra rada??

Mapet

Michał Biniek pisze...

Żeby utworzyć like-box musisz posiadać albo stronę albo aplikację. Profil Bikersquad Wrocław jest stworzony jako użytkownik, więc nie ma możliwości utworzenia dla niego like-boxa.

Najlepiej jest założyć stronę - wówczas nie ma problemu zarówno z dodawaniem się jako osoby lubiące (nie trzeba akceptować zaproszeń itp.)
http://www.facebook.com/pages/create.php

Bikersquad Wrocław pisze...

Witam

Tak jak doradziłeś założyłem stronę na FB ale przy rejestracji powiązałem ją z istniejącym profilem bo chciałem nie stracić istniejących kontaktów itd. I mam teraz problem bo jak jestem zalogowany jako profil to wszystko na mojej stronie www.bikersquad.pl wyświetla się prawidłowo ale jak się przełączę w tryb strony na FB to na mojej stronce w miejscu LIKEBOXu i LIKE BUTTONów poka zują sie białe prostokąty są zupełnie nie aktywne. Czy da się coś z tym zrobić??

Pozdrawiam

Michał Biniek pisze...

Rzeczywiście występuje taka dziwna sytuacja :)
Co ciekawe dotyczy to stanu użytkownika, kiedy przełączy się na obojętnie jaką stronę - może chodziło o zablokowanie możliwości polubienia dowolnych stron przez użytkownika podającego się za stronę - a może to zwykły bug.
Pozostaje przełączać się na zwykłego użytkownika, a linki na tablicę strony wrzucać manualnie.

Anonimowy pisze...

Witam!

Mam problem, chciałabym dodać do mojego profilu na Facebooku Like Box (już go stworzyłam i mam kody, ale nie mam pojęcia gdzie je wkleić). Czy Like Box można w ogóle dodać do profilu czy jest on przeznaczony tylko do własnych stron internetowych?

Pozdrawiam, Asia ;).

Michał Biniek pisze...

Witam,

do profilu osoby niestety nie można dodać nic swojego (utworzyć strony itp. - FB to wycofał). W przypadku stron (jak np. JS CodeBlocks) jest to jak najbardziej możliwe - wówczas konieczne jest stworzenie zakładki.

Anonimowy pisze...

Witam.

Chciałbym powiązać pewną stronę internetową która jest administrowana przez FLEXMIND ale skończyły mi się już pomysły jak to zrobić. Może ktoś wie jak to zrobić za pomocą wigetów bo za pośrednistwem zwykłego linka jest zrobione.

Michal Biniek pisze...

Facebook oferuje podłączenie przez wykorzystanie HTML lub XFBML. W przypadku tego pierwszego musismy wkleić kod HTML. W przypadku XFBML musimy dodatkowo zmodyfikować szablon strony (a dokładniej tag <html>). Nie miałem styczności z rozwiązaniami flexmind - ale jeżeli istnieją widżety typu - 'wstaw kod html' - jak w przypadku platformy Blogger to można je swobodnie wykorzystać (do pierwszego przypadku).

Agnes pisze...

Po wygenerowaniu kodu jak mam go umieścić na tej stronie?? Ponieważ wklejam go do okienka z Javascript/HTML i on nie działa.

Michal Biniek pisze...

W przypadku Bloggera użyłem opcji IFRAME - i jak widać po prawej stronie działa całkiem sprawnie :)

Prześlij komentarz