Facebook Widget

Facebook widget nebo-li vysouvací box můžete na Váš e-shop vložit pomocí HTML kódu, který naleznete níže. Tento kód je potřeba upravit podle instrukcí, které pod kódem naleznete a poté vložit do patičky Vašeho e-shopu (Nastavení – Design webu –  Editovat šablonu – HTML kód – Patička). Pokud využíváte certifikát SSL nezapomeňte, že na Vaše stránky nemůžete dát nezabezpečený odkaz. Tedy od všech odkazů odstraňte http: nechte pouze //facebook a tak dále.

Úprava kódu

<style>
 #facebook_side {
   transition: right 0.3s;
   position:fixed;
   z-index:9999;
   top:50%;
   right:-212px;
   margin-top:-198px;
 }
 #facebook_side:hover {
   transition: right 0.3s;
   right: 0px;
 }
</style>
<div id="facebook_side">
 <img src="{URL_adresa_obrazku}" alt="Facebook" style="float:left;" />
 <iframe style="background:#fff;" scrolling="no" frameborder="0" width="212" height="357"
   src="https://www.facebook.com/plugins/likebox.php?id={ID_FACEBOOK_STRANKY}&amp;width=212&amp;connections=10&amp;stream=false&amp;header=true&amp;height=357"></iframe>
</div>

Červený text v kódu nahraďte dle instrukcí.

1) {URL_adresa_obrazku} = URL adresa obrázku, který se bude na stránkách zobrazovat. Po najetí na tento obrázek se následně modul zobrazí.

 

a) Obrázek Facebooku nahrajte do sekce Aplikace – Správce souborů.

b) Nahrání obrázku provedete pomocí šipky v levém horním rohu. Zobrazí se vám pole, kde kliknete kamkoliv do prostoru a otevře se vám složka ve vašem počítači. Obrázek pak nahrajete.

c) Obrázek se vám následně zobrazí v přehledu vložených obrázků a pro zobrazení URL na něj kliknete pravým tlačítkem myši

d) Následně se vám zobrazí okno, ve kterém URL adresu zkopírujete

2) {ID_FACEBOOK_STRANKY} = ID FB profilu můžete získat pomocí vyhledávače ID FB na těchto stránkách https://findmyfbid.com/ . Do této kolonky vložíte URL adresu vašich facebookových stránek a vygenerujete.

 

Následně se vám zobrazí požadocané ID  číslo, které vložíte do {ID_FACEBOOK_STRANKY} v kódu.

Náš výsledný kód by měl vypadat takto:

<style>
#facebook_side {
transition: right 0.3s;
position:fixed;
z-index:9999;
top:50%;
right:-212px;
margin-top:-198px;
}
#facebook_side:hover {
transition: right 0.3s;
right: 0px;
}
</style>
<div id=“facebook_side“>
<img src=“https://141225716.eshop-rychle.cz/fotky67164/facebookfb_logo.png“ alt=“Facebook“ style=“float:left;“ />
<iframe style=“background:#fff;“ scrolling=“no“ frameborder=“0″ width=“212″ height=“357″
src=“https://www.facebook.com/plugins/likebox.php?id=1108954462488655&amp;width=212&amp;connections=10&amp;stream=false&amp;header=true&amp;height=357″></iframe>
</div>

---

Vložení kódu na stránky

1) Kód vložíte v sekci Nastavení–Design webu– Editovat šablonu – HTML kód – Patička

a)

b)

2) Výsledek naší práce by měl vypadat takto

Pokud myší nenajedeme na ikonu widget je schovaný

---