Okienko z Like Box-em

W niniejszym tutorialu pokażę jak przy użyciu JavaScript raz CSS wykonać proste okienko zawierające Like Box od Facebooka. Okienko będzie pokazywać się wraz z załadowaniem strony, a jego zamknięcie będzie rejestrowane za pomocą ciasteczka o określonej ważności. W ten sposób unikniemy pojawiania się okienka co każdą wizytę.

Najpierw udajmy się na specjalną stronę Facebooka dla deweloperów. Wpiszmy adres naszego Fanpage’a, ustalmy rozmiary, np. 552px na 258px i odznaczmy Show stream oraz Show header. Po uzupełnieniu formularza, wygenerujmy kod klikając na button Get Code. Przejdźmy do zakładki IFRAME i skopiujmy kod.

Teraz czas na okienko. Otwórzmy plik z naszą stroną i między tagiem head zalinkujmy do stylu CSS oraz skryptu JS:

<link rel="stylesheet" type="text/css" href="FBox.css" />
<script type="text/javascript" src="FBox.js"></script>

Dodajmy także zaraz pod tagiem body następujący kod:

<div id="FBox">
	<div id="FBox_content">
		<span id="FBox_close">x</span>
		<!-- Tutaj wklej wygenerowany kod z FB -->
	</div>
</div>

Jak można się domyślić, nowy boks nie będzie działał poprawnie, bo brakuje wcześniej załączonych plików w nagłówku. Utwórzmy zatem plik FBox.css:

#FBox {
	position: fixed;
	background: rgba(0, 0, 0, 0.7);
	z-index: 999;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	top: 0;
	font-family: Verdana;
	display: none;
}
#FBox_content {
	background: #fff;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	width: 572px; /* szerokosc Like Box + 20px */
	position: relative;
	margin: auto;
	padding: 10px 0px 6px 0px;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, .4);
	-webkit-background-clip: padding-box;
        background-clip: padding-box;
}
#FBox_close {
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 16px;
	color: #3b5998;
	background: #fff;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	border: 2px solid #315c99;
	padding: 0px 0px 1px 0px;
	width: 24px;
	height: 23px;
	cursor: pointer;
}

A także FBox.js:

var months = 1; //Ilosc miesiecy, po ktorych znow pokaze sie okienko
var seconds = 'n'; //Ilosc sekund, po ktorych okienko zniknie (wpisz 'n', aby wylaczyc odliczanie)
 
//Tworzenie ciasteczka
function setCookie(name, value, expire) {
	document.cookie = name + "=" + escape(value) + ((expire===null)?"":("; expires=" + expire.toGMTString())) + "; path=/";
}
//Sprawdzenie wartosci ciasteczka
function checkCookie(name) {
	if (document.cookie!="") {
		var toCookie=document.cookie.split("; ");
		for (i=0; i<toCookie.length; i++) {
			var CookieName=toCookie[i].split("=")[0];
			var CookieValue=toCookie[i].split("=")[1];
			if (CookieName==name) return unescape(CookieValue);
		}
	}
}
//Usuniecie boxa
function removeBox(divID, months) {
	var div = document.getElementById(divID);
	div.style.display = 'none';
	var expire = new Date();
	expire.setMonth(expire.getMonth()+months);
	setCookie('showedBox','yes',expire);
}
//Sprawdzenie wysokosci diva
function checkHeight(divID){
    return ((document.getElementById(divID).offsetHeight));
}
//Wysrodkowanie diva
function verticalCenter(divID){
    var div = document.getElementById(divID);
    div.style.marginTop = ((window.innerHeight-checkHeight(divID))/2)+'px';
}
 
//Odliczanie sekund
function countDown(sec, months) {
	if(sec >= 0 && sec != 'n') {
		if(!document.getElementById('FBox_countdown')) {
			div = document.createElement('div');
			div.setAttribute('id','FBox_countdown');
			div.innerHTML = 'Okienko zamknie się automatycznie za <span id="FBox_seconds"></span> sekund.';
			document.getElementById('FBox_content').appendChild(div);
		}
		document.getElementById('FBox_seconds').innerHTML = sec;
		setTimeout(function(){countDown(--sec)},1e3);
		if(sec == 0) removeBox('FBox',months);
	}
}
 
//Wykonanie skryptu
window.onload = (function() { 
	if (checkCookie('showedBox')!='yes') {
		document.getElementById('FBox').style.display = 'block';
		verticalCenter('FBox_content');
		countDown(seconds, months);
		document.getElementById('FBox_close').addEventListener('click', function(){removeBox('FBox',months)}, false);
	}
});
window.onresize = (function() { 
	if (checkCookie('showedBox')!='yes') {
		verticalCenter('FBox_content');
	}
});

Jeżeli jednak nie chce się Tobie, drogi czytelniku, tworzyć tych wszystkich plików, wystarczy, że pobierzesz gotową paczkę 😉

Komentarze

  1. Ezon dnia 8 czerwca 2013 o 23:43 napisał(a):

    A nie może zrobić tak, żeby po kliknięciu like znikał box?

  2. Szakal dnia 10 czerwca 2013 o 15:40 napisał(a):

    Dzięki za kod na pewno się przyda:) P.S. Mógłbyś zdradzić nazwę dodatku do WP (chmura tagów)? Pozdrawiam

  3. kelso dnia 10 czerwca 2013 o 16:13 napisał(a):

    Bardzo ciekawe rozwiązanie. Tutaj sobie tak przerobiłem.
    http://fcblive.pl/

  4. kelso dnia 10 czerwca 2013 o 21:12 napisał(a):

    Klocuś, a ja zrobić żeby pojawiało się okienko co otwieranie przeglądarki?

  5. MaTvA dnia 11 czerwca 2013 o 13:19 napisał(a):

    @kelso
    Usuń w JS setcookie i checkcookie.

  6. piotr dnia 19 czerwca 2013 o 22:24 napisał(a):

    jak zmienić aby wyświetlało się co 5 dni??

  7. jerzy dnia 25 czerwca 2013 o 22:38 napisał(a):

    no okej dałeś pliki do downloadu ale gdzie je wklepac? :p
    ja zielony jestem w to ale dzieki temu ze ktos mi tlumaczy w ten sposob sie ucze:P

  8. zinger dnia 27 czerwca 2013 o 23:10 napisał(a):

    ja tez nie wiem gdzie je wklepać.
    dałem js do jkatalogu _js
    ale nie działa to mi !
    nie wiem gdzie wrzucić te 2 pliki!
    pzdr

    • Ceito dnia 7 lipca 2013 o 11:26 napisał(a):

      dorzucam sie do pytania, nigdzie nie moge znalesc odpowiedzi na pytanie ktory to jest „Otwórzmy plik z naszą stroną” i gdzie wkleic FBox.js is FBox.css . dziekuje i pozdrawiam

      • Klocek dnia 7 lipca 2013 o 12:03 napisał(a):

        A skąd ja mogę wiedzieć jaki Ty masz plik Twojej strony? W zależności o struktury może być to header.php, a także index.html. Zresztą w pliku example.html masz wytłumaczone gdzie i co należy wkleić.

    • kelso dnia 8 lipca 2013 o 12:36 napisał(a):

      Pliki wrzucasz tam gdzie chcesz mieć FBox.

      Np. masz stronę: http://www.mojastrona.pl/news i chcesz, żeby FBox był na stronie /news to wrzucasz pliki *.css i *.js do głównego katalogu, czyli do /news, a kod do index

  9. Klocek dnia 7 lipca 2013 o 12:01 napisał(a):

    Dodałem możliwość automatycznego zamknięcia okienka po upływie n sekund.

  10. Cwaniak dnia 16 lipca 2013 o 23:09 napisał(a):

    klocek jak look ;p :
    http://makabryczne.pl/

  11. wojtek dnia 18 sierpnia 2013 o 23:17 napisał(a):

    tu mozesz pobrac darmowy znikajacy po czasie lub po kliknieciu
    http://benefiter.pl/landing/coblocker/

  12. wkr dnia 16 kwietnia 2014 o 10:43 napisał(a):

    Jest możliwość używania dwóch skryptów na stronie, głownie chodzi sprawa o ten omawiany oraz http://cookiealert.sruu.pl/. Na mojej stronie koliduje to i wyświetla się jeden, w zależności który jest pierwszy w kodzie ?

  13. Tomek dnia 22 grudnia 2014 o 20:47 napisał(a):

    Umi mi ktos pomoc?

    Chce ramke ktora nie jest na 1 miesiac tylko dziennie wyskakuje
    link do fanpage
    najlepiej raz na dzien
    https://www.facebook.com/CsZoonepl

  14. Tomek dnia 22 grudnia 2014 o 20:48 napisał(a):

    Bo nie umiem sobie poradzic z instalacja.
    wgralem paczke gotowa i nie dziala dlatego usunolem i mysle ze ktos mi z was pomoze.

    link do fanpage podalem wyzej. i opis instalacji jak to dokladnie wgrac.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *