Jak zrobić wysuwany LikeBox, social Facebook slider

Cóż to takiego „social slider”? Jest to coś w rodzaju wysuwanej zakładki z jednego boku przeglądarki, na której możemy umieścić właściwie cokolwiek – ankietę, formularz kontaktowy, ustawienia witryny itd. Najczęściej jednak, na takiej zakładce znaleźć można LikeBox Facebooka, dlatego potocznie zwykło się go nazywać social sliderem. Jest to bardzo fajne rozwiązanie, jeżeli wtyczka społecznościowa Facebooka nie za bardzo pasuje nam do layoutu strony, nie mamy już gdzie jej wcisnąć, albo po prostu chcemy dodać fajny bajer na swojej stronie.

Małe sprostowanie, pisząc tutaj strona mam na myśli to najszersze znaczenie. Czyli do zastosowania nie tylko na zwykłej stronie HTML, czy blogu WordPress ale praktycznie na każdej stronie!

W tym artykule pokażę, jak zrobić na swojej stronie prosty, wysuwany social slider, inaczej zwany też wysuwanym widgetem Facebook.

Projekt Social Slider – założenia

Podstawowe założenie jest takie, że chcemy aby wysuwany SocialBox działał we wszystkich, albo przynajmniej większości przeglądarek internetowych, dlatego skorzystamy z najnowszej wersji jQuery (obecnie jest to 1.9.1). Aby nie obciążać naszego serwera skorzystamy z biblioteki hostowanej na serwerach Google. Całość ma wyglądać tak jak na poniższych obrazkach.

Kod HTML widgetu

Nic wymyślnego, potrzebny będzie jeden główny pojemnik – blok div z identyfikatorem, który będzie nawiązywał do zawartości i nie będzie gryzł się z kodem reszty strony np. #face-slider. Tutaj znajdzie się wszystko inne, czyli:

• div#tab – jedyna zawsze widoczna część slidera. Zakładka z napisem 'Facebook’ – po najechaniu na nią kursorem myszy pokaże się reszta slidera
• div#face-code – blok, do którego za chwilę wkleimy wygenerowany z Facebooka kod. Dodamy również ładny wizualny akcent, w postaci niebieskiej ramki dookoła LikeBoxa.

Cały kod HTML naszej zakładki wygląda następująco:

<div id="face-slider">
	<div id="tab"></div>
	<div id="face-code">KOD FACEBOOK SOCIAL BOX TUTAJ</div>
</div>

Kod wysuwany Facebook social slider

Miejsce oznaczone napisem „KOD FACEBOOK SOCIAL BOX TUTAJ” trzeba podmienić z kodem wygenerowanym w narzędziach Facebooka dla developerów. W tym celu przechodzimy pod adres https://developers.facebook.com/docs/plugins/page-plugin i uzupełniamy podane pola według następującego wzoru:

• Facebook Page URL – tu należy podać adres naszej strony na Facebooku,
• Tabs – domyślnie, będzie tam wpisana opcja timeline – dla najprostszej wersji, tak jak w artykule, można śmiało wykasować,
• Szczególną uwagę należy zwrócić na pola Width, oraz Height (odpowiednio szerokość i wysokość) wtyczki – tutaj należy wpisać wartości odpowiadające wysokości i szerokości okna slidera. W pierwszej próbie można śmiało zostawić puste aby sprawdzić, czy widget sam się dopasuje do wskazanego miejsca, jeżeli nie to możemy tutaj wpisać wartości „na sztywno”.

Resztę ustawiamy jak na powyższym screenie i generujemy kod klikając na dole guzik 'Get Code’.

Wybieramy jedną z dostępnych wersji pluginu – ja dla uproszczenia wykorzystałem kod iframe, czyli Pływająca ramka. Przy tym wyborze nie muszę dodawać do strony nic poza podanym kodem. Jeżeli masz już na stronie inne pluginy Facebooka, to warto zastanowić się nad wersją SDK.

Wygenerowany kod wstawiamy do kodu HTML w miejscu, które wskazałem wcześniej.

Dodajemy kod HTML zakładki LikeBox do strony

Gdzie umieścić kod HTML naszego wysuwanego social boxa? Tak naprawdę nie ma to większego znaczenia, najważniejsze aby było to w sekcji body strony. Najlepiej odszukać znacznik </body> i wkleić cały nasz kod przed nim. Kod nie może znajdować się w żadnym innym divie, bo mogą pojawić się problemy z pozycjonowaniem elementu na stronie.

W tym momencie nie należy jeszcze przejmować się położeniem slidera w oknie przeglądarki. Jeżeli zastosowałeś się do podanych tutaj wskazówek, to po dodaniu reguł CSS, slider pojawi się w odpowiednim miejscu.

Etap drugi – implementacja CSS

Czas sprawić aby nasz twór przypominał w końcu zakładkę i „stanął” na właściwej pozycji.

Aha! Potrzebujemy jeszcze obrazka z grafiką zakładki. Moją zakładkę, znajdującą się po lewej stronie, możecie bez obaw pobrać i wykorzystać na swoich stronach. Obrazek musi mieć wymiary, jak ten mój aby wyglądał dobrze. Obrazek należy wysłać na swój serwer, a ścieżkę do niego zapisujemy w zaznaczonej na następnym listingu regule CSS.

Wracamy do CSS. Kopiujemy cały zamieszczony poniżej kod CSS i wklejamy do głównego pliku CSS na naszej stronie. Możecie też utworzyć nowy plik i tam dodać owe style, jednak nie jest to polecane.

#face-slider{
	position:fixed; /* sprawia że slider jest widoczny w stałym miejscu przeglądarki, nie przewija się wraz ze stroną, a pozostaje w miejscu */
	right:-302px; /* pozycjonuje slider poza widoczny obszar okna przeglądarki, efekt schowania */
	top:190px; /* pozycjonuje slider 190px od góry okna przegladarki */
	z-index:100; /* po wyjechaniu, otworzeniu się slidera, jego okno ma być ponad wszystkimi innymi warstwami - na samej górze */
}
#face-slider #tab{
	cursor:pointer; /* zmienia domyślny kursor na wskazującą rączkę - tylko efekt wizualny */
	height:110px; /* wysokość diva, będącego zakładką, również wysokość grafiki */
	width:35px; /* szerokość widocznej zakładki, również szerokość grafiki zakłądki */
	float:left; /* przyleganie do lewej krawędzi kontenera slidera */
	background: url(tutaj) no-repeat center center; /* wstawiamy link do grafiki z zakładką */
}
#face-code{
	padding:5px; /* definiuje odstęp od krawędzi kontenera pluginu Facebooka */
	border: solid #0170cf 3px; /* ustawia ładną niebieską ramkę dookoła widgetu Facebooka */
	background: #fff; /* ustawia białe tło pod pluginem Facebook */
	float:left; /* przyleganie do lewej, czyli ma przylegać do kontenera zakładki */
	width:286px; /* szerokość  */
	height:296px; /* wysokość */
	-moz-border-radius: 0 0 0 8px; /* zaokrągla lewy dolny róg */
	-webkit-border-radius: 0 0 0 8px; /* zaokrągla lewy dolny róg*/
	border-radius: 0 0 0 8px; /* zaokrągla lewy dolny róg */
}

Podpinamy bibliotekę jQuery, i dodajemy snippet animujący do social slider

Jeżeli jeszcze nie podpięliśmy jQuery to najwyższy czas to zrobić. W sekcji head dodajemy taki snippet javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Również w sekcji head, lub gdzieś w sekcji body, dodajemy obsługę naszego Facebook – slidera:

<script>
$(function(){
	$('#face-slider').hover(
		function(){ $('#face-slider').stop().animate({"right": "0"}, 1000); },
		function(){ $('#face-slider').stop().animate({"right": "-302px"}, 1000); }
	);
});
</script>

Zapisujemy zmiany i odświeżamy stronę. Tutaj można zobaczyć demo slidera.

Tutaj znajduje się plik RAR z całym demem do ściągnięcia.

Aktualizacja 2017-07-11

Przyszedł czas na gruntowną aktualizację wpisu. Chociaż ten artykuł ma już swoje młodsze odpowiedniki również na tym blogu, mimo to uznałem, że warto odświeżyć zawarte tutaj informacje.

Przede wszystkim Facebook LikeBox już jakiś czas temu został zastąpiony nowszym pluginem, teraz jest to Facebook PagePlugin. W artykule zmieniłem linki i grafikę z narzędzia generującego kod ramki dla PagePluginu, tak aby jednak dało się jeszcze poskładać zamieszczony tutaj slider do „kupy”.