De Facebook Comments Box

Mensen eenvoudig commentaar laten plaatsen zonder een moeilijk reactie systeem te maken? Dat kan met de Facebook Comments box. Deze is binnen 10 minuten op je site te plaatsen, en ook anonieme gebruikers kunnen een bericht achterlaten!

Stap 1: Toepassing aanmaken

Voordat je de comments box op je site kunt plaatsen, dien je een toepassing aan te maken. Facebook genereert hierbij een aantal unieke sleutels, zodat jou site herkend wordt. De toepassing kun je maken door naar http://www.facebook.com/developers/ te gaan. Vervolgens klik je op Nieuwe toepassing aanmaken. Verzin een naam voor je toepassing, en ga akkoord met de algemene voorwaarden. Ga naar het tabblad website en vul bij Site URL de URL van jou website op. In mijn geval was dat http://www.noobtutorials.nl/. Er is nu een zogenaamd Toepassing ID aangemaakt. Bewaar dit ID, deze is later nodig.

Stap 2: Code genereren

Facebook heeft een handige wizard gemaakt om snel en eenvoudig de goede code te genereren. Volg daarvoor deze link en volg de instructies van Facebook op.

Onderstaande uitleg is verouderd, de Facebook Javascript SDK is vernieuwd waardoor deze niet meer zal werken

Stap 2: Code genereren

Facebook heeft een aparte pagina voor het generen van de code voor de comments box, welke hier te vinden is. Echter lukte het mij niet om deze werkend te krijgen. Na wat speuren op het internet ben ik uiteindelijk op deze code uitgekomen:

  1. <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
  2.  
  3. <fb:comments></fb:comments>
  4.  
  5. <script type="text/javascript">
  6. FB.locale = "nl_NL"
  7. FB.init("TOEPASSING_ID", "xd_receiver.htm");

Ook is er een zogenaamd Cross-Domain Receiver Page nodig. Dit bestand heet xd_receiver.htm en moet worden opgeslagen in de root van de website. De inhoud van dit bestand ziet er zo uit:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4.     <title>Cross-Domain Receiver Page</title>
  5. </head>
  6.     <script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
  7. </body>
  8. </html>

In Firefox zal dit werken, echter moet er nog één aanpassing gedaan worden voordat deze code in Internet Explorer zal werken. De HTML tag zal namelijk aangepast moeten worden naar:

  1. <html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">

Stap 3: Anonieme gebruikers

Nu moet alleen nog aangegeven worden dat anonieme gebruikers ook een bericht mogen achterlaten. Dat kan door in de box op Beheer Commentaren te klikken. Zet de optie Anonieme reacties toestaan op Ja en sla de instellingen op.


Andere taal

Liever de comments box in een andere taal? Verander dan deze regel naar de gewenste taal:

  1. FB.locale = "nl_NL"

Nederlands is nl_NL en Belgisch Nederlands is nl_BE.