Jak zrobić wysuwaną zakładkę Facebook z Likeboxem

2013-10-10 | Mirosław Zelent

Taką funkcjonalność daje się zaobserwować na wielu witrynach internetowych - z lewej bądź prawej strony ekranu znajduje się mała zakładka, która po najechaniu (bądź kliknięciu) wysuwa widget Facebooka nazywany popularnie likeboxem. Dziś pokażę, jak w prosty sposób dodać taką wysuwaną zakładkę do kodu swojej strony www (zakładam, że nie używasz np. WordPressa, Drupala czy joomli - jeśli tak, to poszukaj dedykowanego poradnika do swojego CMSa). Przedstawię także możliwości spersonalizowania jej wyglądu.

Instalacja zakładki (krok 1/3). Wpisy w sekcji head

Zaczynamy od dodania do sekcji <head> biblioteki jQuery w wersji mini (jquery.min.js) oraz skryptu zakładki (tabSlideOut.v.1.3.js). Oba pliki znajdziesz w paczce, którą przygotowałem i którą możesz pobrać powyżej. Wklejamy następujący kod do sekcji head:

  1. <script src="jquery.min.js" type="text/javascript"></script>
  2. <script src="tabSlideOut.v1.3.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. $(function(){
  5. $('.slide-out-div').tabSlideOut({
  6. tabHandle: '.handle',
  7. pathToTabImage: 'zakladka.png',
  8. imageHeight: '120px',
  9. imageWidth: '40px',
  10. tabLocation: 'left',
  11. speed: 300,
  12. action: 'hover',
  13. topPos: '200px',
  14. leftPos: '20px',
  15. fixedPosition: true
  16. });
  17. });
  18. </script>

Niektórzy programiści używają linków zewnętrznych do skryptów js w postaci:

  1. http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js

Ja jednak gorąco polecam pobrać bibliotekę jQuery i wszystkie skrypty na swój serwer. Dzięki temu można użyć ścieżki względnej, a przeglądarka klienta przy otwieraniu podstrony nie musi pobierać zawartości z obcego serwera. Zyskujemy na czasie i wydajności po prostu. Inna rzecz, że np. link powyżej (przedstawiony zresztą na oficjalnej stronie skryptu tutaj w chwili kiedy piszę ten tutorial pozostaje po prostu głuchy. Moim zdaniem niedobrą praktyką programistyczną jest uzależniać prawidłowe działanie naszego serwisu od innych serwerów.

Instalacja zakładki (krok 2/3). Wpis w pliku CSS:

Do swojego pliku CSS (nie zapomnij go prawidłowo podpiąć) dodajemy klasę diva, w którym mieścić się będzie fejsbukowy likebox:

  1. .slide-out-div
  2. {
  3. padding: 5px;
  4. width: 250px;
  5. background: #f2f2f2;
  6. border: #395A9C 2px solid;
  7. cursor: pointer;
  8. }

Instalacja zakładki (krok 3/3). Gdziekolwiek w sekcji body:

W sekcji body tworzymy teraz diva o klasie slide-out-div. Wewnątrz niego przygotowałem już dla Ciebie gotowy kod likeboxa - jedyne co powinieneś zrobić to podmienić w kodzie identyfikator mojego fanpage'a: miroslawzelentblog (linia 4) na swój własny identyfikator:

  1. <div class="slide-out-div">
  2. <a class="handle">Content</a>
  3. <iframe src="http://www.facebook.com/plugins/likebox.php?
  4. href=http%3A%2F%2Fwww.facebook.com%2Fmiroslawzelentblog&
  5. width=240&height=280&show_faces=true&
  6. colorscheme=light&stream=false&show_border=false&
  7. header=false&" scrolling="no" frameborder="0"
  8. style="border:none; overflow:hidden; width:240px;
  9. height:280px;" allowTransparency="true"></iframe>
  10. </div>

Identyfikator swojego fanpage'u znajdziesz w jego adresie - weźmy jako przykład adres strony Coca-Coli na Facebooku:

  1. https://www.facebook.com/cocacola?fref=ts

Widać jak na dłoni, iż identyfikator dla tego fanpage'u nosi nazwę: cocacola

Dodatek: personalizacja wyglądu i zachowania zakładki

Przyjrzyjmy się na koniec możliwym opcjom konfiguracji tej zakładki. Modyfikujemy kod funkcji jQuery wstawiony uprzednio w sekcji head:

  • tabHandle: ’.handle', to nazwa klasy, która stanowi uchwyt na potrzeby wywoływanej funkcji tabSlideOut. Pozostawiamy bez zmian.
  • pathToTabImage: ’zakladka.png', ścieżka do pliku graficznego z zakładką - jeśli trzymasz plik w podfolderze, to nie zapomnij wpisać tutaj jego nazwy - np. obrazki/zakladka.png
  • imageHeight oraz imageWidth wysokość i szerokość obrazka zakładki podana w pikselach - upewnij się, że te dane są poprawne.
  • tabLocation: ’left', strona ekranu, do której przylega zakładka - inne możliwości to rzecz jasna: top, right i bottom
  • speed: 300, szybkość wysuwania i chowania się zakładki podana w milisekundach (czyli wartość 1000 stanowi 1 sekundę).
  • action: ’hover', kiedy zakładka ma się wysunąć: hover po najechaniu lub click po kliknięciu na niej.
  • topPos oraz leftPos pozycja na ekranie; w kolejności: odległość w pikselach od górnej krawędzi ekranu i odległość od lewej krawędzi.
  • fixedPosition: true, czy pozycja zakładki ma być zablokowana; wartość true sprawi, iż przy przewijaniu zawartości strony zakładka pozostanie w stałym położeniu (false powoduje "normalne" zachowanie elementu).