Button 'Udostępnij' na Facebooku - wakacyjny kurs Facebook'a

Jak wszystkim wiadomo Facebook pozwala publikować na ścianie różnego typu informacje - m.in. linki do stron WWW. Aby ułatwić użytkownikom serwisu umieszczanie linków na swojej ścianie często dodawane są specjalne buttony, które wyświetlają ilość wpisów na tablicach facebook'owiczów - tym celu FB stworzył widżet Facebook Share.
Widżet 'udostępnij' pozwala publikować na swojej tablicy stronę WWW (a w sumie to link do niej) - spełnia praktycznie tą samą funkcję do przycisk Lubię to! ale w momencie kliknięcia przenosi do okna publikacji na tablicy - dzięki czemu możemy dodać ewentualny tekst lub komentarz.


Na widżet składa się ikonka Facebook'a, ew. tekst udostępnij lub inny zdefiniowany przez użytkownika, a także opcjonalny element licznika - ilości udostępnionych linków na FB.

Podstawowym kodem potrzebnym do uruchomienia buttona jest znacznik <a> oraz zewnętrzny skrypt JS

<a name="fb_share"></a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

W celu udostępnienia jakiejś strony musimy podać w atrybucie href adres URL zbudowany zgodnie ze schematem ze strony kreatora:

http://www.facebook.com/sharer.php?u=(url do udostępniania)&t=(tytuł zawartości)

Pomimo wzoru na stronie z kreatorem, adres URL możemy przekazać także jako atrybut znacznika <a> o nazwie share_url tak jak tworzy to kreator - wówczas adres URL linku zostanie odpowiednio spreparowany przez zaciągany skrypt JS - np.:

<a name="fb_share" share_url="http://michalbiniek.blogspot.com" href="http://www.facebook.com/sharer.php" ></a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Parametr t jest opcjonalny - zasadniczo jego wartość pojawia się w miejscu tytułu jeśli strona nie została jeszcze zaciągnięta przez Facebook'a - kiedy tylko to nastąpi tytuł jest podmieniany przez zawartość znacznika <title> (w przypadku stron) lub adresu URL (w przypadku stron WWW oraz innych elementów jak zdjęcia czy filmy).
Przed załadowaniem
Po załadowaniu - tytuł został zastąpiony adresem
Dodatkowo istnieje możliwość wyboru jednego z pięciu dostępnych stylów komponentu. Pełna lista stylów jest dostępna w dokumentacji oraz jest wymieniona poniżej - są to parametry które należy podać jako atrybut type dla linku:

  • box_count - pełna wersja z dużym licznikiem nad linkiem udostępnij

  • button_count - przycisk z małą wersją licznika z prawej strony przycisku

  • button - sam przycisk

  • icon_link - ikonka FB z możliwością zdefiniowania tekstu linku

  • icon - sama ikonka


Tekst 'udostępnij' może być w prosty sposób zmieniony - wystarczy podać jego nową wartość w znaczniku <a> np.

<a name="fb_share" type="button_count" share_url="url">Wypuść na FB</a>


W momencie dodawania linku na FB pojawia się możliwość umieszczenia miniaturki. Facebook stara się zaproponować kilka/kilkanaście zdjęć ze strony, którą mu podaliśmy. W przypadku, kiedy na stronie nie ma jednak żadnych obrazków (np. strona flash'owa) - możemy zdefiniować obrazek przy użyciu meta-tagów (pełnieszy opis znajdziemy w dokumentacji FB).

<link rel="image_src" href="thumbnail_image" / >

Jeżeli jednak chcemy go dodać jako główny obrazek naszej strony (w przypadku, kiedy na stronie są też inne obrazki osadzone jako <img>) - niestety może się to nie udać - zauważyłem, że jest on jedynie dorzucany do puli obrazków, z których użytkownik może wybrać jeden.
Kolejność obrazków z reguły jest losowa - wygląda to tak że, który pierwszy zostanie zaciągnięty przez FB ten pojawia się na pierwszym miejscu - umieszczenie i kolejność w kodzie HTML nie gra roli.

Dodatkowo w miejscu adresu URL możemy umieścić niekoniecznie adres URL strony, a innego elementu - obrazka czy filmu. W tym celu także pomogą nam meta-tagi - należy doczytać w dokumentacji ;).

<meta name="medium" content="medium_type" />

Na widżetcie 'Udostępnij' kończymy wakacyjny kurs Facebook'a - dziękuję za uwagę i życzę miłego łączenia stron z FB :)

Prześlij dalej:

9 komentarzy:

iTomek pisze...

Dzięki za poradnik, przydał się :)

Anonimowy pisze...

i ja dziekuje.

gdziekupic pisze...

Dzięki wielkie, buttony już widnieją na stronie.

Anonimowy pisze...

Witam,

Mam pytanie: może znasz jakiś fajny tutoral gdzie opisane jest jak fajnie można zrobić takie przycisku do FB, Google i Tweeter jak Ty masz pod każdym postem? Dużo o tym czytałam ale u Ciebie podoba mi się to najbardziej.

Jola

Michal Biniek pisze...

Sekcja 'prześlij dalej' jest własnej produkcji - jedynie ikonki zostały pobrane z jakiejś strony z darmowymi grafikami :)

Anonimowy pisze...

Rozumiem, szkoda, super to wygląda:)

pozdrawiam

Jola

Anonimowy pisze...

Szukałam przede wszystkim jakiegoś kodu gdzie mogę podpiąć własną ikonę, ale nic nie mogłam zleźć, ale nie jestem aż tak dobra żeby sama napisać skrypt.

Jola:)

Deko pisze...

Witam a co zrobić, żeby razem z tym skryptem działąły komentarze ? tzn po wklejeniu tego skrypt z facebookowymi komentzrzami nie działa

Michal Biniek pisze...

Przypuszczalnie występuje błąd JS, w związku z załadowanym innym plikiem biblioteki JS - Facebook w takiej sytuacji rekomenduje zastosowanie przycisku Like - więcej na https://developers.facebook.com/docs/share/

Prześlij komentarz