pytanie zadane 12 maja 2019 w Programowanie przez użytkownika

1 odpowiedź

odpowiedź 12 maja 2019 przez użytkownika

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:

okienko popup like box facebook

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.

Więcej ustawień plugina Like Box znajdziesz w oficjalnej dokumentacji Facebooka.

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.

...