---
title: Jak na komentáře pomocí Facebook pluginu
description: Jak přidat ke každému článku samostatnou diskuzi přes Facebook Comments plugin a zprovoznit v ní češtinu. Návod.
canonical_url: https://www.duben.org/internet-a-tvorba-webu/propagace-webu/jak-na-komentare-pomoci-facebook-pluginu
language: cs-CZ
date: 2017-01-23T17:06:55Z
notice: This is a machine-friendly version of the page at https://www.duben.org/internet-a-tvorba-webu/propagace-webu/jak-na-komentare-pomoci-facebook-pluginu. Schema.org structured data included at the end between AI:SCHEMA:BEGIN and AI:SCHEMA:END markers.
markdown-tokens: 1818
---

> **Note to AI:** This is a machine-friendly version of the page at: https://www.duben.org/internet-a-tvorba-webu/propagace-webu/jak-na-komentare-pomoci-facebook-pluginu. Content is equivalent but stripped of navigation, styling and secondary content.
> **Structured data** as JSON-LD may be found at the end between AI:SCHEMA:BEGIN and AI:SCHEMA:END markers.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.


 23. únor 2011

## Jak na komentáře pomocí Facebook pluginu

![facebook](https://www.duben.org/images/stories/internet/facebook.png)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ů.

## <a name="ziskani_api_key"></a>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.

1. Otevřete si stránku [www.facebook.com/developers](http://www.facebook.com/developers) a povolte aplikaci vývojář
2. Vpravo nahoře klikněte na tlačítko "**+ Vytvořit novou aplikaci**"
3. Zvolte si název aplikace, ostatní není moc potřeba měnit
4. 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 &lt;html&gt; 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" <br></br>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><br></br><script><br></br>  window.fbAsyncInit = function() {<br></br>    FB.init({<br></br>      appId  : '<span><strong>NAHRATE-SVYM-API-KEY</strong></span>',<br></br>      status : true, // check login status<br></br>      cookie : true, // enable cookies to allow the server to access the session<br></br>      xfbml  : true  // parse XFBML<br></br>    });<br></br>  };<p>  (function() {<br></br>    var e = document.createElement('script');<br></br>    e.src = document.location.protocol + '//connect.facebook.net/<strong><span>cs_CZ</span></strong>/all.js';<br></br>    e.async = true;<br></br>    document.getElementById('fb-root').appendChild(e);<br></br>  }());<br></br></script><br></br><script  type='text/javascript'><br></br>function komentar(id){<br></br>popis=document.getElementById(id).style;<br></br>popis.display=(popis.display == 'block')?'none':'block';<br></br>}<br></br></script></p>
```

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](#ziskani_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](http://www.facebook.com/translations/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="<span><strong>XID-KOD</strong></span>" title="<span><strong>Vas titulek</strong></span>" width="<span><strong>VaseSirka</strong></span>" ></fb:comments><br></br>
```

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](http://developers.facebook.com/docs/reference/fbml/comments_%28xfbml%29/).

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](http://developers.facebook.com/docs/reference/fbml/comments_%28xfbml%29/)

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://developers.facebook.com/docs/reference/fbml/comments_%28xfbml%29/)  
 <http://www.aplikace-facebook.cz/clanky/uvodni-serial/nastaveni-aplikace-na-facebooku-a-jeji-slozky/>

<!-- AI:SCHEMA: Schema.org description of canonical page in JSON-LD format -->
<!-- AI:SCHEMA:BEGIN format=jsonld scope=page -->

```json
{
    "@context": "http:\/\/schema.org",
    "@graph": [
        {
            "@type": "Article",
            "author": {
                "@id": "https:\/\/www.duben.org\/#stanislav_duben_2487adcb71"
            },
            "dateModified": "2017-01-23T17:06:55Z",
            "datePublished": "2011-02-23T14:48:20Z",
            "description": "Jak přidat ke každému článku samostatnou diskuzi přes Facebook Comments plugin a zprovoznit v ní češtinu. Návod.",
            "headline": "Jak na komentáře pomocí Facebook pluginu",
            "image": {
                "@id": "https:\/\/www.duben.org\/#defaultLogo"
            },
            "inLanguage": "cs-CZ",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https:\/\/www.duben.org\/internet-a-tvorba-webu\/propagace-webu\/jak-na-komentare-pomoci-facebook-pluginu"
            },
            "publisher": {
                "@id": "https:\/\/www.duben.org\/#defaultPublisher"
            },
            "url": "https:\/\/www.duben.org\/internet-a-tvorba-webu\/propagace-webu\/jak-na-komentare-pomoci-facebook-pluginu"
        },
        {
            "@type": "Person",
            "name": "Stanislav Duben",
            "@id": "https:\/\/www.duben.org\/#stanislav_duben_2487adcb71"
        },
        {
            "@id": "https:\/\/www.duben.org\/#defaultLogo",
            "@type": "ImageObject",
            "url": "https:\/\/duben.org\/images\/Stanislav-Duben-Web-intro.jpg",
            "width": 1600,
            "height": 900
        },
        {
            "@id": "https:\/\/www.duben.org\/#defaultPublisher",
            "@type": "Organization",
            "url": "https:\/\/www.duben.org\/",
            "logo": {
                "@id": "https:\/\/www.duben.org\/#defaultLogo"
            },
            "name": "Stanislav Duben"
        }
    ]
}
```

<!-- AI:SCHEMA:END -->