0 Kč bez DPH
  • 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.

Ilustrační foto - Like ButtonPokud 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.

Formulář FB pro generování tlačítka "To se mi líbí"

  • 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.

Zdrojový kód k like buttonu

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ČENÍ:

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.

Vložení zdrojového kódu tlačítka "To se mi líbí" do stránky
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.

TIP:

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ářů

  • Zarovnání tlačítka LIKE

    17. 7. 2019 1:53:43 | Tomáš

    Dobrý den, na stránkách fotocross.cz na hlavní stránku se mi podařilo dle vašeho návodu jednoduše vložit LIKE tlačítko. Vypadá i funkčně :)
    Jen se mi ho nedaří zarovnat na střed. poradíte prosím?

    S Díky Tomáš

    Odpovědět | Zobrazit odpovědi

    • Re: Zarovnání tlačítka LIKE

      17. 7. 2019 7:27:20 | R

      Dobrý den Tomáši, do vlastních CSS stylů (v administraci - vzhled) vložte:
      .fb-like.fb_iframe_widget {text-align: center; width: 100%;}

      Odpovědět

  • U tlačítka chybí grafika

    27. 1. 2017 14:03:33 | Julie

    Dobrý den,
    vygenerovala jsem tlačítko dle návodu a je plně funkční. Jediný problém, který mám je, že se mi u tlačítka nezobrazí grafika.

    V článku mám pouze "Sdílej" ve formátu klasického textu.

    Je možné tuto chybu nějak odstranit?

    Děkuji moc.

    Julie

    Odpovědět | Zobrazit odpovědi

    • Re: U tlačítka chybí grafika

      1. 2. 2017 15:46:53 | Tým inPage

      Dobrý den, prosím o zaslání dotazu s uvedením webové stránky, které se problém týká, na email: admin@zoner.cz. Děkuji.

      Odpovědět

  • nejde vložit LIKE tlačítko

    6. 12. 2016 23:34:10 | Eliška Malíková (spol. Ing. Petr Ratajský-www.coffee-servis.cz

    Dobrý den, snažím se už asi hodinu zprovoznit tlačítko To se mi líbí na našem webu, který od vás máme. Bohužel stále neúspěšně, kódy jsem si vygenerovala, stránku vytvořila, bohužel vlastní boxy mám plné a nejde mi zařadit pod menu. Poslala bych v příloze print screen. Bohužel teď najednou nejdou ani naše stránky, vůbec. Možná je to jen dočasný výpadek. Dejte mi prosím vědět, jestli to má nějaké řešení

    Odpovědět | Zobrazit odpovědi

    • Re: nejde vložit LIKE tlačítko

      19. 12. 2016 9:08:01 | Tým inPage

      Dobrý den, protože již nepřišla žádná reakce na náš email, který jsme Vám v této souvislosti psali a stránky jsou funkční, prosíme v případě přetrvání problému o zaslání dotazu na naši zákaznickou podporu admin@zoner.cz.

      Odpovědět

  • Re: Obrázek u odkazu

    4. 4. 2016 9:52:15 | Tým inPage

    Dobrý den,
    facebook vybírá vhodné obrázky z webu, které jsou v rozlišení 200 × 200, 600 × 315, 1200 × 630 nebo poměru 1.91:1. Více o této problematice je možné se dovědět např. v tomto článku http://jecas.cz/nahled-odkazu .

    Odpovědět

  • Obrázek u odkazu

    2. 4. 2016 14:48:25 | BSL

    Dobrý den,
    při sdílení stránek na facebooku se mi nezobrazuje obrázek u odkazu, pouze šedé okno. Jinak vše funguje. Jak dostanu obrázek do odkazu?
    Děkuji.

    Odpovědět

  • RE: díky moc -ale...:)

    10. 11. 2015 9:24:52 | Tým inPage

    Dobrý den,
    zmiňovaný Plugin si vygenerujete stejným způsobem na níže uvedené adrese: https://developers.facebook.com/docs/plugins/page-plugin

    Odpovědět

  • díky moc -ale...:)

    9. 11. 2015 21:44:46 | Bára

    Dobrý den, díky za návod, tlačítko se mi na web povedlo nacpat ale chtěla bych tam i takové to okénko s náhledem na moji stránku + pár lidí, kterým už se to líbí..nemáte návod i na to?
    Díky moc, b.

    Odpovědět

  • RE: funguje, RE: zobrazilo se na stránce ale na facebooku nefung

    21. 10. 2015 8:37:47 | Tým inPage

    Dobrý den,
    prosím zašlete nám na email admin@zoner.cz adresu Vašich webových stránek na facebooku a my prověříme zdrojový kód tlačítek.
    Děkujeme.

    Odpovědět

  • zobrazilo se na stránce , ale na facebooku nefunguje

    21. 10. 2015 8:10:39 | Fuksa

    Dobrý den,
    včera se mi podařilo přidat na web www.hotelinge.cz tlačítko "líbí se mi" ,sice načítá lidi kteří na něj klikli , ale na jejich profilu facebooku se nezobrazilo že by na to klikli.
    Je možná nějaká kontrola od vás?
    Děkuji Fuksa

    Odpovědět

  • funguje

    20. 10. 2015 14:36:13 | Fuksa

    Dobrý den,
    návod na tlačítko plně funguje a tlačítko se mi podařilo bez problémů vytvořit a funguje. Ještě prosím ale o radu jak zprovoznit tlačítko sdílet. Když na něj kliknu , tak sice na fb je sdílení ,ale po kliknutí na to už se objeví že stránka neexistuje.

    Děkuji Fuksa

    Odpovědět

  • IFRAME

    23. 6. 2015 19:16:28 | Lucie

    Dobrý den,
    jsem asi slepá, ale kde si přepnu, že chci IFRAME kód? Po kliknutí na Get code se mi zobrazí jen div (stejně jako je na obrázku v návodu) a nikde nemám možnost získání iframe kódu, který bych uvítala více. Prosím, kde nebo jak ho získám? Děkuji

    Odpovědět

  • RE: like

    17. 6. 2015 11:13:05 | Ondřej Jonáš

    Dobrý den,
    článek jsme upravili dle aktuální verze, kterou facebook pozměnil. Nyní by tedy mělo vše v pořádku zobrazovat a fungovat.
    Přeji hezký den.

    Odpovědět

  • like

    14. 6. 2015 11:54:10 | Venca666

    ten návod na tlačítko "like" nefunguje. na stráce se nezobrazí nic pod tím kodem. obrázky neodpovídají skutečnosti k uvedeným odkazům. "je na nich úplně jiného než na odkazu". Máte pravdu nejlepší a nejrychejší by bylo sem vložít funkční celý kód který jde zkopírovat, do kterého by si uživatel vložil jen svoje info. jak vídím "like" nefunuje mě, ani ostatním lidem co píší... podobné návody jsou i na jiných webch, ale také nefungují. Tak nevím co to je za moribundus... když vám pošlu na mejl svoje info potřebné pro vytvoření toho talčíka, vytvoříte mi nový kód?

    Odpovědět

  • RE: tlačítko like

    4. 5. 2015 9:35:09 | Ondřej Jonáš

    Dobrý den,
    samozřejmě by to bylo možné, ale lidé by si museli vždy upravit cestu ve zdrojovém kódu a nevím, zda by to bylo zrovna vhodné. Tento článek přesně popisuje, jak vložit toto tlačítko na stránky. Bohužel nevím jakou konkrétní chybu Vám tlačítko dělá, tudíž nejsem schopen blíže pomoci. Někdy má také vliv na toto tlačítko AdBlock, ale nevím jestli je to právě Váš případ.

    Odpovědět

inPage

Webhosting

Domény

Ostatní