- 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ářů
Dotaz
30. 5. 2012 16:44:24 | Alena
Dobrý den, mohli byste mi poradit, jak mám postupovat, když mi v administračním systému chybí ikonka HTML? Chtěla bych umístit tlačítko na stránky power-energo.cz. Děkuji za odpověď
Odpovědět
RE: Problémy v MSIE8
27. 1. 2012 15:37:47 | Vojtěch Štursa
Dobrý den, pane Pavelko. Problém není v inPage, ale v kódu od Facebooku, který má problém s IE8. Způsobuje pády prohlížeče. Nejen v iframe řešení, ale i řešení prostřednictví JS s HTML5. Zkuste problematiku zadat do Googlu a dočtete se o problému více. S tímto bohužel nemůžeme nic dělat, pokud vkládáte nějaký externí kód. Zkuste si vložit v iframe něco jiného - flash, externí stránku a uvidíte, že v iframe a inPage problém není.
Odpovědět
Problémy v MSIE8
27. 1. 2012 11:23:43 | Karel Pavelka
Doporučuji otestovat v nainstalovaném Internet Exploreru 8. Sám zatím hledám řešení jak používat na Inpage JavaScriptové aplikace v IFRAME.
Odpovědět
RE: mizí iframe ?
10. 1. 2012 14:45:16 | Hana Medkova
Dobrý den Elis, prosím zkuste vložit zdrojový kód tlačítka při vypnutém wysiwyg editoru. Ten vypnete v administraci v sekci NASTAVENÍ - NASTAVENÍ PROSTŘEDÍ. Následně přejděte na stránku a kód tlačítka vložte přímo do zdrojového kodu stránky. Poté změnu uložte. Pokud se tlačítko na webu zobrazí, zapněte wysiwyg editor znovu a ještě jednou to tlačítko na webu překontrolujte.
Odpovědět
Dotaz
2. 1. 2012 23:18:52 | elis
Dobrý den mám stejný dotaz jako pan Pavel ( 3 dotaz ). Zdrojový kód je <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.pensionlipno.eu&send=false&layout=button_count&width=200&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>
prosím o radu, děkuji
Odpovědět
RE: harmonizace.eu
27. 12. 2011 11:19:28 | Hana Medková
Dobrý den paní Remerová, tak jsme zjistili správný název Vaší domény harmonizace.eu. Vzhledem k tomu, že Vámi použitá šablona je dvousloupcová, a postranní sloupec je umístěn vlevo, jediná možnost jak dostat tlačítko od Facebooku do prava, je vložit jej do stránky s textem. Nevýhodou je, že tlačítko poté bude pouze na dané stránce. Pokud tlačítko umístíte do vlastního boxu v postranním sloupci, pak jej uvidíte stále, at se v menu přepnete na kteroukoliv stránku. Existuje však ještě jedna možnost jak to tlačítko dostat vpravo, mimo šablonu, musela byste postupovat dle návodu http://www.blog.inpage.cz/inpage/kde-se-vzala-reklama-na-blogu/
Odpovědět
RE: harmonizace.cz
21. 12. 2011 19:49:53 | Hana Medkova
na webu harmonizace.cz nevidíme žádný obsah vytvořený v inPage. Při načítání se stránka přesměruje na web cenik.cz, který rovněž není vytvořen v redakčním systému inPage. V tomto případě Vám nemohu dost dobře poradit jakým způsobem to tlačítko dostat vpravo, kam potřebujete. Prosím ověřte zda je ten název domény správný, případně uveďte název té domény, kde svou prezentaci připravujete, obratem Vám poradím jak postupovat. Děkuji za pochopení.
Odpovědět
www.harmonizace.cz
21. 12. 2011 17:02:11 | Jana Remerová
Dobrý den přidala jsem si lehce dle vašeho přesného návodu tlačítko na facebook, ale více by se mi líbilo, kdyby bylo zobrazeno na stránce vpravo, nyní je vlevo, jak je posunu. Děkuji za radu.
Ještě více by se mi líbilo,kdybych uměla udělat jak je na pravé straně záložka, kontakt, pod ní moje nové CD-fotografie, pak oblíbené odkazy, a pod tím, nebo někde mezi. Jak by bylo možné tam udělat ještě jedno takové okýnko, jako výše vyjmenované s tlačítkem líbí facebook ? Děkuji za návod, pokud je to možné udělat. Jana Remerová
Odpovědět
RE: dotaz
12. 12. 2011 14:59:46 | Hana Medková
Dobrý den pane Michale, mohu se zeptat jaký URL odkaz do toho formuláře vkládáte? pokud se zobrazuje veřejný profil facebooku, vypadá to, že by mohl být problém v URL adrese, nebo můžete mít Váš osobní profil na Facebooku nastaven jako neveřejný, také to by mohlo bránit zobrazení štítku Vašeho profilu. Pokud se s námi chcete spojit, napište nám na admin@zoner.cz nebo zavolejte na číslo 543 257 018 a nechte se na mne přepojit, ráda Vám poradím a pomohu problém vyřešit.
Odpovědět
Dotaz
11. 12. 2011 23:23:29 | Michal
Dobrý den,
udělal jsem vše dle Vaších návodů, ale po odhlášení z Facebooku se mi místo fotek a lidí zobrazuje (Veřejný profil na Facebooku Pokud chcete zobrazit obsah, přihlaste se). Show faces jsem zaškrtnul. Už jsem nad tím strávil hodiny, ale nevím si rady. Děkuji za info pokud budete mít čas
Odpovědět
RE: Dotaz
5. 12. 2011 9:52:13 | Hana Medková
Dobrý den pane Pavle, prosím pokud je to možné uveďte název domény u které se nedaří zdrojový kód tlačítka do stránky vložit. Jestli Vás mohu také požádat, zkopírujte sem do odpovědi ten váš zdrojový kód, ať můžeme zkontrolovat, zda je v pořádku, případně bychom obratem zjistili, kde nebo v čem je problém. Děkuji za Vaši reakci.
Odpovědět
Dotaz
4. 12. 2011 20:08:56 | Pavel
Dobrý den. Vložim přes HTML zkopírovaný odkaz, ten se zobrazí. Pak dám uložit a zmizi. Tj. nezobrazuje se na webové stránce. Prosím o radu. Mohu příp. zkonzultovat telefonicky? Můj tel. 728628577. Předem děkují
Odpovědět
RE: google +1
30. 11. 2011 13:53:06 | Hana Medková
Zdrojový kód tlačítka Google +1 pro Vaše stránky vygenerujete přímo na Google. Nejdříve si musíte vytvořit uživatelský účet, který Vám umožní spravovat stránky přes nástroje pro webmastery (Webmaster tools) . Stránky si musíte do Webmaster tools nejdříve přidat, poté budte mít možnost zobrazit v levém panelu tzv. Řídící panel - zde kliknete na odkaz Metriky +1 a na další podstránce uvidíte ve žlutém rámečku odkaz pro přidání tlačítka +1. Následně na stránce nastavíte parametry tlačítka, a vygeneruje se zdrojový kód v javaskirptu, který je nutné vložit do zdrojového HTML kódu stránky. V nejbližších dnech přidáme na náš blog přesný návod jak tlačítko +1 na web umístit.
Odpovědět
Google +1
29. 11. 2011 22:50:39 | Marek Konečný
Dobrý večer,
chtěl bych se zeptat, jak přidat na stránku tlačítko google +1.
Moc děkuji za radu.
Marek Konečný
Odpovědět