Disqus in 8 stappen

Discussies op je site brengt meer interactie en versterkt het gemeenschapsgevoel. Zie je jezelf niet meteen met complexe scripts aan de slag gaan? Geen nood: zet dan de gratis webservice Disqus in, met handige extra’s als media-embedding, antispam, e-mailnotificatie en integratie met sociale netwerksites. Een zelf gehost discussieforum heeft het voordeel dat je alle touwtjes in handen houdt. Zet je een webservice als Disqus in, dan ben je natuurlijk wel afhankelijk van een externe partij, maar dat geldt eigenlijk voor alle clouddiensten. Kun je daar mee leven, dan zien we nog weinig redenen je forum niet door Disqus te laten opzetten. De featurerijke webservice laat zich namelijk makkelijk installeren en valt ook prima te integreren op diverse platformen, waaronder WordPress, Joomla!, Blogger en Drupal. Het is dus geen verrassing dat Disqus in enkele jaren tijd – eind 2007 opgestart – is uitgegroeid tot de populairste service voor online discussies en commentaar. Ook het uiterlijk van je forum kun je aanpassen. Daarvoor moet je in eerste instantie bij Settings, tabblad Appearance zijn. Hier kun je in één klap het thema van het forum wijzigen. In principe volstaat het het gewenste thema te selecteren en (onderaan) met Save Changes te bevestigen, maar dit blijkt niet te werken op onze testsite. Kun je echter met css overweg, dan is het mogelijk je eigen stijldefinities vast te leggen. Dat doe je in het paneel Custom CSS onderaan de pagina – merk trouwens op dat je via de instructie @import url(http://pad-naar-css); ook naar een extern stijlblad kunt verwijzen. Disqus laat jammer genoeg maar een beperkt aantal css-aanpassingen toe. We beperken ons hier tot twee voorbeelden, maar je kunt nog terecht op http://docs.disqus.com/help/69. Met #dsq-content {color:#8000000 !important;} wijzig je de tekstkleur van de commentaren en met #dsq-content .dsq-moderator .dsq-comment-header {background: #FFA500;} pas je de achtergrondkleur aan van de headers van je eigen commentaar. Een drastischere facelift is ook mogelijk, maar daar heb je dan wel de geavanceerde theme-editor voor nodig. Die vind je jammer genoeg alleen terug in de dure (!) premium addons: open de beheermodule, ga naar het tabblad Moderate en klik op Upgrade. Sleutelen met css voor een andere aanblik. Wil je je forum goed op orde hebben én houden, loop dan nog een aantal andere instellingen door. Die vind je verzameld op het tabblad Settings van je beheermodule. Dit onderdeel valt ook weer in enkele rubrieken uiteen: General, Moderation, Appearance en Access Control. We lichten de interessantste opties toe. Op het tabblad General kun je bij Features goed maken wat je in stap 1 eventueel gemist hebt. Via Email notifications geef je aan of en wanneer je precies een e-mail van Disqus wil ontvangen. Niet onbelangrijk: bij Who Can Comment is het mogelijk in te stellen dat je alleen (bij Disqus) geregistreerde gebruikers commentaar laat geven. Een vorm van ‘access control’ dus: op het gelijknamige tabblad vind je nog meer opties in deze richting. Niet alleen beheer je hier de gebruikers op de zwarte en witte lijsten, je kunt ook ‘verboden woorden’ invullen (gescheiden door een komma). Commentaar datt een van deze woorden bevat wordt niet onmiddellijk gepubliceerd, maar komt in het tabblad Pending van de beheermodule terecht tot je die goedkeurt, als spam markeert of verwijdert. Voor de liefhebbers: op het tabblad Moderation vind je de optie Pre-moderation, een screeningfunctie waarmee je álle commentaar vooraf laat goedkeuren. Ongewenste taal? Niet zonder screening! Klik je op het tabblad Moderate in het rechterpaneel op het pijltje (naast Blacklist), dan kun je de geposte berichten filteren op naam, e-mailadres of ip-adres van de verzender, maar ook volgens ‘thread’. Een thread is een collectie van alle reacties die van dezelfde webpagina afkomstig zijn. Disqus organiseert de threads standaard op basis van de url van de webpagina, maar een betrouwbaardere methode is via een unieke ID op elke webpagina met Disqus-commentaren. Dat doe je door de variabele disqus_identifier in de Disqus-code te plaatsen (zie stap 2), bijvoorbeeld var disqus_identifier = ‘pcmartikel1’;. Een andere nuttige variabele die je hier ook kunt plaatsen is disqus_url, die altijd wordt opgeslagen bij het creëren van een thread. Nu kun je het identificeren van de url ook wel aan Disqus zelf overlaten, maar dat kan wel eens mislopen – Disqus zou bijvoorbeeld www.mijnsite.nl/pagina1.htm?xyz als een andere pagina kunnen beschouwen dan www.mijnsite.nl/pagina1.htm. Met behulp van een paar variabelen bouw je iets meer zekerheid in. Focusten we ons met de vorige stap op het frontend van Disqus, nu nemen we een kijkje achter de schermen. Open de Disqus-site en meld je via Login aan. Je belandt nu automatisch in de beheermodule van je Disqus-forum (aangezien je jouw account in stap 1 als hoofdmoderator had ingesteld), op het tabblad Moderate. De testreactie uit de vorige stap duikt nu op in het linkerpaneel, bij Approved. Via het Spam-knopje verhuis je het commentaar meteen naar het tabblad Spam − doe dat alleen met echte spam, aangezien het spamfilter zelflerend is − en met Delete verwijder je het. Klik je deze reactie op een lege plek aan, dan verschijnen rechts meer opties en extra informatie. Zo kun je van hieruit ook op het commentaar reageren via Reply of zelfs bewerken met Edit. In dit laatste geval verschijnt bij de commentaar dan wel Bewerkt door een moderator. Verder kun je de verzender op een white- dan wel een blacklist plaatsen. In het eerste geval wordt alle commentaar van die persoon automatisch goedgekeurd (zie ook stap 7), in het tweede geval kan hij niet langer commentaar op je site posten. Antispam, commentaarbewerkingen, witte lijst en zwarte lijst: handige opties voor een moderator. Tijd voor een eerste testreactie. Klik rechtsboven bij Schrijf je reactie hier op Uitloggen, zodat je een ‘onbekende gebruiker’ simuleert. Vul vervolgens een willekeurige reactie in. Je kunt je tekst tot op zekere hoogte vormgeven door html-tags te gebruiken. Op http://docs.disqus.com/help/19 lees je welke tags precies zijn toegelaten. Merk tevens op dat je – afhankelijk van je keuze in stap 1 – via het plusknopje linksonder ook mediabestanden met je commentaar kunt meesturen. Dat kan een lokale afbeelding zijn (gif, jpg of png), maar ook een link naar een afbeelding op Flickr of naar een online video bij YouTube. Klik op Plaats als om je commentaar te posten. Helemaal anoniem posten is niet mogelijk, maar kies je voor Gast, dan kom je al weg met een (vals?) e-mailadres en een (gefingeerde?) naam. Je aanmelden met je Disqus-, Google-, Twitter-, Facebook-, Yahoo- of OpenID-account is eveneens mogelijk. Uiteraard zal je Disqus dan wel moeten toelaten dat account te gebruiken. Nadat je commentaar is verzonden, verschijnt dat nagenoeg in realtime op je webpagina. Html-tags, inline media en een flexibele aanmeldprocedure. Je hebt de code in een pagina geïnjecteerd en die wil je natuurlijk meteen even uittesten. Het liefst eerst lokaal, en daar kan het fout lopen. Wanneer je namelijk je browser (via Bestand, Bestand openen) naar het lokale testbestand verwijst, duikt normaliter een foutbericht op je webpagina op: “We were unable to load Disqus”. Nu stelt de troubeshooting guide in zo’n geval ook wel voor je Disqus-code van een extra variabele te voorzien (var disqus_developer = 1;) om zo te vermijden dat Disqus de url verifieert, maar dat blijkt tijdens onze tests niet te werken. Wil je een en ander lokaal uittesten, dan installeer je het best eerst een webserver en verwijs je (via http://localhost/...) naar je testpagina. In de kader Lokale webserver vertellen we je kort hoe je zo’n webserver opzet. Op deze manier werkt het blijkbaar niet. Geen Disqus-forum zonder registratie. Surf dus naar www.disqus.com en klik op Sign Up. Het registreren blijkt een drietrapsproces. Allereerst geef je aan om welke site het gaat en welk account als hoofdmoderator (primary moderator) mag optreden. Als alles goed is, lees je in het volgende venster al dat je site bij Disqus is geregistreerd onder de door jou gekozen verkorte naam (shortname). Een Quick Setup-module vraagt je vervolgens naar je voorkeurstaal (wij kiezen hier voor Dutch) en laat je toe enkele optionele features te activeren. Weet je niet goed wat elke optie precies inhoudt, dan houd je de muisaanwijzer er even boven om feedback te lezen. Gretig als we zijn, selecteren wij hier alle opties. In het kader Antispam lees je iets meer over één ervan: Akismet. Houd er tevens rekening mee dat Disqus je na de registratie een mail zal toesturen met een link, bedoeld om je e-mailadres te verifiëren. Je kunt in deze fase al beslissen welke extra’s je in je forum wilt. Het derde luik van de registratieprocedure biedt je weinig meer aan dan een webpagina met links naar de installatiecode en -instructies voor diverse platformen. We gaan ervan uit dat jouw site een rechttoe rechtaan (x)html met css site is en dus kies je voor de algemeen toepasbare JavaScript-code. Dat houdt uiteraard wel in dat je discussieforum alleen zal werken op browsers die JavaScript niet geblokkeerd hebben. Klik dus maar op Universal Code en onthoud de verkorte forumnaam die je in stap 1 aan Disqus zelf hebt meegedeeld. Vervolgens selecteer je volledige code in het paneel Embed code, kopieer je die met Ctrl+C naar het Windows klembord en plak je hem met Ctrl+V in de html-code van de gewenste webpagina: eentje waar je commentaren wilt zien verschijnen. Belangrijk is wel dat je de Javascript-variabele disqus_shortname de juiste verkorte naam meegeeft. In ons voorbeeld hebben we ‘example’ vervangen door ‘pcmforum’. De code en het resultaat.

PCM

Disqus in 8 stappen

Inhoudsopgave

Laatste Vacatures

Nieuws headlines

PCM

Disqus in 8 stappen

Inhoudsopgave

Nieuws headlines

Registreren

We hebben je een e-mail gestuurd!

Oops… er ging wat mis.

Hoera, je account is nu geactiveerd!

Dit token is niet meer valide.

Wachtwoord vergeten?

Je aanvraag is verstuurd

Wachtwoord herstellen

Wachtwoord herstellen

Dit token is niet meer valide.

Bedankt!

Je vraag is geplaatst!

Je antwoord is geplaatst!

Bevestigingsmail verstuurd!