- WYSIWYG verze 3.5
- Návod je vytvořen ve WYSIWYG editoru verze 3.5 Více »
Jak přidat na web tlačítko "To se mi líbí" od Facebooku
Aktualizováno: 17. 6. 2015
Sociální síť Facebook v dnešní době neslouží pouze k chatování a komunikaci mezi přáteli, ale také velmi dobře slouží jako silný marketingový nástroj k propagaci webů, internetových obchodů nebo firem.
Pokud patříte mezi internetové nadšence Facebooku, určitě vás bude zajímat jak nainstalovat tlačítko "To se mi líbí" (ilustrační foto vpravo) na váš web. Nejdříve si ale vysvětlíme, jak nová funkce tlačítko od Facebooku funguje a jak se dá lehce vložit do Vašich webových stránek.
Tlačítko "To se mi líbí"
Funkčnost tlačítka spočívá v tom, že pokud návštěvník klikne na vašem webu na tlačítko "To se mi líbí", zobrazí se na hlavní stránce uživatele Facebooku (který na tlačítko kliknul) informace o tom, že se mu váš web líbí. Díky tomu se pak jiní uživatelé mohou podívat na na vaše stránky a mohou tak sdílet informace o článcích či produktech v e-shopu.
Díky tlačítku "To se mi líbí" od Facebooku se o článcích na vašem webu či produktech ve vašem e-shopu dozví mnohem více lidí z široké internetové veřejnosti.
Výhodou je, že instalace tlačítka nic nestojí a přitom vám může pomoci přivést na vaše stránky další množství návštěvníků a potencionálních zákazníků. V tomto návodu si ukážeme, jak vložit tlačítko "To se mi líbí" do vašich stránek. Vložení tlačítka na web není tak složité, jak by se na první pohled mohlo zdát.
Vygenerování tlačítka "To se mi líbí"
Na této adrese https://developers.facebook.com/docs/plugins/like-button/ najdete formulář pro generování tlačítka "To se mi líbí". Formulář vyplňte dle příkladu uvedeného na obrázku níže.
Příklad generování tlačítka "To se mi líbí"
Na příkladu si ukážeme jak vygenerovat tlačítko "To se mi líbí" přímo pro náš blog. Výsledek našeho snažení a funkčnost tlačítka si můžete prohlédnout a vyzkoušet na konci tohoto článku.
- URL to like: do prázdné kolonky vložte URL (webovou) adresu vaší stránky na facebooku, pro kterou chcete tlačítko vygenerovat. V našem případě chceme tlačítko "To se mi líbí" vložit pro stránku inPage.cz
- Width: šířka vloženého pomysleného rámečku v pixelech (obrazových bodech), doporučujeme zadat asi 200px pro většinu šablon v inPage
- Layout: rozvržení - zvolte si vzhled tlačítka, zda chcete zobrazit textové popisky, nebo jen čísla (po výběru konkrétní položky trvá pár vteřin, než se náhled tlačítka vedle formuláře přegeneruje a znovu zobrazí)
- Action Type: vyberte si typ akce, který se má provést po stisku tlačítka, buď klasický like a nebo doporučení (recommend)
- Show Friend's Faces: ukazuje poblíž tlačítka "To se mi líbí" tváře vašich přátel, kterým se také stránka líbí
Kopírování HTML5 zdrojového kódu
Po vyplnění políček ve formuláři vše dokončíte stiskem tlačítka GET CODE. Zobrazí se tabulka se zdrojovými kódy tlačítka "To se mi líbí".
Zkopírujte si obě části zdrojového kódu, který budete následně potřebovat pro umístění tlačítka na web.
Vložení tlačítka "To se mi líbí" do stránky v inPage
Máte-li zkopírovaný zdrojový kód tlačítka, přejděte do administrace inPage vašich stránek, konkrétně do editace té stránky, kam chcete tlačítko "To se mi líbí" vložit.
Doporučujeme tlačítko "To se mi líbí" vložit do prázdné stránky s vypnutým WYSIWYG editorem a tuto stránku následně nastavit jako vlastní box. Více se dozvíte v našem návodu Práce s Vlastním boxem.
Nad textovým editorem stránky se nachází ikonka s názvem HTML sloužící pro editaci zdrojového HTML kódu stránky. Klikněte na ikonu HTML (viz obrázek níže), zobrazí se HTML editor stránky. U nověších verzí si vpravo otevřte nabídku Nástroje a zobrazte zdrojový kód.
Ukázka vložení zdrojového kódu tlačítka mezi 2 odstavce webové stránky
Do HTML kódu stránky vložte vámi zkopírovaný zdrojový kód tlačítka. Kód vložte na nový řádek za odstavec uzavřený v HTML tagu <p></p> viz názorný příklad na obrázku výše.
Vkládáte-li zdrojový kód tlačítka na stránku s již existujícím textovým obsahem, podokno Editoru HTML bude obsahovat kompletní zdrojový kód celé vaší stránky. Záleží jen na vás, kam přesně (do které části stránky) tlačítko umístíte.
Vložení tlačítka do stránky potvrďte tlačítkem Aktualizovat. Celou stránku uložte zeleným tlačítkem Upravit stránku.
Zobrazilo se tlačítko "To se mi líbí" na vašich stránkách?
Výsledek zobrazení tlačítka na stránce si můžete prohlédnout přímo na vašem webu. V našem případě jsme tlačítko vložili ke konci tohoto článku, proto pokud se vám článek s návodem líbí, budeme rádi pokud stisknete tlačítko níže. Musíte být samozřejmě přihlášeni na Facebooku, jinak na tlačítko nepůjde kliknout.
Na svém profilu na Facebooku se pak můžete podívat, že se tato informace na hlavní stránce zobrazila a vy ji nyní sdílíte s vašimi přáteli.
Další pluginy od Facebooku
Obdobný způsobem můžete vkládat i osatní pluginy od Facebooku, oblíbený je především Like Box. Jedná se o obdobu tlačítka Like ("To se mi líbí"), ale propagujete pouze určitou konkrétní FB stránku.
Pomocí Like Boxu můžete na stránce zobrazovat příspěvky a uživatele, kterým se Vaše FB stránka líbí. Postup vložení zdrojového kódu je dost podobný, jen první část kódu stačí do stránek zkopírovat pouze jednou.
Na umístění první části zdrojového kódu nezáleží, na zobrazení tlačítka má vliv pouze druhá část kódu.
Přejeme úspěšné propojení vašich webových stránek s Facebookem a pokud di nebudete vdět s něčím rady, můžete nám zanechat komentář.
Vladimír Souš
admin(zav)zoner.cz
Přidat komentář
Přehled komentářů
tlačítko like
2. 5. 2015 11:43:45 | Venca
Zdravím..
Chci si vytvořit tlačítko to se mi líbí, ale nefunguje.... nebylo by lepší vytvořit novou stránku s tím tlačítkem a uložit jí na tento web a lidé by si jí jednoduše stáhli... bylo by to nejjednodušší řešení.
Odpovědět
to s emi líbí špatně funguje
27. 11. 2014 0:01:46 | Michal
Dobrý den, vložil jsem si na své stránky tlačítko "to se mi líbí " ale po kliknutí na něj vyjede tabulka která je prázdná (nezobrazí se fotka, popisek, nic) . po refreshu stránky (F5) a kliknutí na tlačítko to se mi líbí vše funguje jak má . zřejmně je problém s javascriptem ale nevím kde a jak. jako příklad http://www.utulnice.cz/mydla/francouzske-mydlo-levandule-200g
Odpovědět
To se mi líbí
1. 10. 2014 23:37:02 | Ondřej Dočekal
Dobrý den,
snažil jsem se podle návodu tlačítko vložit, ale nepodařilo se mi to vůbec, dokážete mi s tím poradit
Odpovědět
RE: Tlačítko zmizelo
8. 9. 2014 15:37:15 | Ondřej Jonáš
Dobrý den pane Pochman,
kontroloval jsem Vaše tlačítko a vše je v pořádku. Neprojevila se žádná chyba ani mizení tlačítka ve vícero prohlížečích. Je možné že se jedná o nějaké výpadky na straně Facebooku, to už však z naší strany neovlivníme.
Přeji hezký den.
Odpovědět
Tlačítko zmizelo
8. 9. 2014 14:43:45 | Jaroslav Pochman
Dobrý den,
prosím o kontrolu nášeho webu jatemont.cz, tlačítko občas zmizí a někdy se ojeví a pak zase zmizí a tak to jde dokola.
Děkuji.
Odpovědět
RE: SEO
25. 8. 2014 8:44:27 | Vladimír Souš
Dobrý den pane Rytych,
tlačítko like jsem Vám přes IFRAME vložil na samostatnou novou stránku a funguje bez problémů. Prosím případné další problémy řešit přes admin@zoner.cz.
Děkujeme za pochopení.
Odpovědět
Seo
24. 8. 2014 13:49:39 | Petr Rytych
Dobrý den,
tak jsem použil vložení tlačítka pomocí IFRAME.
Dělám však ještě něco špatně, protože po vložení daného kodu se tlačítko nezobrazuje vůbec. :-(
Odpovědět
RE: Seo
21. 8. 2014 9:46:42 | Vladimír Souš
Dobrý den Petře,
v návodu je vložení tlačítka LIKE pomocí HTML5, kdežto systém inPage je XHTML 1.0. Pokud chcete mít stránku validní, doporučujeme vložit kód z generátoru na Facebooku pomocí IFRAME. Slouží k tomu přepínač v generátoru, jak je ukázáno na 5. obrázku tohoto návodu.
Odpovědět
Seo
19. 8. 2014 15:16:41 | Petr Rytych
Dobrý den,
dle návodu jsem propojil Like tlačítko přes prázdnou stránku s vlastním boxem s vypnutým editorem. Vše je funkční až na takovou maličkost, že při změně barvy pozadí vzoru MEDIA pomocí vlastního CCS stylu mi Seo vykazuje ve zdrojovém kódu 7 html chyb. Které se týkají v detailu pouze tlačítka Like na samostatné stránce. Po vrácení do default pozadí html chyby nejsou a hodnota zdroje je 95 namísto 88.
Co je špatně?
Děkuji
Odpovědět
RE: aplikace
5. 8. 2014 11:22:34 | Vladimír Souš
Dobrý den Pavle,
aplikaci vytvářet nemusíte, pokud tam žádnou jinou nemáte. Návod je psán pro i ty, kteří již nějakou aplikaci používají a pak FB generuje Javascript SDK (prví část kodu) přes tuto aplikaci. Pokud budete používat i ostatní pluginy od FB je to lepší včetně aplikace, protože tato část kodu se do stránek načítá pouze jednou.
Odpovědět
aplikace?
5. 8. 2014 9:45:17 | Pavel
Přeskočil jsem první položku - vytvoření apliace a ten "like" mi funguje. V čem je zakopaný pes?
Odpovědět
prosím o radu
13. 6. 2014 21:36:12 | Gabriela Rindová
Dobrý den. Nemohu se dostat hned přes první krok, a to, když chci provést registraci jako developer. Kliknu na "register now", otevře se mi okno k odsouhlasení podmínek, ale v tomto okně je možné kliknout pouze na tlačítko "storno". Není tam žádné "souhlasím" či "ano"... Můžete mi prosím poradit? Děkuji za pomoc.
Odpovědět
RE: dotaz
11. 3. 2014 17:22:11 | Vladimír Souš
Dobrý den pane Maňásku,
společnost ZONER tuto službu nabízí řádově za několik stokorun, záleží na složitosti dostylování v rámci šablony. Většinou toto provádíme v rámci balíčku KOMPLET nebo nějaké jiné doplňkové služby, více info zde:
http://www.inpage.cz/doplnkove-sluzby/
Odpovědět
dotaz
11. 3. 2014 11:18:43 | Jan Maňásek
Dobrý den,
chtěl bych se zeptat, kolik stojí implementace ikony ,,To se mi líbí" na webové stránky firmy v případě, jestliže nemá redakční systém. kolik si orientačně tvůrci stránek za tuto službu účtují? Děkuji za odpověď.
Odpovědět