Button 'Lubię to' na Twojej stronie lub blogu - wakacyjny kurs Facebooka

W ramach wakacyjnego kursu Facebook'a będziemy zajmować się social plugin'ami oraz innymi bonusami, które Facebook pozwala umieścić na swoich stronach. Na początek zajmiemy się magicznym przyciskiem Lubię to. Dzięki temu plugin'owi możemy lubić każdą stronę w Internecie, ale jest ona powiązana z Facebook'iem tylko poprzez adres URL - nie ma możliwości połączenia ze stroną lub profilem na FB.

Umieszczenie przycisku Lubię to można zrealizować na dwa sposoby:
  • poprzez iframe - IMHO łatwiejszy sposób, bo nie trzeba osadzać XFBML'a
  • poprzez XFBML - prostszy kod, ale wymaga wcześniejszego skonfigurowania strony
Generalnie jeżeli już używamy XFBML na stronie to warto umieścić tam kod dopasowany do tej strony (krótszy i prostszy) - jeśli nie to korzystam z iframe'a.

Generator buttona pozwala nam na następujące modyfikacje wyglądu:
  • wygląd - standardowy (button + tekst zachęcający + ilość lubiących/lubisiów) lub tylko licznik (button + liczba)
  • wyświetlane słowo - lubię (like) lub rekomenduję (recommend)
  • czcionka - 6 czcionek do wyboru
  • kolorystyka - jasny i ciemny

I krótka porada dotycząca podawania URL'i:
  • jeżeli osadzamy kod bez podania URL - w trybie iframe ma domyślną stronę (www.example.com/page/to/like) - i niestety wówczas lubimy właśnie tę stronę - dlatego koniecznie uzupełniajmy pole URL :( w przypadku trybu XFBML po prostu nie podajemy URL - wrzucany jest adres strony na której się znajdujemy
Po ustawieniu wszystkich parametrów pobieramy kod poprzez kliknięcie w button Get Code. Wówczas pokazuje się ekran z wygenerowanym kodem iframe oraz XFBML - pozostaje przekleić wybraną wersję kodu do siebie na stronę.



Następny post z serii wakacyjnego kursu, będzie dotyczył komponentu Like Box.

Prześlij dalej:

15 komentarzy:

Krzysiek pisze...

Rewelacja ... bardzo się przyda :) Dzięki!!!

bw pisze...

Pytanie bo pewnej rzeczy nie jestem w stanie przeskoczyć (korzystam z iframe):

URL to like: jaki wpisać tam URL? chciałbym by button na mojej stronie łączył się z artykułem opublikowanym na FB.

Jeśli wpiszę URL profilu na FB to wyświetla mi wszystkich lubiących stronę
Jeśli wpiszę URL mojej strony - to nie wiąże się to ze stroną na FB, czyli jak ktoś kliknie na mojej stronie "Lubię to" to nie wyświetla się informacja pod artykułem na FB, iż ta osoba "lubi" ten artykuł.

Jaki w takim razie wkleić tam URL ?

Michał Biniek pisze...

Obawiam się, że nie opracowano jeszcze metody "lubienia" poszczególnych postów na FB :(

Natomiast można sprawdzić jakie możliwości daje Graph API http://developers.facebook.com/docs/api - myślę, że z tego można wyciągnąć parę informacji, a następnie pokombinować z JavaScript SDK (które co prawda co chwilę się zmienia, ale cóż ;)).

Anonimowy pisze...

A czy to można jakoś zautomatyzować? Jak zrobić, by dla każdego nowo utworzonego wpisu pojawił się przycisk „Lubię to”?
Dziękuję!
Zbyszek

Michał Biniek pisze...

W przypadku iframe trzeba odpowiednio spreparować adres URL ramki np.
<iframe src="http://www.facebook.com/plugins/like.php?href=TESTURL&layout=standard& show_faces=true&width=450&action=like&font=verdana&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

w miejscu TESTURL musimy wkleić aktualny adres URL. W przypadku bloggera taka wartość jest przekazywana do szablonu jako data:post.url.

W przypadku XFBML adres URL jest automatycznie wykrywany.

Anonimowy pisze...

Bardzo pomocne info:) dzięki:) wszystko szło zgodnie z planem do momentu wklejenia kodu na stronę - kod grzecznie zamienia się w 'like'a' w ustawieniach, ale nie jest widoczny w finalnym wyglądzie strony. Czy to możliwe, że nie wszystkie 'blogosfery' (w tym wypadku onet) lubią facebook'owy kciuk?
Z góry dziękuję!

Anonimowy pisze...

ps (do postu powyżej)
coraz bardziej przekonuję się o tym, że onet.blog to nie najlepsze miejsce na blogowanie:/
dla jasności - wklejałam iframe.

Michał Biniek pisze...

Z tego co sprawdziłem, to blog onet rzeczywiście wycina iframe'y (chociaż w podglądzie są). Nie widzę też żadnych dodatkowych ramek - zresztą z tego co można zauważyć to serwis onetowy był przygotowywany w okolicach 2003 r. - to Facebooka wtedy jeszcze nie było :)
Być może da się to jakoś obejść - natomiast ja metody nie znalazłem :(
W przypadku Bloggera nie ma takich problemów - bo oprócz tego, że w stopce musi być 'Technologia Blogger' to całą resztę można wymienić.

Anonimowy pisze...

Tak, rok 2003, 'świat przed Facebookiem';), tak przy okazji - dobry temat na kolejny wpis - dzięki!:)
I dziękuję oczywiście za odpowiedź:)
Pozdrawiam, E.

Anonimowy pisze...

... no i - świetny blog:)
E.

Robert pisze...

Przydatny post. Dzięki. Po długich poszukiwaniach udało mi się umieścić przycisk na swojej stronie finansowo-bankowej.

Anonimowy pisze...

nie wiem co jest ale jak osadzam kod dla XFBML to strona jest pusta - błagam o pomoc

Michal Biniek pisze...

Być może wyskoczył jakiś błąd w JavaScripcie albo coś w tym stylu - polecam przejrzeć konsolę błędów - tam będą zarówno błędy CSS jak i JS

Anonimowy pisze...

Witam, jak zrobić coś takiego jak jest na filmweb - plugin po prawej - czyli, że po kliknięciu lubię to automatycznie pojawia się link do podstrony opublikowany u klikającego?

Michal Biniek pisze...

Wyglada na to, ze to samo sie dodaje - http://jsfiddle.net/9ctX8/

Teraz tez widze, ze FB zmienil nareszcie, ze do polubienia nie wystarczy kliknac like, a takze potwierdzic akcje - co powinno w przyszlosci dostarczyc duzo mniejszej ilosci dziwnego spamu na FB

Prześlij komentarz