Słowem wstępu
Kilka tygodni temu dostałem prośbę od jednego z moich klientów, żebym zrobił mu na stronie jakiś popup lub box z Facebook do polubienia jego strony.
Chodzi więc o mały symbol FB z prawej lub lewej strony, po najechaniu na który wyjeżdża nam box z możliwością polubienia strony.
Standardowo, jako, że strona była stawiana na WordPressie postanowiłem poszukać wtyczki. Wtyczek jest kilkanaście, jednak żadna z nich nie działa jak trzeba a przy tym dodaje sporo zbędnego kodu i reklam w Panelu admina. Co robić ? Jak żyć ?
To proste - zbudujmy taka prosta funkcjonalność w HTML, CSS oraz troszkę JS a dokładnie jQuery.
Zaczynamy
W pierwszej kolejności musimy wejść na stronę Facebooka: https://developers.facebook.com/docs/plugins/page-plugin, gdzie wygenerujemy sobie nasz box do naszego FanPage i pobierzemy wymagany kod, który musimy dodac na naszą stronę www.
HTML
Struktura HTML jest bardzo prosta. Budujemy sobie główny <div class="facebook_right"> w którym umieścimy naszą ikonę na niebieskim tle oraz kod HTML dostarczony od samego facebooka:
<div class="facebook_right">
<div id="facebook_icon"></div>
<div class="facebook_box">
<div class="fb-page" data-href="https://www.facebook.com/naymapl/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/naymapl/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/naymapl/">nayma.pl</a></blockquote></div>
</div>
</div>
<div id="fb-root"></div>
CSS
Samego stylowania nie ma dużo. Musimy sobie stworzyć nasz główny kontener i nadać mu wymiary oraz jego pozycję pamiętając przy tym, żeby był schowany poza nasza stroną. Czyli dajemy mu wartość ujemną o szerokości naszego div. Musimy sobie przygotować plik svg z literką "f". Można pobrać sobie poniższy obrazek:
.facebook_right {
position: fixed;
top: 220px;
right: -305px;
z-index: 99997;
width: 305px;
height: 389px;
}
.facebook_right #facebook_icon {
position: relative;
left: -34px;
z-index: 99998;
float: left;
width: 34px;
height: 60px;
cursor: pointer;
background: url(../img/fb.svg) no-repeat;
}
.facebook_box {
position: absolute;
z-index: 99999;
float: right;
width: 305px;
border: 4px solid #3b5998;
background-color: #fff;
}
jQuery
Tutaj całą magią będzie wykorzystanie funkcji .hover, dzięki której możemy stworzyć sobie animację wyjeżdżania i chowania naszego div. Cały kod sprowadza się do kilku linijek.
UWAGA!! Pamiętajmy aby do strony dołączyć bibliotekę jQuery, chyba, że takowa jest już dodana.
UWAGA!! Pamiętajmy również o dodaniu kodu JavaScript dostarczonego nam przez Facebook. Bez tego box nie będzie działać.
$(function(){
$('.facebook_right').hover(
function(){ $('.facebook_right').stop().animate({"right": "0"}, 800); },
function(){ $('.facebook_right').stop().animate({"right": "-305px"}, 800); }
);
});
// facebook function
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.9&appId=883107745120721";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Jeśli wszystko jest wykonane poprawnie efekt powinien wyglądać tak jak tutaj:
Sam kod znajdziecie też na codepen.io jednak nie wiem czemu, ale animacja nie chce tam działać. Testowałem na kilku innych stronach i wszystko działało ok.
https://codepen.io/Naymapl/pen/LWoRgw
I tak w kilka-kilkanaście minut można sobie w prosty sposób bez zbędnego kodu dodać taki oto bajer na stronę www. Jak sami widzicie nie ma tu żadnej magii. Wszystko działa i działać będzie zawsze. Do tego nie ma potrzeby np w WordPress korzystania z dodatkowych pluginów co tylko ułatwi Wam życie w przyszłości. Pozdrawiam i zapraszam do komentowania ;)