Wstawiamy wysuwane okienko facebooka na stronę
Większość firm posiada fanpage na facebooku i dobrze jest taki odnośnik do tego fanpage umieścić też na stronie. Pokażę w jaki sposób to zrobić. Skrypt nie jest skomplikowany, samo wstawienie tego ładnie wysuwanego okienka jest dość proste i nie zabiera dużo czasu.
Strona składa się z plików:
index.html
style.css
Folderów:
script (plik fb.js)
images (obrazek facebooka)
W <head></head> standardowo wstawiamy kod jQuery i kod okienka fb.js:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script/fb.js"></script>
Na dole kodu strony przed </body> dodajemy kod html okienka:
<div id="face-slider"> <div class="tab"></div> <div id="face-code"> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FStronkiPL&width=292&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" class="social"></iframe> </div> </div>
Proszę pamiętać o wstawieniu w kod własnej nazwy fanpage, należy zamienić odpowiednią linijkę kodu.
W folderze script mamy plik fb.js z kodem:
$(function(){
$('#face-slider').hover(
function(){ $('#face-slider').stop().animate({"left": "0"}, 1000); } ,
function(){ $('#face-slider').stop().animate({"left": "-302px"}, 1000); }
);
});
W folderze images jest plik graficzny facebooka.
Kod css okienka:
.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;
}
Cały kod html strony wygląda tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Okienko facebooka</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="index, follow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="www.tworzenie-stronek.pl" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script/fb.js"></script>
</head>
<body>
<div id="wrapper">
<div class="page">
<div id="top">
</div>
</div>
<div id="clear"></div>
<div id="footer">
stopka
</div>
</div>
<div id="face-slider">
<div class="tab"></div>
<div id="face-code">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FStronkiPL&width=292&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" class="social"></iframe>
</div>
</div>
</body>
</html>
Cały kod css strony:
* { padding: 0; margin: 0; }
html, body {
font-family: Tahoma, sans-serif;
font-weight: 300;
width: 100%;
height: 100%;
font-size: 15px;
color: #000000;
margin: 0 auto;
background-color: #FFFFFF;
}
a {outline: none; text-decoration: none; color: #000000;}
a:hover {text-decoration: underline; color: #000000;}
#wrapper {
margin: 0 auto -150px;
min-height: 100%;
position: relative;
}
#clear{
clear: both;
height: 150px;
}
.page {
margin: 0 auto;
}
#top{
float: left;
width: 100%;
padding-top: 5%;
position: relative;
}
#footer {
float: left;
width: 100%;
height: 130px;
padding-top: 20px;
bottom: 0px;
position: absolute;
text-align: center;
font-size: 13px;
background-color: #EEEEEE;
}
#footer a{
text-decoration: underline;
}
.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;
}
img
{
border: 0px;
}
@media (min-width: 1581px) {
#wrapper{width:100%;}
.page{width:1180px;}
}
@media (min-width: 1085px) and (max-width: 1580px){
#wrapper{width:100%;}
.page{width:100%;}
}
No i gotowe, miłego wieczoru 🙂
Przydatne, dzięki za dokładny opis. Pozdrawiam Emil