- 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ářů
RE: nefunguje !?
26. 2. 2013 9:16:28 | Hana Medková
Dobrý den, naše návody na blogu inPage jsou určeny hlavně pro uživatele systému inPage, kteří tvoří své stránky pomocí redakčního systému s vlastním wysiwyg editorem. Tento návod na umístění tlačítka LIKE je tedy zaměřen vyloženě na implementaci do systému inPage, nikoliv do jiných webových stránek vytvořených v jiných systémech.
Pokud chcete na své stránky umístit tlačítko LIKE, pak musíte hledat na internetu návody, které nejsou zaměřeny na konkrétní redakční systém jako je inPage.
Odpovědět
nefunguje...?!
22. 2. 2013 13:52:03 | ZZporadna
Dobrý den,
prosím pěkně o pomoc: Dělám vše přesně podle vašeho návodu, ale po aktualizování stránky a uložení úprav se nic nezmění - tlačítko nikde!
Chci vložit "like" zde:
http://www.zdravazivotosprava.cz/
Děkuji :-)
Odpovědět
už to funguje
7. 12. 2012 11:33:56 | Petra Kácovská
Dobrý den, tak už jsem si na to přišla sama. Taková hloupá chyba. :-)
Odpovědět
nefunguje propojení s facebookem
7. 12. 2012 11:24:39 | Petra Kácovská
Ještě jsem zapomněla napsat svou webovou stránku. www.ucirna.cz
Odpovědět
nefunguje propojení s facebookem
7. 12. 2012 10:22:49 | Petra Kácovská
Dobrý den, tlačítko To se mi líbí jsem bez problémů vložila na stránky. Načítá se mi do něj, když na něj někdo klikne. To je všechno vpořádku. Bohužel se mi ale neprojeví lidé na facebooku. Čísla se liší. Na facebooku se líbí má stránka 2 lidem, na webové stránce 5 lidem. Jak tam dostanu zbývající like? děkuji za odpověď
Odpovědět
RE: iba ak som prihlaseny
3. 12. 2012 17:26:24 | Hana Medkova
Dobrý den, to tlačítko by mělo být vidět stále, pokud jste přihlášený, je tlačítko na webu aktivní, pokud nepřihlášený, mělo by zašednout. K úplnému zmizení by dojít nemělo.
Odpovědět
Iba ak som prihlaseny
3. 12. 2012 15:43:24 | Soso
Dobry den, chcem sa spytat, preco sa mi button zobrazi na webe, iba ked je uzivatel prihlaseny na FB? V momente ako sa odhlasi, tak button zmizne.
Odpovědět
RE: tlačítko
26. 11. 2012 10:43:46 | Hana Medková
Dobrý den pane Želásko, osobně jsem nyní vygenerování tlačítka opět vyzkoušela a vše funguje, v rámečku překliknu na IFRAME a zobrazil se mi kód mého profilu:
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.bikesdevil.com&send=false&layout=box_count&width=200&show_faces=true&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:90px;" allowTransparency="true"></iframe>
Tzn. problém by mohl být někde u Vás v PC, zkuste provést aktualizace jak prohlížeče, tak javy atd.
Odpovědět
talčítko "To se mi líbí"
21. 11. 2012 14:32:19 | Jan Želásko
Dobrý den, postupuji podle Vašeho návodu, ale nějak se mi nedaří. Po přepnutí na záložku IFrame se žádný kod nezobrazí, jen hláška: "This plugin does not have an iframe implementation with the selected options. Please use the JavaScript SDK and the HTML5 or XFBML implementations, or change the value of the send parameter." Rád bych toto tlačítko vložil do textu v aktualitách, který mám připravený na kitbike.cz. Děkuji Honza
Odpovědět
Tlačítko facebook
8. 11. 2012 16:34:01 | Vladimír Jalč
Tak už je to v pořádku,děkuji
Odpovědět
Tlačítko facebook
8. 11. 2012 16:16:21 | Vladimír Jalč
Dobrý den,tento kód "<p><iframe width="320" height="240" style="border: none; overflow: hidden; width: 450px; height: 90px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.rockboulderfilm.cz%2Fadmin%2Farticle%2Fupdate%2Fid%2F58709%2F&send=false&layout=box_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" allowtransparency="true"></iframe></p> " jsem vložil do vlastního boxu a tlačítko se zobrazí,ale po kliknutí se musím přihlásit na facebook a po přihlášení tlačítko buď zmizí nebo se objeví pod ním modře napsáno potvrdit,a i když to udělám tak se nic nestane, www.rockboulderfilm.cz........Děkuji za radu a odpověd..
Odpovědět
RE: CSS
3. 9. 2012 10:20:19 | Hana Medková
Dobrý den, HTML a CSS jsou dva odlišné programovací jazyky které spolu úzce souvisí tak, že v HTML si napíšete obsah webu (případně v inpage nemusíte editovat přímo HTML kod - texty lze psát pohodlně ve vizuálním editoru, který na pozadí mění text do HTML kodu) - jestliže potřebujete vložit do stránky část HMTL kodu např. to tlačítko od Facebooku, pak je nutné část kodu vložit přímo do HTML editoru stránky kam vkládáte obsah, do kterého se dostanete v tom vizuálním editoru přes ikonu s názvem HTML.
Do CSS zasahujete hlavně tehdy, pokud potřebujete změnit např. vzhled stránek (pozadí, menu, barvu nadpisů atd.).
Budete-li v tomto chtít více poradit, neváhejte nás kontaktovat se svými dotazy na admin@zoner.cz a do předmětu zprávy uveďte název Vaší domény.
Odpovědět
css
31. 8. 2012 18:46:21 | radka
Dobrý den,
předem přiznávám, že jsem úplný počítačový analfabet, ale mám stránky na webgardenu a když dám ten html kod do editace css, nic se nestane. vůbec se v těch kodech nevyznám, takže nevím, jestli html kod musím něják přepsat.
Děkuji za odpověď
Odpovědět
Re: Dotaz
5. 6. 2012 14:11:58 | inPage
Webové stránky power-energo.cz neběží na systému inPage, proto Vám nemůžeme pomoci, kontaktujte správce systému, na kterém Váš web běží.
Odpovědět