Wysuwany Facebook Like Box

Tworzymy Like Box w przygotowanym przez Facebook kreatorze

Następnie umieszczemy wygenerowany "Get Code" w kodzie poniżej

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

 W dalszej kolejności dopisujemy w stylu CSS:

 /* 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;
 -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;
}