23. únor 2011
Jak na komentáře pomocí Facebook pluginu
Pokud jste se rozhodli přidat ke svým článkům diskuzi, pomocí facebook pluginu a pro každý článek, druh zboží apod. mít samostatnou diskuzi, najdete zde návod jak na to. Pokud jste to již zkoušeli a nedaří se vám dostat do diskuze češtinu, nebo diskuze ne a ne být různá pro jednotlivé články, pomůže vám tento návod také.
K vytvoření diskuze vedou jednoduché kroky, které mají drobné zádrhely v detailech. Projdeme je krok po kroku se zdůrazněním zádrhelů.
Získání API key z facebooku
Abyste mohli přidat diskuzi do svých stránek musíte nejprve na facebooku vytvořit aplikaci, která bude mít správu vašich diskuzí na starost.
- Otevřete si stránku www.facebook.com/developers a povolte aplikaci vývojář
- Vpravo nahoře klikněte na tlačítko "+ Vytvořit novou aplikaci"
- Zvolte si název aplikace, ostatní není moc potřeba měnit
- Zkopírujte si Api Key, ten budeme v kódu využívat
Úpravy kódu stránky
Jakmile máme API key, můžeme se pustit do úprav stránek. Budeme vkládat 3 části kódu do stránky.
Úprava HTML tagu
Základní tvar <html> je potřeba upravit tak, aby obsahoval toto FBML informace.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"
xml:lang="cs" lang="cs">
Vložení asynchronního SDK javacriptu
Pro správné fungování dále musíte vložit javascript pro komunikaci s facebookem. Ideální je využít asynchronního kódu, který neblokuje načítání zbytku stránky.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'NAHRATE-SVYM-API-KEY',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/cs_CZ/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type='text/javascript'>
function komentar(id){
popis=document.getElementById(id).style;
popis.display=(popis.display == 'block')?'none':'block';
}
</script>
V kódu zkontrolujte a změňte:
01.NAHRATE-SVYM-API-KEY, přepište na API KEY, který jste získali dle postupu získání API Key
02.Pokud nechcete českou jazykovou mutaci komentářů, změňte cs_CZ na jiný jazyk. Jednotlivé nastavení pro konkrétní zemi nebo jazyk najdete v XML FacebookLocales.xml
Vložení boxu diskuze
Konečně se dostáváme k části, kde můžeme vložit box s diskuzí do námi požadovaného místa stránky. K tomu slouží tento kód
<fb:comments xid="XID-KOD" title="Vas titulek" width="VaseSirka" ></fb:comments>
Zde leží největší zádrhel je jím XID kód. Pokud dodržíte předchozí postup a něco nebude fungovat, hledejte problém právě zde. Co je potřeba nastavit a jak:
01.XID kód, je potřeba nahradit nějakým jednoznačným identifikátorem v rámci vašich stránek. Ideální je použít ID záznamu. S čísly totiž funguje vše jak má. Nepoužívejte URL stránky, XID používá encoded URL form, která smí obsahovat dle dokumentace pouze alfanumerické znaky (Aa-Zz, 0-9), pomlčku (-), procenta (%), tečku (.) a podtržítko (_). Jak vidíte žádné lomítka, dvojtečky, ampersand tam být nesmí. Použití nějak enkódované URL jako XID vede v 95 procentech k problémům. Proto ještě jednou doporučuji použít číselný identifikátor. Více najdete ve FB dokumentaci.
02.Váš titulek - není povinný, pokud ho vynecháte použije se titulek stránky v kterém se box načítá.
03.Vaše šířka - udává se číslem, které znamená počet pixelů. Pokud tedy chcete box o šířce 450px bude jako parametr width="450".
Další volitelné parametry, kterými si můžete diskuzní box přizpůsobit naleznete v FB:comment dokumentaci pro developery
Tímto máte úpravy za sebou a můžete vyzkoušet jak vám komentáře přes Facebook fungují.
Použité informační zdroje:
http://developers.facebook.com/docs/reference/javascript/
http://developers.facebook.com/docs/reference/fbml/comments_%28xfbml%29/
http://www.aplikace-facebook.cz/clanky/uvodni-serial/nastaveni-aplikace-na-facebooku-a-jeji-slozky/
