[HTML] Jak umieścić Facebook Like Box na stronie?

listopada 04, 2012

Zapewne wiele osób uważa, że strona internetowa nie zawierająca w swojej zawartości elementów społecznościowych, takich jak np. Page plugin uważana jest za stronę "nie na czasie". Elementy te to tzw. wtyczki społecznościowe. Umożliwiają one łatwy kontakt ze społecznością zainteresowaną daną tematyką strony, co ma duże znaczenie w branży e-commerce. W tym artykule przedstawię sposób na wdrożenie pluginu Page, czyli popularnej wtyczki strony zwanej kiedyś Facebook Like Box.

Pierwsze co musimy zrobić, jeśli nie posiadamy jeszcze strony na Facebook to utworzyć ją. W kolejnym kroku można pobrać logo „f“, które będzie używane jako przycisk do wysunięcia bloku z pluginem. Facebook zezwala na korzystanie z logo „f“ do celów takich jak odwoływanie się do strony lub grupy na Facebooku. Logo „f“ o wymiarach 32px na 32px możesz pobrać stąd.

Zakładam, że posiadasz już stronę Facebook, a zatem przechodzimy do właściwego zagadnienia tego wpisu. Na samym początku generujemy kod pluginu na tej stronie. Pobieramy kod JavaScript SDK i umieszczamy go zaraz po znaczniku body. Właściwy kod, czyli div z zawartością pluginu umieszczamy w sposób pokazany poniżej. Poniższy kod wklej na samym dole swojej strony, ale przed znacznikiem zmykającym body:

<div id="fb-box" class="fb-box">
 <a href="https://adresTwojejStronyNaFB" class="show-fb-box" onclick="showFbBox();"></a>
 <!-- Tu wklej kod HTML wygenerowany na stronie Facebook -->
</div>

Następnie wygenerowany na stronie pluginu kod HTML wklej w miejscu, gdzie zaznaczyłem komentarzem <!-- Tu wklej... Nie zapomnij też w tagu a wpisać adres Twojej strony na Facebooku.

Kod CSS

Teraz pora na kod CSS, aby nasz wysuwany blok z pluginem strony estetycznie wyglądał i płynnie się wysuwał.

.fb-box{

 -ms-transition:left 0.3s,box-shadow ease 0.3s;
 -moz-transition:left 0.3s,box-shadow ease 0.3s;
 -o-transition:left 0.3s,box-shadow ease 0.3s;
 -webkit-transition:left 0.3s,box-shadow ease 0.3s;
 transition:left 0.3s,box-shadow ease 0.3s;
 z-index:9999;
 position:absolute;
 top:0;
 left:-250px;
 border-top-right-radius:3px;
 border-bottom-right-radius:3px;
 border:1px #181818 solid;
 border-left:0;
 background-color:#ffffff;
 padding:5px;
 width:250px;
 height:350px;
 
}

.show-fb-box{

 display:block;
 z-index:9999;
 position:absolute;
 top:0;
 right:-37px;
 border-top-left-radius:0;
 border-bottom-left-radius:0;
 border:0;
 background:url('facebook-logo.png');
 width:32px;
 height:32px;
 
}

Powyższy kod CSS wklej do pliku z szablonem CSS Twojej strony.

Kod JavaScript

Jeszcze odrobina kodu JavaScript odpowiadającego za wysuwanie i ukrywanie kontenera z pluginem strony.

<script type="text/javascript">

function registerListener(element, eventType, listener) {

 if(element.addEventListener) element.addEventListener(eventType, listener, false);
 
 else element.attachEvent('on' + eventType, listener);
 
}

let c = 0;
const containerHeight = 350;

function showFbBox(e) {

 const fbBox = document.getElementById('fb-box');
 
 if(c === 0) {
 
  updateFbBoxPosition();
  
  fbBox.style.left = 0;
  fbBox.style.boxShadow = '0 0 5px #808080';
  
  c = 1;
  
 }
 
 else {
 
  fbBox.style.left = '-250px';
  fbBox.style.boxShadow = 'none';
  
  c = 0;
  
 }
 
 e.preventDefault();
 
}

function updateFbBoxPosition() {

 const fbBox = document.getElementById('fb-box');
 const topMargin = (window.innerHeight - containerHeight) / 2;
 
 fbBox.style.top = topMargin + 'px';
 
}

registerListener(Windows, 'DOMContentLoaded', updateFbBoxPosition);
registerListener(Windows, 'resize', updateFbBoxPosition);

</script>

Powyższy kod JavaScript wklej w sekcji head Twojej strony. Należy pamiętać, że jeśli zostaną zmienione rozmiary kontenera .fb-box, należy też odpowiednio zmienić wartość w kodzie JavaScript - const containerHeight.

◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny