Zapewne spotkałeś się na jakimś portalu internetowym, zaraz po wejściu na stronę, z wyskakującym okienkiem które prosi Cię o polubienie na Facebooku profilu danego portalu. To jest tzw. okienko popup Like Box Facebook, które pozwala na szybsze pozyskanie fanów na fanpage'u.
Wygląda one z reguły tak:
Gdy okienko się wyświetla, reszta strony jest przyciemniona. Internauta może polubić oraz udostępnić dany profil FB lub zamknąć okienko i wrócić do przeglądania danej strony internetowej.
Jak zrobić coś takiego na swojej stronie? (porada dla webmasterów)
Żeby umieścić tego typu okienko z like boxem FB na swoim portalu, wystarczy że wkleisz poniższy kod z JavaScript i HTML w sekcji między znacznikami <head>...</head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:8px solid #3498db;width:350px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"ZAMKNIJ";padding:5px 8px;background:#3498db;color:#eaeaea;font-weight:700;font-size:10px;font-family:verdana}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(4000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/kz1pl&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
</div>
</div>
Oczywiście kod w kilku miejscach musisz zmienić pod siebie. Czyli zmieniasz na pewno adres swojego fanpage FB
Zaznaczone na niebiesko w kodzie
https://www.facebook.com/kz1pl
Na zielono zaznaczyłem kod odpowiedzialny za grubość i kolor obramowania okienka oraz tła napisu ZAMKNIJ
border:8px solid #3498db;
...
background:#3498db;
Na czerwono kod odpowiedzialny za szybkość wyświetlenia się Like Boxa. W powyższym przykładzie jest to ilość sekund po których okienko, wyświetli się gdy internauta wejdzie na stronę. W moim kodzie są to 4 sekundy
delay(4000)
Oczywiście jeśli znasz HTML i język JavaScript, możesz dokonać szerszej modyfikacji skryptu pod swoje potrzeby.
Okienko działa na zasadzie sprawdzania ciasteczek, czyli zadziała jeśli przeglądarka internetowa obsługuje cookies, a kolejne razy sprawdza czy było polubienie strony przez użytkownika.
Uwaga! Powyższy skrypt będzie prawidłowo działać z domeną z https://, czyli na której jest włączone szyfrowanie danych (SSL). To bardzo ważne, gdyż w internecie jest sporo porad, ale pod zwykłe http. Jak wiadomo szyfrowanie strony w obecnych czasach jest już standardem.
