Jak zrobić wysuwany likebox na PHP-Fusion: Różnice pomiędzy wersjami

Aktualna wersja na dzień 19:10, 23 lut 2013

Przedstawiam sposób jak zrobić wysuwany likebox na PHP-Fusion 7.x w oparciu o kod wysuwanego likebox'a.

Robisz to na WŁASNĄ odpowiedzialność! Czyli, że ja nie ponoszę żadnej odpowiedzialności za ewentualne szkody!

Jak zrobić wysuwany likebox na PHP-Fusion

Załączenie biblioteki jquery do obsługi wysuwanego likeboxa.

• Otwórz plik /themes/templates/header.php
• Odszukaj wiersz zawierający: echo "<script type='text/javascript' src='".INCLUDES."jquery/jquery.js'></script>\n"; (w pobliżu 47 linii)
• Bezpośrednio przed w/w wierszem wklej poniższy kod:

   // Zalaczenie biblioteki jquery do obslugi wysuwanego likeboxa
   echo "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>";

• Zapisz zmiany i zamknij plik.

Dodanie kodu javascript odpowiedzialnego za wysuwanie i chowanie likeboxa.

• Otwórz plik /includes/jscript.js i najlepiej na końcu pliku wklej poniższy kod:

/***********************************************
* Funkcja obslugujaca wysuwanie i chowanie likeboxa
***********************************************/
   $(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');
     }
    );
   });

• Zapisz zmiany i zamknij plik.

Instalacja pliku tła i stylu CSS likeboxa.

• Wybierz typ tła (1 2) dla likebox'a i pobierz je na swój dysk.
• Załaduj je na serwer na którym masz pliki swojego skryptu do katalogu: /themes/nzawa_twojej_skorki/images/bglikeboxfacebookfanpag.png
• Otwórz plik stylu skórki w dla której instalujesz likeboxa: /themes/nzawa_twojej_skorki/styles.css
• Najlepiej na końcu w/w pliku wklej poniższy kod:

/* 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;
   background: url("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;
}

• Zapisz zmiany i zamknij plik.

Instalacja kodu wyświetlającego likebox'a.

• Zaloguj się na konto administratora do skryptu.
• Dodaj nowy panel (Panel administratora -> Zarządzanie stroną -> Panele -> Dodaj nowy)
  • Nazwa: Likebox
  • Nazwa pliku panelu: none
  • Zawartość panelu:

    echo "
 
    <div id='fb_rozwin'><!-- Facebook -->
     <div id='fb_zawartosc'>
      <!-- Ponizej wstaw kod swojego likeboxa -->
 
      <!-- Kod mojego likeboxa jako przyklad - usun go --> 
      <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='357' colorscheme='dark' show_faces='true' stream='false' header='false'></fb:like-box>
      <!-- Kod mojego likeboxa jako przyklad - usun go --> 
     </div>
    </div>
 
    ";

• Zapisz panel.
• Powróć do zarządzania panelami.
• Włącz panel.

Zobacz też

<htmlet>zobacz-tez</htmlet>

• Jak zrobić wysuwany likebox