Častým požadavkem některých klientů, kteří chtějí vytvořit webovou prezentaci, je přidání možnosti komentovat svůj obsah a vést jednoduché diskuze. Zpětná odezva je pro majitele webu důležitá. Jenže pro ně je také důležitá cena, kterou zaplatí za integraci tohoto nástroje. Většina současných redakčních systémů dovoluje připojit komentáře k článku. Když toto redakční systém neumožní, nezbývá, než celou funkcionalitu od základu vytvořit. A to jsou další náklady, které bude muset klient zaplatit. Naštěstí Facebook vyšel vývojářům vstříc a v rámci svých sociálních pluginů přináší nástroj Comments. Tento článek bych chtěl pojmout jako návod, ve kterém popíši, jak snadno lze tento plugin integrovat do webových stránek.
Kroky, které jsou nutné k integraci
Zde je seznam kroků potřebných k integraci Facebook komentářů. Detailně budou popsány ve zbývající části tohoto článku.
- Programátor, který stojí za samotnou integrací, musí být veden jako vývojář na Facebooku
- Vytvoření Facebook aplikace
- Integrace pluginu Comments do své webové stránky
1. Staň se vývojářem na Facebooku
Aby bylo možné přejít k vytvoření potřebné aplikace, je nutné se nejprve stát vývojářem na Facebooku. Co to přesně pro Vás znamená? Není nutné nikde žádat o zaměstnání u společnosti Facebook, stačí pouze udělat jeden jednoduchý krok – přidat si mezi oblíbené stránku Vývojář (Developer), která je k dispozici na této adrese http://www.facebook.com/developers/. Mnohdy je nutné na změnu počkat i několik hodin, Facebook úpravu propaguje na všechny jejich servery.
2. Vytvoření potřebné FB aplikace
Samotný plugin Comments, který Vám umožní přikládat komentáře a vést diskuze, musí být propojen s konkrétní Facebook aplikací. Takže pokud je splněn předchozí bod a jste fanouškem aplikace Vývojář (Developer), přejděte na tuto stránku http://www.facebook.com/developers/. Pomocí tlačítka Vytvořit novou aplikaci otevřete formulář pro vytvoření nové aplikace. Teď už zbývá jen vyplnit vše potřebné a odeslat. V nastavení takto vytvořené aplikace vyberte způsob, jak se aplikace bude integrovat na Facebooku, a to tak, že uděláte následující kroky:
- Zaškrtněte volbu Webová stránka
- Objeví se nové formulářové políčko, kde vyplňte URL stránky
Nyní máte vyplněno vše potřebné, takže stačí změny uložit.
3. Integrace pluginu Comments do své webové stránky
Facebook připravil jednoduchého průvodce, s jehož pomocí vygenerujete kód, který pak vložíte do své HTML stránky. K dispozici je na adrese http://developers.facebook.com/docs/reference/plugins/comments/. Vyplňte následující políčko:
- URL to comment on – URL, na které poběží plugin s komentáři
- Number of posts – počet posledních příspěvků, které budou zobrazeny
- Color Scheme – barevné schéma celého pluginu
Pak vše potvrďte pomocí tlačítka Get Code. Zobrazí se Vám nové okno. Pokud již spravujete více Facebook aplikací, tak se ujistěte, že je vybraná právě ta aplikace, která byla vytvořena v bodu č. 2. To provedete pomocí „přepínátka“ viditelného na následujícím obrázku:
První část vygenerovaného kódu vypadá přibližně takto:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/cs_CZ/all.js#xfbml=1&appId=XXXXXXXXXXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Jediný rozdíl je v tom, že u Vás bude místo XXXXXXXXXXXX uvedeno ID vaší aplikace. Tento kód vložte hned za HTML tag <body>.
Druhá část vygenerovaného kódu vypadá přibližně takto:
Konkrétní atributy se můžou lišit v závislosti na Vašem nastavení. Pomocí atributu data-width můžete ještě upravit šířku tohoto pluginu. Tento kód umístěte na požadované místo na stránce, kde budete chtít zobrazit komentáře.
Moderujte nové komentáře
Administrátor komentářů může například zvolit, zda jsou nové komentáře viditelné hned všem uživatelům, nebo mají nějaké omezení (např. je nutné je nejprve schválit). Dále je možné zablokovat vybrané uživatele nebo vybrat nevhodná slova, která se nemohou objevit v příspěvcích. Možností je více. Konkrétní nastavení je možné udělat na této stránce http://developers.facebook.com/tools/comments.
Aby bylo možné moderovat jednotlivé komentáře, musíte povolané osoby zařadit na seznam administrátorů. Následující meta tag umístěte do HTML hlavičky Vaší stránky, tzn. mezi <head> … </head>.
Pokud je moderátorů více, oddělte jejich ID pomocí čárky a bez použití mezery. ID uživatele na Facebooku zjistíte třeba tak, že zadáte jeho login do následující URL https://graph.facebook.com/login_uzivatele (příkladem může být třeba https://graph.facebook.com/igloonet, kde je ID vidět hned na začátku).
Více informací k dalším možnostem nastavení naleznete na této Facebook stránce.
Závěrem
Facebook plugin Comments považuji za velmi užitečný nástroj. A to jak pro klienty, tak pro samotné vývojáře. Pokud nehledáte nic specifického, dokážete tak v krátkém čase nabídnout plnohodnotné vkládání komentářů k článkům či stránkám na webu.
Zdroje a odkazy na podrobnější informace
- Facebook Comments, http://developers.facebook.com/docs/reference/plugins/comments/, únor 2012
Autor článku Martin Pešout
Zdravím, používám na jednom webu FB komentáře. Nyní přesouvám web na jiný hosting, kde jsem web úspěšně zprovoznil, až na komentáře u kterých se mi nezobrazují příspěvky. Web zatím běží na provizorní doméně, kterou jsem měnil i v nastavení FB pluginu. Nevíte jakým způsobem se do toho cpou data??
Zdravím,
chtěl bych se zeptat, zda máte v tagu pro Facebook komentář také atribut xid=“nějaké_id“? Totiž existují 2 způsoby, jak komentáře integrovat do stránky. Buď jsou komentáře propojeny pouze s URL na které se plugin nachází, a to znamená, že byste po změně domény o všechny komentáře přišel. Druhou možností je, že tag obsahuje i xid=“nějaké_id“ a pak je možné komentáře přesunout podle návodu dole na této stránce http://developers.facebook.com/docs/reference/plugins/comments/
Dobrý den,
chtěl bych se Vás zeptat. Použil jsem FB plugin podle návodu. A fungovalo to. Ale pouze do doby než tam někdo napsal, a zjistil jsem že funguje špatně. Funguje to tak, že když někdo napiše komentar na xxx.cz/?p=001, u všech ostatných postu jsou vidět z postu ?p=001. Všude je to stejný, na všechny prispevky stejne komentare.
Prosim poradte, jak to zprovoznit spravne.
Dekuji
S pozdravem Yaka
Zdravím,
mohl bys uvést, jak máš v HTML zapsanou definici pro FB komentáře? Mělo by stačit správně uvést URL stránky pomocí atributu data-href. Pokud tento atribut nemáš uvedený, tak Facebook nerozlišuje xxx.cz/?p=001 a xxx.cz/?p=002. Bere to pak jako stejnou stránku. Proto všude vidíš stejný komentář. Zkus zapsat definici podle vzoru
<div class=“fb-comments“ data-href=“xxx.cz/?p=001″ data-width=“470″ data-num-posts=“10″></div>
P.M.
tak nevim proc to nejde. Zkusim jeste jednou. (div class=“fb-comments“ data-href=“http://xxx.cz“ data-width=“730″ data-num-posts=“100″) (/div) samozrejme misto kulatych zavorek je spicaty.
PS Yaka
Zdravím,
vkládání komentářů nám trochu zlobí. Takže nejde vkládat přímo HTML do textu komentáře. Připravujeme už novou verzi blogu, kde by mělo být vše v pořádku.
A teď k odpovědi. Nepomůže, když do data-href přidáš ID aktuální stránky? V tom je totiž ten problém. Pokud to dobře chápu, tak máš jednotlivé stránky odlišeny pomocí ?p=001, ?p=002, apod. tudíž je nutné tento údaj uvést i do data-href. Tzn. že budeš mít data-href=“http://xxx.cz?p=001“.
Diky. ale…
To jako kdyz mam 100 stranek, mam to upravit jednotlive 100X? To je nejaky divny
Nechce se mi to prepisovat vsude a hlavne kdyz pridam clanek budu muset to zas upravit :/
Jde o to, že ty máš uvedený data-href=“http://xxx.cz“ a tudíž Facebook nerozeznává mezi stránkou http://xxx.cz?p=001 a http://xxx.cz?p=002. Obě totiž bere, jako stejnou stránku. Proto všude pak uvidíš stejné komentáře.
Předpokládám, že ten odkaz máš generovaný nějak automatizovaně, podle IDčka stránky v databázi. Pak to celé nastavení data-href půjde dobře udělat automatizovaně data-href=“http://xxx.cz?p=ID_stranky“.
Vytvořil jsem si na webu komentáře vše funguje, ale ani jeden ze zaslaných komentářů nevidím v moderátorské sekci. Nevíte kde může být problém?
Zdravím,
zkoušel jsi webové komentáře moderovat přes http://developers.facebook.com/tools/comments nebo přímo na webu? Totiž je možné, že na webu se ti nezobrazují, protože čekají na schválení administrátorem. Zkus tedy ten odkaz uvedený výše.
P.M.
Já je vidím právě na webu, ale na zmíněném odkazu nemám vůbec nic ani ve veřejných komentářích ani v těch pro moderátora + mám nastaveno, že každý komentář je veřejný a tedy ani takto je neblokuji.
Ještě jsem si uvědomil, že musím do body vložit “ “ což tam mám jen s složenými závorkami tudíž to bude možná ta chyba, protože to id je bez závorek? A když tam mám to „fb:admins“ tak někde psali, že je třeba vložit i a někde zase, že buď „fb:app_id“ nebo „fb:admins“, ale nikdy ne oboje. zde možná bude „zakopaný pes“. Díky za rady.
Ne, v tom určitě zakopaný pes nebude. Tady mám jeden starý web, kde jsem kdysi dávno integroval FB komentáře http://www.salas-hajek.cz/ v hlavičce mám jak „fb:app_id“ tak i „fb:admins“. Jedno je ID Facebook aplikace, ktera stoji za komentářema a druhé je moje ID, jako uživatele na FB, které zjistím např přes https://graph.facebook.com/tvuj_login
A když tam nemám „fb:app_id“ tak to nebude fungovat? A ty složené závorky v meta tagu nejsou chápu to dobře?
Ano to fungovat bude. Já jen reagoval na ten kometář, kde jsi uváděl, že nejde uvádět oboje naráz. Více k fb:app_id je napsáno zde http://developers.facebook.com/docs/reference/plugins/comments/
Díky za info snad mi odstranění složených závorek pomůže, až bude čas tak to hned zkusím a dám pak echo.
Tak složené závorky jsem také odstranil a žádný pokrok. Snad se to časem rozjede změn tam proběhlo hned několik tak možná FB potřebuje čas na úpravu.
Tak již to funguje bylo potřeba dodat meta tag s přidáním moderátora.
Zdravím, mám závažný problém.
Řídil jsem se přesně dle návodu a pole pro komentáře se zobrazilo správně. Můj web ale jede přes šablony. Tzn. šablona sablona-text.php je stejná a mění se jen obsah. Když jsem tedy přidal komentář u článku X, zobrazoval se i u článků Y,Z,…
Jak tohle mohu vyřešit?
Díky moc.
Zdravím,
jsou jednotlivé stránky rozlišeny alespoň nějakým parametrem? Např. http://xxx.cz?p=ID_stranky jiný způsob, jak odlišit stránky a tím pádem i komentáře podle mého názoru neexistuje. Mrkni výše na diskuzi z 22. února
P.M.
Jo, to bude ono. Moc jsi mi pomohl. Musím se kouknout na to, jakým způsobem generuji ID článků, ale princip je mi jasný.
Díky