Jak si přidat na web Facebook Comments Box

Návod, jak si na web přidat panel s komentáři využívající Facebook social plugin.

Přihlašování a různé registrace při psaní komentářů jsou pro řadu čtenářů otravné a pokud máte na svém webu dostatek návštěvníků, kteří jsou na Facebooku, můžete využít připraveného modulu, který stačí vložit na váš web a každý kdo má Facebook a je právě přihlášen (což většina uživatelů FB při procházení internetu je), nemusí pak už žádné jméno ani email vyplňovat a stačí mu jen vypsat komentář bez jakýchkoliv dalších akcí.

Jak to však vyřešit v kódu? Ani pro webové vývojáře není, jak se dozvíte v následujícím popisu, implementace nijak zvlášť složitá.

Jak vložit komentářový box na web

  1. Navštivte stránku http://developers.facebook.com/setup/ a do políčka Site Name vložte jméno své stránky (např. Můj Super web), do kolonky Site URL adresu svého webu (třeba http://mujsuperextrawebik.cz/) a jako Locale vyberte jazyk – češtinu. Pozor, to lomítko na konci adresy je docela zásadní, bez něj to většinou nechce formulářem projít.
  2. Vygenerují se vám vaše vlastní unikátní kódy. Z nich nás nyní zajímá App ID – toto číslo si zkopírujte do schránky, bude se vám brzy hodit.
  3. Nyní přejděte na stránku věnovanou Social pluginu pro komentáře – je to tato: http://developers.facebook.com/docs/reference/plugins/comments
  4. Do políčka Unique ID vložte číslo, které jste získali v kroku 2 (je to tedy to samé číslo jako App ID). Ještě si můžete upravit počet zobrazovaných komentářů a šířku rámečku, a kliknutím na tlačítko Get Code se vygeneruje kód pro váš web.
  5. Kód dostanete v podobě XFBML. Můžete si ho už teď vložit do html kódu stránky, ale nebude se zobrazovat, je ještě udělat drobnost, a tou je umožnění použití JavaScript SDK na stránce.
  6. JavaScript SDK na svém webu zprovozníte následujícím způsobem: Vložte si na stránku tento kód:

    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : 'VAŠE APP ID',
    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/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());
    </script>

    a vložte ho na stránku někam mezi značky <body> a </body> – měl by být však v html výše než box s komentáři.

  7. Ve chvíli, kdy je kód ve formě XFBML vložen na stránku a JavaScriptové SDK také, měl by se už v této chvíli na vaší webové stránce zobrazovat formulář pro psaní komentářů pomocí Facebooku.

Komentáře k článku. Přidejte i váš!

  1. a jak udělat, abych mohla dát pod každý článek jiný box a nezobrazovali se tedy u každého článku komentáře i k těm ostatním?

  2. Zdravíčko, díky za návod, rozchodil jsem to. Jen mi to teď nenabízí možnost anonymních komentářů, byť jsem to v konfiguraci označil. Nevíte co s tím?

  3. Pro Máju: mělo by to jít ošetřit parametrem xid, který určuje unikátní kód jednotlivých diskusí, například . A co se anonymních komentářů týče je to tak že jakmile delegujete moderátora přímo z widgetu, přijdete o možnost vkládání anonymních komentářů. Je třeba je delegovat pouze ze správy aplikace.

  4. ano taky se mi to stalo, jsou tam zřejmě nějaká omezující pravidla, zdá se mi, že se to zobrazuje např. pro všechny weby na doméně .info

  5. Nicméně, pokud už máte účet jako developer, můžete přídávat jako adresu chcete.

  6. INVALID URL to píše, když ta vámi vyplněná url nekončí lomítkem = musí končit znakem / (je to cesta)

    nicméně po té už mě to pustí dál, ale na konci vrátí chybu serveru a dostanu prázdnou stránku

    http://developers.facebook.com/setup/

    nevíte někdo prosím jak jinak vygenerovat to App ID?
    díkaman

  7. Dobrý den,

    Já mám přesně opačný problém než Mája 🙂

    Poradil by mi někdo co mám udělat, abych měl na 2 stránkách stejnou “diskusi”?
    Jde mi o stránky http://www.apo-vystoupeni.cz/nabidka/skakaci-boty-predstaveni-show.php a http://www.apo-vystoupeni.cz/nabidka/skakaci-boty-prekvapeni-maturitni-ples.php
    V hlavičce nemám uveden kód xmlns… a přesto se mi nezobrazují totožné komentáře. Moc děkuji.

    Dotaz č. 2: Kdeže mohu povolit anonymní komentáře?

    Děkuji za pomocc

  8. Dobrý den,
    všechno se nám podařilo rozchodit,jen nemůžeme nikde v nastavení najít,když někdo napíše komentář a my nejsme zrovna přihlášeni na FB,aby nám přišlo oznámení třeba na email nebo sms.
    děkuji Svoboda

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *