Like_box do Facebooka - wysuwany z lewej lub z prwej strony

Wiele osób chce mieć na stronie Like-Boxa z facebooka - czyli miejsce w którym użytkownik może kliknąć LUBIĘ TO.Wysuwany Like-box jest o tyle popularny że na wielu stronach jest już like-box nie tylko do facebooka, ale także do G+, do RSS, do Twitera itp. Oto jak najprościej zrobić like-box i gdzie umieścić kod - oto dwa przykłady:

Sposób pierwszy Like-Box z lewej:

Najpier wygenerujmy kod naszej strony z facebooka czyli wchodzimy tutaj -> https://developers.facebook.com/docs/plugins/like-box-for-pages KLIKNIJ TU
i w pierwszym prostokącie Facebook Page URL wpisujemy nasz adres po linku http://www.facebook.com/ oraz szerokość i wysokość naszego likie-boxa czyli Width 190 i Height 390 są to parametry do tła z tego pierwszego sposobu.

do kodu w pliku style.css

#facebook {
padding: 10px;
width: 235px;
height:402px;
position: fixed;
top: 50%;
left: 0;
margin-top: -200px;
background: url(../img/facebookbg.png) no-repeat;
}

do sekcji BODY:

<div id="facebook">
<iframe>WYGENEROWANY KOD IFRAME ZE STRONY FACEBOOKA </iframe>
</div>

<script>
$(function(){
$('#facebook').hover(
function(){ $('#facebook').stop().animate({"left": "0"}, 1000); } ,
function(){ $('#facebook').stop().animate({"left": "-210px"}, 1000); }
);
});
</script>

i dodatek bez którego nie będzie ładnego efektu - to tło dla naszego kodu iframe z facebooka

Drugi sposób Like-Box z prawej:

Generujemy kod iframe z Facebooka sposób już opisany powyżej czyli wchodzimy tutaj wpisujemy oczywiście adres naszej strony a reszta czyli wysokość i szerokość to już wasza inwecja - można zostawić domyślne.

W pliku .css

#face-slider{
position:fixed;
right:-302px;
top:190px;
z-index:100;
}
#face-slider #tab{
cursor:pointer;
height:110px;
width:35px;
float:left;
background: url(img/facebook-slider.png) no-repeat center center;
}
#face-code{
padding:5px;
border: solid #0170cf 3px;
background: #fff;
float:left;
width:286px;
height:296px;
-moz-border-radius: 0 0 0 8px;
-webkit-border-radius: 0 0 0 8px;
border-radius: 0 0 0 8px;
}

oczywiście należy podać poprawną lokalizację pliku facebook-slider.png

W pliku HTML w sekcji HEAD:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

w sekcji BODY:

<div id="face-slider">
<div id="tab"></div>
<div id="face-code">KOD FACEBOOK SOCIAL BOX TUTAJ</div>
</div>

<script>
$(function(){
$('#face-slider').hover(
function(){ $('#face-slider').stop().animate({"right": "0"}, 1000); } ,
function(){ $('#face-slider').stop().animate({"right": "-302px"}, 1000); }
);
});
</script>

Oraz nasz obrazkowy odnośnik

 

Trzeci sposób na wysuwanego likeboxa z użyciem tego samego rysunku, lecz w odwróconej formie

Standardowo już wstawiamy kod jQuery do sekcji HEAD i kod pliku fb.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/script/fb.js"></script>

Dodajemy nasz plik fb.js z poniższą zawartością kodu

$(function(){
$('#face-slider').hover(
function(){ $('#face-slider').stop().animate({"left": "0"}, 1000); } ,
function(){ $('#face-slider').stop().animate({"left": "-302px"}, 1000); }
);
});

Kod okienka CSS

.social{
width: 292px;
height: 258px;
border: none;
overflow: hidden;
}

#face-slider{
position:fixed;
left:-302px;
top:208px;
z-index:100;
}

#face-slider .tab{
cursor:pointer;
width:35px;
height:110px;
float:right;
background: url(images/facebook-slider.png) no-repeat center center;
}

#face-code{
padding:5px;
border: solid #0170cf 3px;
background: #fff;
float:left;
width:286px;
height:250px;
-moz-border-radius: 0 0 0 8px;
-webkit-border-radius: 0 0 0 8px;
border-radius: 0 0 0 8px;
}

Oraz oczywiście sekcja BODY -Na dole przed </body> dodajemy kod html okienka:

<div id="face-slider">
<div class="tab"></div>
<div id="face-code">
<iframe>KOD NASZEGO KODU Z FACEBOOKA </iframe>
</div>
</div>

 

Popularne Artykuly

Najnowsze Artykuły