Intensedebate Kommentarsystem per CSS anpassen

Wer sich etwas mit WordPress und Co. beschäftigt, dem wird bereits aufgefallen sein, dass in vielen Blogs alternative Kommentarsysteme installiert sind. Derzeit gibt es in meinen Augen genau zwei brauchbare: Disqus und Intensedebate.

Ich setzte schon eine ganze Weile auf Intensedebate, da es von den WordPress-Wächtern Automattic gekauft wurde und weil es alle meine Kommentare auch bei mir im Blog lässt. Nach der Installation per Plugin werden die Kommentare mit dem Intensedebate-Server abgeglichen. Sollte der Dienst aber einmal nicht funktionieren, oder sollte ich mich dazu entscheiden, ihn nicht mehr zu nutzen, habe ich dennoch alle Kommentare in meinem Blog. Das war mir sehr wichtig. Zudem kommen natürlich die üblichen Komfortfunktionen wie Login via Intensedebate, WordPress.com, Twitter, Facebook und OpenID, sowie Kommentare in Baumansicht, Sortierungsoptionen, Benachrichtigungen und Kommentarbewertung.

Ich habe Intensedebate schon eine ganze Weile auf mobiFlip.de installiert und durfte miterleben, wie der Dienst in diverse Sprachen übersetzt wurde, so auch in Deutsch. Leider haben die Jungs einen Bug im Übersetzungssystem, welcher es nicht erlaubt hat, die oberste Überschrift (h3) des Kommentarbereichs mit zu übersetzen. Aus diesem Grund stand dort eine ganze Weile Comments (X). Ich stehe mit den Entwicklern in Kontakt und sie arbeitet eigentlich stetig an Intensedebate, leider besteht der Fehler nun schon eine ganze Weile. Für mich ein Grund mir die Anpassungsmöglichkeiten etwas genauer anzuschauen und auch gleich anzuwenden.

h3-Überschrift übersetzen

Das bereits erwähnte Problem mit der h3-Überschrift lässt sich leichter beheben als gedacht, leider bin ich etwas spät auf die Idee gekommen, da mir die Jungs von Intensedebate gesagt hatten, das wäre nicht möglich. Nativ ist es auch nicht möglich, da das Plugin via Javascript geladen wird und Ihr den Quellcode nicht direkt bearbeiten könnt, mit einem kleinen Trick lässt sich aber über die CSS-Anpassungen das Problem beheben.

Per CSS verstecken

Der Lösungsansatz ist einfach und effektiv. Da ich kein CSS-Profi bin, nehme ich gerne Optimierungstipps in den Kommetaren entgegen. Wer in die CSS-Dokumentation von Intensedebate schaut, wird nützliche Hinweise zur Anpassung des gesamten Kommentarbereichs finden. Uns reicht in diesem Fall eine kleine Änderung, welche wir einfach in die CSS-Datei unseres Blog-Themes kopieren.

#idc-container-parent #idc-container .idc-head h3 {display:none;}

Diese Anweisung bewirkt, dass die englische h3-Überschift von Intensedebate ausgeblendet wird, also komplett nicht mehr sichtbar ist.

Per PHP neu erzeugen

Die nächste Änderung nehmen wir in der single.php unseres Blog-Themes vor. Dort suchen wir die Stelle genau über dem:

<?php comments_template(); ?>

Und fügen über diesem folgendes ein:

<h3>Kommentare (<?php comments_number('0', '1', '%'); ?>)</h3>

Dies bewirkt, dass in der Artikelansicht “Kommentare (X) steht. Die Anzahl kann natürlich auch vorangestellt werden.

Das war es im Grunde genommen schon. In einzelnen Fällen kann es allerdings nötig sein, die h3-Überschrift zu formatieren. Da der Kommentarbereich meist in einem Div namens “comments” liegt, fügen wir also in unsere CSS-Datei folgendes hinzu:

#comments h3 {font-size:24px; font-weight:normal; margin-bottom: -20px;}

Dies ist die Anweisung für meinen Blog mobiFlip.de, dort habe ich die Schrift und den Abstand nach unten definiert. Mit diesen Werten könnt Ihr etwas experimentieren. Das kommt immer auf das bereits vorhandene CSS eures Blogs an.

Wenn Ihr genannte Änderungen durchgeführt habt, müsste jetzt über dem Intensedebate Kommentarbereich die deutsche Überschrift stehen, wie auch hier im Blog zu sehen.

Optimierung für Fallback

Als letzten Schritt müssen wir noch die h3-Überschrift in der Datei comments.php entfernen. Denn wenn Intensedebate mal nicht verfügbar ist, bzw. aus irgend einem Grund der Fallback zum normalen Kommentarsystem zu Stande kommt, hätten wir sonst zwei Überschriften über dem Kommentarbereich.

In der Regel müsst Ihr den Teil direkt nach folgendem Code entfernen:

<?php if ($comments) : ?> <div id="comments">

Dort müsste so oder so ähnlich folgendes stehen, was komplett gelöscht werden muss.

<h3>Kommentare (<?php comments_number('0', '1', '%'); ?>)</h3>

Fazit

Das war schon der ganze Zauber. Leichter als gedacht und für Perfektionisten wie mich ein Negativpunkt weniger. Ich probiere in nächster Zeit natürlich weiterhin das CSS von Intensedebate zu verändern. Sollte ich auf nützliche Dinge stoßen, dann schreibe ich wieder darüber. Für weitere Tipps, Kritik und Verbesserungen wäre ich dankbar.

9 Kommentare
  1. Christian Schrade

    Danke für den Tipp 😉 Das Problem hatte ich auch eine längere Zeit.

  2. Robert

    Hi Rene,

    Danke für das How To, aber ich sehe, Du hast auch die Loginmöglichkeiten vertikal anordnen lassen. Bei mir sind die alle untereinander und zerstören so ein wenig das übersichtliche layout.

    Wie kann man die butten F Connect / Twitter OpenID und Co in eine Reihen bekommen?

    Vielen Dank für Deine Hilfe,

    Robert

    1. René Hesse

      Hey, hast du denn einen Link zu deiner Seite? Das lässt sich sicher anpassen, ich habe dies aber nicht extra gemacht. ich glaube im Opera werden die immer so blöd angezeigt.

  3. tabletguys

    Danke für den Tipp. Eben im Blog umgesetzt.

  4. Eberhard Lauth

    Danke für die Tipps. Werde ich auch bei mir umsetzen.

  5. Sander

    Hi Rene!

    kannst du mir sagen, wie man bei WPtouch einstellt, dass die Kommentare ausgeblendet werden? Die Option dafür habe ich gefunden und bereits aktiviert, jedoch tut sich an intensedebate in der mobilen Version nichts. Kann man da was mithilfe CSS machen?? 🙂

    1. René

      Du meinst, wie man die Kommentare mobil komplett deaktiviert?

  6. Guest

    teste nur gerade die kommentarfunktion…

  7. Maxim Burgart

    nach der erfolgreichen Installation von disqus und der Aktivierung der Guest Form, bekomme ich immer diesen fehler : There was internal server error while processing your request. ich benutze die theme 2012. hat jmd vielleicht eine Lösung ?

Schreibe einen Kommentar    

Deine E-Mail-Adresse wird nicht veröffentlicht. Durch das Absenden eines Kommentars stimmst du der Speicherung deiner Angaben gemäß der Datenschutzerklärung zu.

Du bist hier: FLIP.de / Coding & Publishing / ...