Ostatnio zmodyfikowano 17:20, 23 lut 2013

Jak zrobić wysuwany likebox na Wiki

Przedstawiam sposób jak zrobić wysuwany likebox na Wiki 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 Wiki

Krok 1

Dodanie kodu javascript odpowiedzialnego za wysuwanie i chowanie likeboxa.

  • Otwórz plik: /includes/OutputPage.php
  • Odszukaj w nim wiersz zawierający: $ret .= "</head>\n"; (ok 2140 wiersza).
  • Bezpośrednio przed w/w wierszem wklej poniższy kod:
 // Facebook - wysuwany likebox
 $ret .= "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
  <script type='text/javascript'>
    $(function(){
     $('#fb_rozwin').css('left','-205px');
     $('#fb_rozwin').hover(
     function () {
      $('#fb_rozwin').animate({left: '0px'}, 800 );
      $(this).addClass('zwin');
      },
      function () {
      $('#fb_rozwin').animate({left: '-205px'}, 700 );
      $(this).removeClass('zwin');
     }
    );
});
</script>";
  • Zapisz zmiany i zamknij plik.


Krok 2

Instalacja stylu CSS i pliku tła 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 swojej wiki do katalogu /skins/nazwa_twojej_skórki/.
  • Otwórz plik głównego stylu CSS /skins/nazwa_twojej_skórki/main.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.


Krok 3

Instalacja kodu wyświetlającego likebox'a.

  • Otwórz plik /skins/nazwa_twojej_skórki.php
  • Odszukaj w nim wiersz zawierający: </body>, bezpośrednio przed nim wklej poniższy kod:
<div id='fb_rozwin'><!-- Facebook -->
 <div id='fb_zawartosc'>
  <!-- Poniżej 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="340" colorscheme="dark" show_faces="true" stream="false" header="false"></fb:like-box>
  <!-- Kod mojego likeboxa jako przyklad - usun go -->
  <!-- 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>
  • Zapisz zmiany i zamknij plik.

Zobacz też

<htmlet>zobacz-tez</htmlet>