Przycisk 'Lubię to' w aplikacji na Facebooku

Od niedawna Facebook udostępnił w ramach Social Plugins możliwość umieszczania przycisku Lubię to (dawnego Zostań fanem) na swoich stronach. Dobrym pomysłem byłoby umieszczenie takiego przycisku w naszej aplikacji działającej na Facebook'u - czy to do naszej strony, czy do strony aplikacji. Niestety sam komponent fb:like może służyć tylko do linków zewnętrznych. Wówczas z pomocą przychodzi nam komponent fb:like-box przystosowany właśnie do aplikacji oraz stron - przy odrobinie ustawień możemy zrobić kontrolkę, która będzie całkiem schludnie zachęcać użytkowników do polubienia naszej aplikacji.
Podgląd plugin'u Lubię to dla bloga
Co prawda założenie Social Plugins zakładało stosowanie ich na zewnętrznych stronach, natomiast umożliwiają one funkcjonalności niedostępne z poziomu wewnętrznych API Facebook'a. Tworząc aplikację w iframe i stosując XFBML mamy dostęp do komponentów z kategorii Social Plugins. Co natomiast mają zrobić osoby korzystające z FBML'a? Także zastosować iframe! Ale od początku...

Generowanie like-box'a

Pierwszym krokiem jest zapoznanie się z kreatorem like-box'ów (http://developers.facebook.com/docs/reference/plugins/like-box). Aby zminimalizować liczbę dodatków wyłączamy checkbox'y Show stream oraz Show header, a liczbę Connections dajemy na 0. Wówczas powinien pojawić się obrazek podobny do tego zamieszczonego powyżej. Następnie w miejsce Facebook Page ID wpisujemy numer ID naszej aplikacji lub strony (tak, to nie ma znaczenia...). Podgląd powinien się uaktualnić już z prawidłowymi danymi. Jeżeli np. wysokość iframe'a jest za mała poprawimy ją za moment. Następnie klikamy Get Code! i kopiujemy zawartość iframe.

Okno z wygenerowanym kodem
<iframe src="http://www.facebook.com/plugins/likebox.php?id=403116485292&amp;width=292&amp;connections=0&amp;stream=false&amp;header=false&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>

Wstawianie like-box'a do aplikacji

Wstawienie like-box'a sprowadza się do wklejenia danych do kodu naszej aplikacji, jednocześnie zmieniając znacznik iframe na fb:iframe oraz usuwając nieuprawnione atrybuty (allowTransparency="true").
Jeżeli chcemy zmienić wielkość ramki, w tym celu zmieniamy w atrybucie style parametr height oraz w atrybucie src, także height (zmiana w url'u).
W ten sposób wdrożyliśmy like-box do naszej aplikacji.
<fb:iframe src="http://www.facebook.com/plugins/likebox.php?id=403116485292&amp;width=292&amp;connections=0&amp;stream=false&amp;header=false&amp;height=82" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:82px;"></fb:iframe>

Liczę także, że Facebook wkrótce udostępni API, które będzie udostępniało te funkcjonalności bez konieczności kombinowania ;)

Prześlij dalej:

21 komentarzy:

Anonimowy pisze...

Witam
Może jesteś w stanie mi pomóc wstawić to na stronkę www.infinium.pl ?
Bo wstawiam w kod htmla ale nie akceptuje...

Michał Biniek pisze...

Witaj,
kod do umieszczenia na stronie to:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FGdansk-Poland%2FInfinium%2F131776406462&width=292&colorscheme=light&connections=10&stream=true&header=true&height=587" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:587px;" allowTransparency="true"></iframe>

Mam nadzieję, że to pomoże :)

Anonimowy pisze...

witam. chciałbym żeby na mojej stronie www pokazała się aktywna ikonka FB lubię to. co zrobić?

Michał Biniek pisze...

Witaj,

jeżeli została utworzona strona na Facebook'u - wówczas można skorzystać z opisanej tutaj metody. W przeciwnym razie polecam skorzystać z Like Button. Krótki opis jak go umieścić na stronie znajduje się na: http://goo.gl/YpraS

Michał Biniek pisze...

Przy okazji polecam wpis o utworzeniu całych boksów:
http://michalbiniek.blogspot.com/2010/07/boks-lubie-to-like-box-wakacyjny-kurs.html

Anonimowy pisze...

niestety nie działa wg opisu

Michał Biniek pisze...

Od niedawna wprowadzono zamiast ID strony jej pełny adres URL. Więc jeżeli strona ma na Facebooku adres http://www.facebook.com/pages/JS-CodeBlocks/403116485292 to w polu URL podajemy cały adres, a nie tylko id (czyli 403116485292).

Mam nadzieję, że tym razem zadziała :)

Sasni pisze...

Tym czasem jak zamieścić przycisk jeden albo drugi na blogu gdy nie są wyświetlane całe wpisy, by Share button odwoływał do tytułu wpisu, a nie całej strony?
Oczywiście po otworzeniu całego wpisu aby również dało się polubić lub podzielić ze znajomymi.

Michał Biniek pisze...

W tym artykule jest omówione jak dodać 'lubię to' do strony, którą mamy założoną na FB.
Jeżeli szukasz informacji o przycisku 'lubię to' do adresów URL: http://michalbiniek.blogspot.com/2010/07/button-lubie-to-na-twojej-stronie-lub.html

W kreatorze tamtego widżetu możesz zdefioniować adres URL, do którego się odnosi button.

Anonimowy pisze...

Witam,
próbowałam wstawić kod strony na FB z przyciskiem Lubię to jako kod iframe do newslettera, ale niestety to działa tylko online, czyli podczas tworzenia i przeglądania newslettera wszystko wygląda ok, ale po wysłaniu newslettera mailem w odebranym mailu wszystko znika, chyba że obejrzy się go klikając w link do strony internetowej, wtedy znowu jest ok. Czy masz może pomysł jak rozwiązać ten problem?

Michał Biniek pisze...

Z tego co się orientuję, to znacznik iframe, nie jest dozwolony w większości programów pocztowych.
Obawiam się, że jedynym wyjściem jest przekierowanie użytkownika na stronę, gdzie dopiero będzie mógł kliknąć w przycisk.

Anonimowy pisze...

Witam,

Mam pytanie. Gdzie trzeba wkleić wygenerowany kod like=box'a ? mam problem z wstawieniem kodu do aplikacji. HELP!!!!!

Michał Biniek pisze...

w szablon strony, czyli dokładniej pomiędzy <body> a </body>

Anonimowy pisze...

Witam
A czemu jak dodaje przycisk "lubie to" na stronie www , po kliknieciu w niego na profilu na FB pojawia mi sie obrazek ktory nie ma nic wspolnego ze strona ? da sie jakos zmienic obrazek jaki ma sie wyswietlac w profilu na FB ?

Michał Biniek pisze...

konfiguracja wyświetlanej zawartości jest możliwa poprzez dodanie tagów Open Graph - tutaj jest opis Open Graph: http://developers.facebook.com/docs/opengraph/.

Można też obczaić opis Open Graph pod kreatorem przycisku http://developers.facebook.com/docs/reference/plugins/like/

Anonimowy pisze...

Staram się dodać Like Button na stronę w momencie gdy chcę pobrać kod wyskakuje mi komunikat : Only verified developers can be added as listed developers of this application. Read http://www.facebook.com/help/?faq=17580 for details.

Nie mam zielonego pojęcia co mam zrobić ?

Michał Biniek pisze...

Komunikat informuje o konieczności potwierdzenia swojego konta poprzez podanie numeru telefonu lub karty kredytowej. Niestety od pewnego czasu FB wprowadził weryfikację programistów.
Jeżeli informacja na stronie http://www.facebook.com/help/?faq=17580 nie wyświetliła się poprawnie - proszę spróbować zmienić język. U mnie po zmianie na English (US) pojawiła się informacja.

Anonimowy pisze...

Od jakiegoś czasu w historii, zaraz po włączeniu komputera pojawiają się adresy: https://www.facebook.com/plugins/like.php?api_key=167367663212&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df1c41e731fcfb0a%26origin%3Dhttp%253A%252F%252Fdemotywatory.pl%252Ff13854bc36e2518%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&font=arial&href=http%3A%2F%2Fdemotywatory.pl%2F3403811%2FTrojkat-Bermudzki&layout=button_count&locale=pl_PL&node_type=link&sdk=joey&show_faces=false&width=130
Skąd się to wzięło i jak się tego pozbyć, wkurza mnie gdy komputer wczytuje jakieś adresy na nic nie potrzebne.

Michał Biniek pisze...

Działanie pola 'Lubię to' polega na wczytaniu go w iframe ze strony FB - stąd taki wpis w historii. Pozostaje zablokować FB, albo żądania do facebook.com/plugins/like.php co pozwoli wyłączyć te przyciski

Anonimowy pisze...

Dziękuję za już i proszę o więcej. Jak zablokować FB, nie mam tam konta, nigdy nie miałam, wiem, że brat logował się tam kilka razy z mojego komputera ale twierdzi że niczego nie instalował, konto na FB zakładał już dawno ze swojego komputera.

Michał Biniek pisze...

Myślę, że zastosowanie Greasemonkey (i odpowiednich skryptów) lub odpowiednich pluginów (np. https://addons.mozilla.org/en-US/firefox/addon/facebookblocker/) powinno pomóc. Po więcej informacji na temat zablokowania pluginów Facebooka na innych stronach polecam Google.

Prześlij komentarz