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 :)