blog.nayma.pl


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

Podziel się


Tagi


Facebook Page Plugin na Twojej stronie

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

Nayma.pl Dariusz Okoń
Dodane przez

Nayma.pl Dariusz Okoń

Komentarze