Jak wyświetlić okno POP-UP z zaproszeniem do polubienia strony na Facebooku? | DailyWeb.pl

Jak wyświetlić okno POP-UP z zaproszeniem do polubienia strony na Facebooku?

Opublikowano 4 lata temu - 7


Nie tak wcale dawno bombardowałem Was, przynajmniej raz w miesiącu oknem zachęcającym do polubienia profilu mojego bloga na Facebooku. W sumie o dziwo nie było wiele głosów sprzeciwu, ale nie obyło się bez problemów. Otóż wyskakujące okno było dość problematyczne dla osób, które odwiedzały mój blog z urządzeń mobilnych. Zwyczajnie czasem się okna nie dało zamknąć.

Jak już zdołałem się pochwalić na fejsbuku, skrypt przeszedł gruntowną renowację i bombarduje już tylko konkretną grupę docelową gości mojego bloga. Chodzi o tych, którzy odwiedzają strona, trafiając tu wprost z wyników wyszukiwania Google. Dzisiaj zaprezentuje Wam narzędzie, które wyświetla okno z popularnym likeboxem fejsbukowym, które wyświetlane jest z zadanym opóźnieniem czasowym i dodatkowo tworzące ciasteczka, co by nie męczyć gości. Kwestia ograniczenia okna dla osób trafiających z Google, pojawi się w kolejnym wpisie.

Zaczynajmy od początku, pierwsze co to będzie potrzebne nam deklaracja jQuery jak i style. Kod umieszczamy w sekcji <body></body> w miejscu gdzie okno ma być wywoływane ( u mnie jest ono wywoływane tylko na podstronach konkretnych wpisów w Wordpressie, więc deklarację umieściłem w pliku single.php, który odpowiedzialny jest za wyświetlanie pojedynczych wpisów).


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:620px;
height:370px;
position:absolute;
top:58%;
left:55%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:560px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
@import url('http://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext');
font-family: 'Dosis';
font-size:36px;
font-weight:600;
}
.remove-borda div{
font-size:20px;

font-weight:400;
}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

Powyższe style są oczywiścię przykładowymi, można je dopasować do własnych potrzeb. Jak widzicie ja nawet korzystam z zewnętrznej czcionki o nazwie Dosis. Co ważne, sugeruje Wam zmianę wiersza odpowiedzialnego za przycisk/grafikę zamknięcia okna:


background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;

Gdyż obrazek aktualnie pobierany jest z zewnętrznego serwisu, najlepiej go pobrać, umieścić na własnym serwisie i zmienić ścieżkę, by uniknąć ewentualnych problemów, gdy ów obrazek zniknie z powyższego, zewnętrznego adresu.

Idziemy dalej, kolejnym elementem, zresztą najistotniejszym są odpowiednie skrypty. Wklejcie to także w sekcji <body></body>, najlepiej poniżej sekcji stylów w/w:

</code>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== \"[object Object]\") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(14000).fadeIn('medium'); // regulacja opóźnienia
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 1 }); //ciasssssteczka
});
</script>

W tej części najważniejszym elementem jest możliwość regulacji czasu opóźnienia, po jakim okno pojawi się naszemu gościowi. Element odpowiedzialny, to:

$('#fanback').delay(14000).fadeIn('medium'); // regulacja opóźnienia 

Aktualnie ustawiony jest na 14000 mili-sekund, co daje 14s, po tym czasie okno wyskoczy. Oczywiście wedle uznania możecie go zmienić, niemniej lepiej dać czas odwiedzającemu do zapoznania się z naszym wpisem. Kolejnym istotnym elementem są ciasteczka, które tworzą się wraz z oknem pop-up. Odpowiada za to element:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 1 });

Wartość 1 oznacza, że ciasteczko zostanie utworzone na 1 dzień. Czas ten można wydłużyć, dzięki niemu okno wyskoczy raz na określony przez nas czas dla każdego odwiedzającego z osobna. Po co ludzi denerwować? ;-)
Jeśli jesteście totalnie bezlitośni, to wiersza ten można usunąć, efekt będzie taki, że okno będzie się pojawiać za każdym razem, kiedy ktoś wejdzie na naszą stronę.

Ostatnim elementem jest stworzenie odpowiedniej struktury elementów na stronie, moja prezentuje się następująco:

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
 Treść<br>
 <div>Dodatkowa treść</div>
</div>

<center>
<iframe src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FADRES_PROFILU&amp;width=580&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=115403608549468' scrolling='no' frameborder='0' style='border:none;  width:560px; height:258px; padding-top:100px; ' allowTransparency='true'></iframe>
</center>
</div>
</div>

W tym zestawieniu musicie uzupełnić treść w div'ie remove-borda, a następnie wkleić odpowiedni link do strony na FB. W powyższym listingu wystarczy, że podmienicie adres ADRES_PROFILU na swój właśny, np:

<iframe src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FADRES_PROFILU&amp;(...)

na facebook.com%2Flubik.info. Powyższe likebox jest dostosowany do wielkości okna i odstępów, jeśli jednak wygodniej Wam będzie wygenerować własny, to możecie się udać do tej strony, wygenerować własny kod i umieścić go zamiast powyższej ramki <iframe>.

Tym oto stosunkowo prostym sposobem otrzymujecie narzędzie, dzięki któremu możecie nieco rozkręcić swoją społeczność na FB. Oczywiście może ono budzić trochę kontrowersji, bo przecież nikt nie lubi wyskakujących okien, niemniej jeśli zrobicie to w formie żartu, myślę że nikt nie będzie miał Wam tego za złe ;-)

Powyższe rozwiązanie bazuje na tym, opublikowanym na theblogwidgets.com. Razie problemów i pytań, walcie śmiało w komentarzach :-)