Jak zrobić wysuwany likebox

Z ToProste
Skocz do: nawigacji, wyszukiwania

Przedstawiam prosty sposób na wysuwany likebox, który można zaimplementować na każdej stronie. Sposób jest na tyle uniwersalny, że można go zastosować na różnych skryptach, takich jak MyBB, Wiki, phpFusion, WordPress, Joomla, itp.

Instalacja wysuwanego likebox'a

Aby zrobić wysuwany box na naszej stronie z „lubię to" potrzebna będzie podstawowa znajomość HTML, znajomość skryptu w którym chcemy zaimplementować likebox'a oraz umiejętność edycji jego plików. Dla osoby średnio zaawansowanej nie zajmie to więcej niż 5 minut.

Krok 1

Instalacja biblioteki jquery i funkcji javascript odpowiedzialnej za wysuwanie likebox'a.

W sekcji <head> strony dołącz następujący kod:

<head>
(...)
  <!-- Zalaczenie biblioteki jquery do obslugi wysuwanego likebox'a -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
  <!-- Obsluga wysuwania i chowania likebox'a -->
  <script type='text/javascript'>
   $(function(){
    $('#fb_rozwin').css('left','-205px');
    $('#fb_rozwin').hover(
     function () {
      $('#fb_rozwin').animate({left: '0px'}, 800 ); // szybkosc wysuwania
      $(this).addClass('zwin');
     },
     function () {
      $('#fb_rozwin').animate({left: '-205px'}, 700 ); // szybkosc ukrywania
      $(this).removeClass('zwin');
     }
    );
   });
  </script>
</head>


Pamiętaj, że w/w kod powinien być umieszczony w sekcji <head> twojej strony, tj. pomiędzy znacznikami <head> ... </head>.

Krok 2

Instalacja stylu css i tła wysuwanego likebox'a.

Tło wysuwanego likebox'a

Przygotowałem dwa tła (1 2) dla likebox'a. Wybierz któreś i pobierz je na swój dysk, a następnie wyślij przez FTP na serwer na którym masz stronę. Umieść je w katalogu z obrazami, zwykle jest to folder images. Jeśli nie wiesz jak to zrobić, to nic. Niżej przedstawię sposób użycia tła bez umieszczania go na serwerze z plikami strony, choć nie ukrywam, że wydłuża to czas ładowanie strony.

Styl css wysuwanego likebox'a

Niżej przedstawiony kod stylu css wysuwanego likebox'a najlepiej dołączyć do głównego arkusza stylu twojej strony. Jeśli nie potrafisz zlokalizować pliku zawierającego główny arkusz stylu strony, to wklej ten kod w sekcji <head> strony, ale w sekcji <head> należy umieścić go między znacznikami:

<style type="text/css" >
kod stylu css wysuwanego likebox'a
</style>

Zobacz przykład


/* Styl dla wysuwanego likebox'a */
#fb_rozwin	{
   height: 402px;
   width: 235px;
   top: 50%;
   left: 0px;	
   position: fixed;
   margin-top: -201px; /* = wysokosc panelu / 2 (polozenie panelu w pionie) */	
   padding: 10px;
   /****************************************************************************
 
    Wybierz lokalizacje pliku tla. Pozostale niepotrzebne wiersze mozesz usunac.
 
   *****************************************************************************/
   /* url pliku tla na dysku hosta - zalecane */	
   /* podaj url pliku na twoim hoscie */ background: url("images/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; 
   /* url pliku tla na odleglym serwerze udostepniajacym pliki obrazow  */
   /* tlo pierwsze */ background: url("http://img841.imageshack.us/img841/5074/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent;
   /* tlo drugie */ background: url("http://img17.imageshack.us/img17/5074/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent;
}
 
.zwin	{background-position: 0px 0px -242px 0px;}
 
#fb_zawartosc	{
   height: 357px; 
   width: 182px;
   display: block; 
   float: left;
   background-color: #FFFFFF;
}


Krok 4

Pozostało jeszcze dodać kod wyświetlający całość, który najlepiej jest umieścić gdzieś na końcu kodu strony, tuż przed zamknięciem sekcji </body>.

<div id='fb_rozwin'><!-- Facebook -->
 <div id='fb_zawartosc'>
  <script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
  <fb:like-box href="http://www.facebook.com/apps/application.php?id=444351772241962"
  width="182" height="340" colorscheme="dark" show_faces="true" stream="false" header="false"></fb:like-box>
  <!-- Tego nie wolno usuwac -->
  <div style="text-align:center; font-size:xx-small">
  <a target="_blank" title="Wysuwany likebox" href="http://skrypt.uni.me/news.php?readmore=6">likebox</a>
  </div>
  <!-- Tego nie wolno usuwac -->
 </div>
</div>


To id=444351772241962 zamień na id twojej Fanpage na facebook'u.


Jeśli artykuł pomógł ci, polub stronę na facebook'u i/lub umieść na swojej stronie link do niej.

Zobacz też

Reklama:

Linki zewnętrzne