.
Nie marnuj miejsca na swoim blogu! Dzięki tym trzem prostym krokom, stworzysz własny slider z like-boxem na np. bloga blogspot jaki i każdą inną stronę www..Jak więc zrobić wysuwany like-box facebooka na blogspot?
Potrzebujemy trzech rzeczy :- Adres URL naszej strony facebookowej (fan-page)
- Grafikę naszego wysuwanego okienka
- Zamieszczenie poniższego kodu na stronie
1. Jeśli nie posiadasz jeszcze fan-page możesz założyć go w bardzo prosty sposób, logując się na Twoje prywatne konto na FB, a potem wejdź na stronę: http://www.facebook.com/pages/create.php
2. Pobierz grafikę wysuwanego okienka: kliknij tutaj i umieść ją na serwerze.
3. Skopiuj poniższy kod i wklej go w sekcji HEAD
(pomiędzy znaczniki <head>...</head>)
Przed wklejeniem kodu usuń z niego: TU WSTAW ADRES URL GRAFIKI i wstaw w to miejsce adres URL pobranej grafiki.
<style type="text/css"> #wysuwane { background: url("TU WSTAW ADRES URL GRAFIKI") no-repeat scroll 0 0 transparent; padding: 10px; width: 235px; height:402px; position: fixed; margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px; top: 50%; } .zamknij { background-position: 0px 0px -242px 0px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#wysuwane").css("left","-216px"); $("#wysuwane").hover( function () { $("#wysuwane").animate({left: "0px"}, 400 ); $(this).addClass("zamknij"); }, function () { $("#wysuwane").animate({left: "-216px"}, 400 ); $(this).removeClass("zamknij"); } ); }); </script> <!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->
Zostało nam już tylko osadzić nasz like-box w sekcji BODY.
Aby to zrobić kopiujemy i wklejamy poniższy kod najlepiej zaraz przed znacznik </body>.
Przed wstawieniem kodu usuń z niego napis: ADRES TWOJEGO FANPAGE i wstaw w to miejsce adres URL własnego fanpage.
<div id="wysuwane"> <div id="wewnatrz" style="float: left; width: 216px; margin-left: 0px;"> <iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href=ADRES TWOJEGO FANPAGE&width=190&colorscheme=light&show_faces=true&border_color&stream=false&header=false&height=378" style="border: medium none ; overflow: hidden; width: 190px; height: 378px; background-color: rgb(243, 247, 255);" frameborder="0" scrolling="no"></iframe></div> </div>
I gotowe! Efekt będzie taki jak na tym blogu.