Wysuwany slider Like Box Facebook’a

W tym wpisie pokażę krok po kroku jak dodać na swoją witrynę społecznościowy widget od FaceBooka, tzw. Like Box, ale w postaci wysuwanej z użyciem CSS3. Jedynym warunkiem do uzyskania tej wtyczki jest posiadanie fanpage’a.

Na początku należy wygenerować kod Like Box’a. W tym celu udajemy się na developerską stronę FaceBook’a z wtyczkami społecznościowymi. Na wspomnianej stronie wypełniamy formularz, w którym nie ma raczej nic skomplikowanego 😉

Po wypełnieniu odpowiednich pól, np. wg powyższego przykładu, generujemy kod. Najlepiej będzie wybrać ten w wersji HTML5. Pierwsza część wczytuje JavaScript SDK. Wg zaleceń powinniśmy dodać ją bezpośrednio po tagu <body>. Drugi zaś kod odpowiedzialny jest za wyświetlanie boksu.

Zanim wkleimy wygenerowany kod nr 2, należy dodać do treści naszej strony poniższą zawartość:

<div id="like-box">
	<div class="outside">
		<div class="inside">
			<!-- TUTAJ WKLEJ WYGENEROWANY KOD NR 2 -->
		</div>
	</div>
	<div class="belt">facebook</div>
</div>

Miejsce, do którego możemy już wkleić kod jest oznaczone stosownym komentarzem.

Aby nasz boks jakoś wyglądał i mógł się wysuwać, do stylu CSS naszej witryny musimy dodać:

/* glowny div z like box'em */
#like-box {
	position: fixed;
	z-index: 99;
	top: 150px;  /* jego polozenie od gory */
	left: -296px; /* szerokosc wygenerowanego boxa + 4px obramowania */
	-webkit-transition: left 0.5s ease-out;
	-moz-transition: left 0.5s ease-out;
	-o-transition: left 0.5s ease-out;
	transition: left 0.5s ease-out;
}
 
/* wysuniecie like box'a */
#like-box:hover {
	left: 0px;
}
 
/* zewnetrzna ramka boxa */
#like-box .outside {
	position: relative;
	z-index: 1;
	background: #3b5999;
	padding: 2px;
	min-width: 1px;
	float: left;
}
 
/* wewnetrzne tlo boxa */
#like-box .inside {
	position: relative;
	z-index: 2;
	background: #fff;
}
 
/* pasek z logo FB */
#like-box .belt {
	position: relative;
	z-index: 0;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
	float: left;
	width: 100px; 
	height: 40px;
	padding: 7px 0px 0px 20px;
	margin: 50px 0px 0px -55px;
	background: #3b5999;
	color: #fff;
	font-weight: bold;
	font-family: Verdana;
	font-size: 16px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

I to już wszystko – bez stosowania jQuery i grafiki 😉

Powiązane Wpisy

HINT.css...

Wiele obrazów w tle...

CSS3 Gradient Generator...

Komentarze

  1. fajny skrypt dzięki za podzielenie się 🙂

  2. kozik dnia 5 grudnia 2011 o 04:53 napisał(a):

    Ma ktoś instrukcję jak zrobić coś podobnego dla google +1 ?

  3. marcin dnia 18 grudnia 2011 o 13:13 napisał(a):

    Po co komuś płacić jak jest świetne daemowe narzędzie -http://www.fbslider.bossbyte.com. Ustawiasz jak chcesz i banalnie dodajesz do strony, kompletnie za darmo.

  4. marcin dnia 4 stycznia 2012 o 08:11 napisał(a):

    Napisz do tej firmy może CI pomogą. http://www.fbslider.bossbyte.com – tam jest ich logo z linkiem.

  5. Nono dnia 8 lipca 2012 o 11:25 napisał(a):

    Hej,
    a jak zrobic zeby byly dwa jednen pod drugim np jeden z fb a drugi z twittera ? :0 bede wdzieczny za pomoc

  6. Michał dnia 9 lipca 2012 o 22:01 napisał(a):

    Witam! Bardzo dobry tutorial, bardzo mi pomógł! Aktualnie jednak korzystam z bardziej zaawansowanego rozwiązania, które znalazłem ostatnio:

    http://sliderpakiet.pl/

    Fajny skrypt z duża ilością zakładek, w dodatku posiada panel administracyjny i nie wymaga bazy MySQL! Polecam wszystkim.

  7. Widze ze bazujesz na webkicie. I tu rodzi sie problem z przegladarkami na przyklad z pod znaku okienek. Niestety nie mozna ignorowac uzytkownikow IE.
    Twoj kod jest bardzo fajny i lekki ale niestety myslac powaznie o takim sliderze by trafil do kazdego odwiedzajacego trzeba sie posluzyc na przyklad jQuery. Gdzies sie kiedys tez spotkalem ze sprytnym skryptem JavaScript ktory tlumaczyl webkit dla IE poczynajac od wersji 6.

    Niestety sam webkit jest jeszcze slabo wspierany przez przegladarki inne niz Chrome i Safari, chociaz jest wspanialym silnikiem.

  8. GalAnonim dnia 23 listopada 2012 o 21:39 napisał(a):

    na Mozilli śmiga ale na Chrome kuleje mi strasznie. A IE jeszcze ktoś używa 😉

  9. user_z_neta dnia 26 listopada 2012 o 18:30 napisał(a):

    fajny gadżet działa pod Firefox, ale nie działa po Internet Explorer 9 🙁

    • Patrycja dnia 23 marca 2013 o 22:04 napisał(a):

      … a o to sposób (z uzyciem jQuery), ktory dziala pod IE 7-10 🙂

      w umieszczamy nastepujacy skrypt oraz biblioteke jquery, ktora nam go obsluzy:

      $(document).ready(function() {
       
      		$('#like-box .belt').mouseover(function() {
      			$('#like-box').animate({"left":"0px"}, "slow");
      		});
       
      		$('#like-box .inside').mouseout(function() {
      			$('#like-box').animate({"left":"-296px"}, "slow");
      		});
      });

      Zmiany w kodzie CSS:

      #like-box .belt {
      	position: relative;
      	z-index: 0;
      	float: left;
      	height: 120px; 
      	width: 29px;
      	background:url(../img/fb_tab.png) 0 0 no-repeat;
      	color: #fff;
      	text-indent: -9999px;
      	cursor: pointer
      }

      Usuwamy:

      #like-box:hover {
      	left: 0px;
      }

      Polecam dodanie grafiki dla zakladki „FACEBOOK”, zamiast CSS3

      Mam nadzieje, ze pomoglam 🙂

      • Emil dnia 10 lipca 2013 o 23:04 napisał(a):

        skrypt wysuwający się zapętla jeżeli cofając myszkę przejedziemy po „.belt”, poprawka:

        [code]

        jQuery(document).ready(function() {
        var fbWysuniety = false;
        jQuery(‚#like-box .belt’).mouseover(function() {
        if(!fbWysuniety)
        jQuery(‚#like-box’).animate({„left”:”0px”}, function(){fbWysuniety = true;});
        });

        jQuery(‚#like-box .inside’).mouseout(function() {
        if(fbWysuniety)
        jQuery(‚#like-box’).animate({„left”:”-296px”}, function(){fbWysuniety = false;});
        });

        });

        [/code]

  10. dodo dnia 30 listopada 2012 o 19:39 napisał(a):

    Dzięki za to cacko.Właśnie czy ktoś jeszcze używa IE;)

  11. wojtek dnia 20 grudnia 2012 o 20:22 napisał(a):

    Mam pytanko robieżonie stronę iwysuwane okno z fb działa dobrze w Chromie w IE otwiera się ale mie można kliknąc
    Gdzie tkwi błąd

  12. Paweł dnia 22 grudnia 2012 o 12:58 napisał(a):

    Jeśli ktoś ma bloga zainstalowanego na WordPress polecam zastosowanie bardzo prostej w konfiguracji wtyczki Free Social Slider by ARScode

  13. Pati dnia 26 grudnia 2012 o 12:11 napisał(a):

    Super!! dzięki za pomoc 🙂

  14. Sheio dnia 28 grudnia 2012 o 16:54 napisał(a):

    Który parametr odpowiada za to z której strony będę miał slider ? Aktualnie mam z lewej strony.

  15. Salmar dnia 6 stycznia 2013 o 14:35 napisał(a):

    Script działa poprawnie i wygląda ja trzeba w Firefoxie natomiast w „legendarnej” przeglądarce internet Explorer z której korzysta niestety większość „starszych” osób niestety scrypt traci swoja funkcjonalność.

  16. Marcin dnia 6 stycznia 2013 o 22:45 napisał(a):

    Panowie, krótkie pytanie, jak zrobić aby z lewej strony zamienić na prawą. Wiem, że ustawia się to w style.css ale próbowałem zmieniać i tylko mi się wszystko rozjeżdżało … Pomóżcie.

    ps. rzeczywiście, żadne IE tego nie łyka a szkoda bo działa wyśmienicie …

    • nev dnia 23 stycznia 2013 o 23:19 napisał(a):

      Skrypt bardzo fajny (z wyjątkiem biednych użytkowników IE)
      Aby przenieść na prawą stronę należy trochę wyedytować css. Na mojej stronie działa to z takim kodem:

      /* glowny div z like box'em */
      #like-box {
      	position: fixed;
      	z-index: 99;
      	top: 150px;  /* jego polozenie od gory */
      	right: -296px; /* szerokosc wygenerowanego boxa + 4px obramowania */
      	-webkit-transition: right 0.5s ease-out;
      	-moz-transition: right 0.5s ease-out;
      	-o-transition: right 0.5s ease-out;
      	transition: right 0.5s ease-out;
      }
       
      /* wysuniecie like box'a */
      #like-box:hover {
      	right: 0px;
      }
       
      /* zewnetrzna ramka boxa */
      #like-box .outside {
      	position: relative;
      	z-index: 1;
      	background: #3b5999;
      	padding: 2px;
      	min-width: 1px;
      	float: right;
      }
       
      /* wewnetrzne tlo boxa */
      #like-box .inside {
      	position: relative;
      	z-index: 2;
      	background: #fff;
      }
       
      /* pasek z logo FB */
      #like-box .belt {
      	position: relative;
      	z-index: 0;
      	-webkit-transform: rotate(-90deg); /* obrot o 90 stopni */
      	-moz-transform: rotate(-90deg); /* wiec wysokosc zamienia sie z szerokoscia */
      	-o-transform: rotate(-90deg); /* obrot o 90 stopni */
      	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* obrot o 90 stopni dla IE */
      	float: right;
      	width: 100px; /* wysokosc */
      	height: 40px; /* szerokosc */
      	padding: 7px 0px 0px 20px;
      	margin: 50px -50px -50px -55px;
      	background: #3b5999;
      	color: #fff;
      	font-weight: bold;
      	font-family: Verdana;
      	font-size: 16px;
      	-webkit-border-radius: 6px;
      	-moz-border-radius: 6px;
      	border-radius: 6px;
      }
  17. CzareeeeeK dnia 5 lutego 2013 o 00:22 napisał(a):

    Cześć otóż mam problem taki że wszystko jest zaimplementowane zgodnie z instrukcją css zrobiony slider wysuwa się wygląda świetnie lecz niestety nie ma w nim treści żadnej choć wygernerowałem link przez facebook developers 41428209 GG . Pomoże ktoś ? : )

  18. rafal dnia 7 lutego 2013 o 11:20 napisał(a):

    przy generowaniu kodu na http://developers.facebook.com/docs/reference/plugins/like-box/
    musisz mieć zaznaczone show stream i show faces.
    może w tym jest problem

  19. viper dnia 13 lutego 2013 o 15:01 napisał(a):

    Pozostaje wyłączenie kodu slidera dla IE

    facebook

  20. jodle dnia 5 marca 2013 o 12:59 napisał(a):

    jak wyłączyć wykonywanie takiego skryptu jeśli zostanie odpalony na nieszczęsnym IE ?

    • Daniel dnia 11 marca 2013 o 02:35 napisał(a):

      Wystarczy wstawić ten div z like boksem między „” a „<!– „. Ja tak zrobiłem – nie będę się użerać z przeglądarkami, na których nie działa większość szybkich i dobrych rozwiązań. Korzystasz z IE – masz mniej możliwości.
      Jeśli jest tak jak mówi Klocek, czyli, że skrypt działa na IE 10, to można się pokusić o warunek , chociaż sam na IE 10 nie sprawdzałem.

      A Tobie, Klocku, chciałbym podziękować za świetny skrypt – lekki, szybki, ładny. Dokładnie taki jaki powinien być.

  21. piotrpro dnia 12 marca 2013 o 16:02 napisał(a):

    Czy mógłbyś Danielu doprecyzować: „Wystarczy wstawić ten div z like boksem między „” a „<!– „. " bo nie mogę dojść co zrobić by w IE nie wyświetlał się skrypt.

    • Daniel dnia 12 marca 2013 o 21:23 napisał(a):

      System komentarzy na tym blogu obciął mi te kody, które wpisałem (te, dzięki którym można definiować na którym IE lub czy na którymkolwiek z nich ma się uruchomić dany kod). W odpowiedzi na tamten komentarz podałem link, gdzie jest to opisane, wklejam jeszcze raz – http://www.quirksmode.org/css/condcom.html

  22. Kris dnia 17 marca 2013 o 09:51 napisał(a):

    witam !
    zwracam się z prośba , jak można ten skrypt zainstalować na sklepie Click Shop ( home.pl )

    PROSZĘ O POMOC !!

    Kris

    GG : 8454380
    e-mail : krzysztof@topkuracja.pl

  23. matis dnia 1 kwietnia 2013 o 20:48 napisał(a):

    Witam,

    czy kody są aktualne? robie wszystko po kolei tak jak trzeba i nic się nie wyświetla. Może w magento kody wkleja się do innych plików (ja css wklejam do boxes.css, a kod html do strony gdzie mam inne wysuwane widgety – w moim przypadku 3columns.phtml).

  24. lyddit dnia 15 kwietnia 2013 o 11:24 napisał(a):

    Pod Operą nie działa

  25. Jak zwykle Klocek masz dobre wstawki, parę bym na Twoim miejscu co prawda aktualizował, ale mimo wszystko masz tego bloga najlepszego!

    Jeszcze raz dzięki 😉

    • Arek dnia 27 kwietnia 2013 o 20:20 napisał(a):

      Wszystko super zrobiłem jak trzeba jest ok po prawej stronie tylko mam taki mały problem a mianowicie … jak mi wysuwa box fb to zasłania mi belka górna z linkami na stronie..pewnie trzeba ustawic cos zeby było transparentne w kodzie css ale nie wiem jak to zrobic

  26. baranello dnia 24 maja 2013 o 13:05 napisał(a):

    SUPER!!!! DZIEKI

  27. Wojtek dnia 12 czerwca 2013 o 14:29 napisał(a):

    A gdybym chciał mieć to przy prawej krawędzi mojej stronki? a viewerzy mają różne rozdzielczości ekranów… jest jakiś sposób odniesienia się do prawej krawędzi ekranu?

  28. janek dnia 12 lipca 2013 o 11:54 napisał(a):

    Nie działa pod IE 🙁

  29. Lukasz dnia 8 sierpnia 2013 o 16:36 napisał(a):

    Świetny post!
    Mam tylko 1 problem – nie wyswietlaja mi sie wszystkie zdjecia po zaznaczeniu „show stream”. Na FB są ona wszystkie dodawane w ten sam sposób a mimo tego niektóre się wyświetlają w sliderze a niektóre nie. Jest to jakiś typowy błąd ? Macie pomysł jak moznaby to naprawic?

  30. Roman dnia 21 sierpnia 2013 o 09:54 napisał(a):

    Nie działa poprawnie w ie10.

  31. Corfe dnia 25 sierpnia 2013 o 15:41 napisał(a):

    Czy ktos wie jak zmodyfikowac kod aby moc wstawic wlasny obrazek (zakladke)? gdzie dac url(ściezka_do_pliku) i ktora czesc kodu wyrzucic.

  32. Amadeusz dnia 5 września 2013 o 18:37 napisał(a):

    Mam nastepujący błąd:

    Parse error: syntax error, unexpected T_STRING, expecting ‚,’ or ‚;’ in /virtual/2f-gim1.cba.pl/index.php on line 34

    Pomożcie!

    • cruiser dnia 10 września 2013 o 18:13 napisał(a):

      Masz bład składni w 34 linii w podanym pliku. Źle wkleiłeś skrypt, złe miejsce lub przy okazji skasowałeś inne znaki.

  33. Bartek dnia 18 września 2013 o 04:30 napisał(a):

    Fajna sprawa :)) wszystko działa tylko mam taki mały problem że nie na każdym PC działa mi ta zakładka w domu działa a na PC w firmie już na przykład jej nie ma sprawdzałem na różnych przeglądarkach może ktoś poradzi co zrobić?

  34. gray_angel dnia 12 października 2013 o 12:47 napisał(a):

    Big thx 🙂

  35. Sylwester dnia 7 czerwca 2015 o 15:57 napisał(a):

    Proszę o pomoc w dostosowaniu like box’a.

    Chciałbym aby wyświetlał się po prawej stronie, co muszę zmienić w CSS ?

    Poza tym nie mogę sobie poradzić z poprawnym wyświetlaniem jego szerokości, poniżej link do strony:

    revemark.pl

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *