blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


Facebook Page Plugin na Twojej stronie

Dariusz Nayma.plDariusz Nayma.pl

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:

Zobacz Gotowy Projekt

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 ;)

Komentarze