[NÁVOD] Jak přidat do ExitShopu blok s komentáři na facebooku

Jelikož se zatím s tímto systémem teprve seznamuji, vyvstává mi spoustu otázek, které pak musím následně řešit. Jako první věc, kterou jsem si dal za cíl je, implementovat na web komentáře z Facebooku. Má to hned dvě výhody. Jednak mohou vaši zákazníci vidět, že je o tento druh zboží zájem, protože má kladné ohlasy, ale také poslouží k bezplatné propagaci na Facebooku. Práce to není nijak složitá, ale určitě by se některým z vás hodil návod, jak toho vlastně dosáhnout.

Jaké jsou předpoklady pro správné nastavení?

Facebook komentáře nejsou nic jiného, než skript, který Vám vygeneruje přímo Facebook. Ovšem jsou zapotřebí některé kroky, pojďme se na ně tedy podívat.

Staňte se vývojářem na facebooku, pokud jím už nejste…

Jelikož budete potřebovat vytvořit vlastní aplikaci, která je zapotřebí pro komentáře, musíte vstoupit mezi vývojáře. Nebojte se, nic to nestojí, ani se od vás tímto nic nevyžaduje, tedy kromě telefonního čísla pro ověření :). Jako vývojář pak máte přístup k mnohým mocným nástrojům. Přidat se můžete na adrese http://www.facebook.com/developers/.

Registraci provedete například tak, že nahoře zvolíte Aplikace a vyberete možnost Register as a Developer. Musíte projít registračním procesem a po jeho ukončení záleží na konkrétním případě, ale zpravidla do hodiny z vás bude “vývojář”.

Vytvořte si svou aplikaci

Abychom byly schopni přidat plugin pro komentáře na náš web, musíme vytvořit aplikaci, kterou s tímto pluginem propojíme. Opět se vrátíme na stránku http://www.facebook.com/developers/ (pokud tam stále nejsme). Nahoře vybereme záložku Aplikace a Vytvořit novou aplikaci. Vyplníme název a kategorii (například aplikace pro stránky). Tímto se založí aplikace a přesměruje nás to na Nástěnku.

Zde už je spoustu možností k nastavení, nás bude zajímat pole s emailem, ten vyplníme. Bez vyplnění mailu nám nepůjde aplikace spustit jako veřejná. Další potřebnou věcí je v záložce Nastavení přidat platformu. Zde vybereme webová stránka. Přibudou nám políčka pro URL adresu webu, kterou doplníme.

Jakmile se nám podaří proklikat výše zmíněným, přepneme se do záložky Status & Review. Zde máme nahoře u názvu aplikace tlačítko, kterým spustíme aplikaci do veřejného režimu. Tímto je nastavení aplikace dokonáno, tedy alespoň k našim účelům.

Vygenerování a vložení skriptu na stránky

Přejděme rovnou na stránku http://developers.facebook.com/docs/reference/plugins/comments/. Zde si vygenerujeme HTML kód, který pak vložíme přímo do administrace ExitShop.cz. Bude nám k tomu stačit vložit URL adresu webu, kterou jsme vkládali při vytváření aplikace. Dále můžeme určit šířku pluginu (pole width, ideální je 950). Pole Number of Posts nám určuje kolik příspěvků chceme zobrazit na stránce. Poslední je barevné schéma (color scheme). Veškeré změny nám rovnou zobrazí daný plugin, tak jak bude vypadat na vašich stránkách.

Jakmile máme nastaveno, tak dole stiskneme tlačítko Get Code. Měli bychom vidět něco jako:

<div id=”fb-root”></div>
<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=XXXXXXXXXXX“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

<div data-href=”http://example.com/comments” data-numposts=”25″ data-colorscheme=”light”></div>

Ta první, delší část, je samotný skript, který se stará o napojení k naší aplikaci. V tomto příkladu jsem nahradil část textu, která zobrazuje appid (XXXXXXXX) ve vašem skriptu bude správné ID. Ve druhé části je menší část kódu, která se stará o zobrazení samotného pluginu.

Nyní už se blížíme ke konci, přihlásíme se do našeho eshopu na www.exitshop.cz. V sekci Obchody/Seznam obchodů/ vybereme náš obchod. Nejprve otevřeme sekci se skripty. Vložíme si nový skript, který si nazveme třeba Facebook. Obsah nahradíme delší částí skriptu a uložíme:

<div id=”fb-root”></div>
<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=XXXXXXXXXXX“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Poté se přepneme zpět do nastavení obchodu a vybereme sekci Obsah a galerie. Jak už asi víte, zde vložíme kratší část kódu. Najdeme si sekci 4 (O nás). Tady nebude stačit kód vložit přímo do editoru, ale do HTML editoru. Ten spustíme najetím na úplně první tlačítko s názve zdroj (viz obrázek).

sekce 4

Pokud zde máme nějaký text, tak sjedeme posuvníkem až úplně dolů a na konec vložíme náš zbývající kus kódu:

<div data-href=”http://example.com/comments” data-numposts=”25″ data-colorscheme=”light”></div>

Počítáme ovšem pořád s tím, že mnou vložené kódy Vám nebudou fungovat, musíte použít ty, co vám vygeneroval facebook přes generátor, viz výše.

Máme hotovo, tedy téměř.

Pokud jste se dostali až sem, s největší pravděpodobností máte na svém jednoproduktovém eshopu panel pro vkládání komentářů. Může se zdát, že je to vše, ale někteří jistě namítnou, že je potřeba dalších věcí. Komentáře je potřeba nějak schvalovat, mazat, upravovat… K těmto účelům má posloužit tato stránka http://developers.facebook.com/tools/comments.

A zde se již dostáváme k bodu, na kterém jsem zamrzl. Nevím, zda je to rukama, ale nejsem schopen moderovat komentáře, jednoduše je tam nevidím. Navíc nastavení, které zde upravím se nijak neprojeví na pluginu na mých stránkách. Jakoby nefungovalo to propojení. Budu tedy rád za jakékoliv rady, jelikož jsem v tomto také zatím pouze laik.

EDIT: (JIŽ FUNKČNÍ!) Poznámka pod čarou aneb moje poznatky s moderováním komentářů

Zkoušel jsem tento problém vyřešit vším možným i nemožným, dokonce jsem si přidal do hlavičky stránky meta tagy fb:app_idfb:admins, které by tento problém měly teoreticky řešit, ale ani to mi nepomohlo. Má někdo ještě jiné rady nebo případná esa v rukávu?

Budu rád za vaše komentáře. A v dalším návodu se podíváme například na implementaci Google Analytics… 🙂

S novou funkcí ExitShopu přichází možnost přidat skripty do hlavičky, což řeší náš problém s moderováním příspěvků. Bude nám tedy stačit přidat nový skript a využít nového zatrhávátka Umístit v Head. Do obsahu skriptu stačí vepsat následující (samozřejmě musíte doplnit do složených závorek Vaše IDčka):

<meta property=”fb:app_id” content=”{ID Vaší aplikace}”/>
<meta property=”fb:admins” content=”{ID admina }”/>

Na závěr bych chtěl poděkovat Karlu Kratochvílovi za pomoc při vkládání pluginu na web, dokázal mě nasměrovat správným směrem! 🙂

5 komentářů u „[NÁVOD] Jak přidat do ExitShopu blok s komentáři na facebooku

Napsat komentář