Disqus-Kommentare bei Jekyll erst nach einem Klick laden

Wenn du einen Blog mithilfe von Jekyll erstellst, dann hast du meistens einen Wunsch. Und zwar, dass dein Blog sehr schlank und schnell wird.

Außerdem möchtest du natürlich mit deinen Leser kommunizieren. Dafür eignet sich die Kommentar-Funktion besonders gut. Für die meisten Leute ist es ganz normal, dass unter jedem Blog-Artikel sich ein Kommentarfeld befindet.

Leider bietet Jekyll kein Kommentar-System. Aber ein Blog ohne Kommentare ist eben doof. :D

Ganz auf Kommentare musst du dennoch nicht verzichten, denn es gibt Fremdanbieter wie Disqus, die sich auf Kommentar-Funktion spezialisiert haben.

Hier habe ich schon geschrieben, wie du Disqus ganz einfach in ein Jekyll-Blog einfügen kannst. Doch bei dort geschriebenen Anleitung wird Disqus beim Öffnen einer Seite immer gleich sofort angezeigt. Dadurch wird dein Blog nicht mehr so schlank und wird natürlich deutlich langsamer geladen.

Ich z. B. möchte, dass mein Jekyll-Blog so schlank wie möglich bleibt. Aber auf eine Kommentar-Funktion will ich auch nicht verzichten.

Dafür gibt es auch eine ganz einfache Lösung. Und zwar kannst du die Disqus-Kommentare mit einem Klick laden.

Folegende Schritte musst du machen

• Registriere dich bei Disqus, wenn nicht bereits getan.

Disqus social icon

• Kopiere den folgenden Code und füge ihn in die Datei _layouts/post.html an einen von dir gewünschten stelle ein.

<div id="disqus_thread"></div>
    <script>
      function load_disqus() {
        var disqus_shortname = 'DISQUS-SHORTNAME';
        var disqus_identifier = "{{ page.url }}";
          (function () {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
      }
    </script>
    <style>button{width:100%;transition:all 0.15s;padding:10px;margin:30px 0 0;background:#fff;border:1px solid #ddd;color:#808080;cursor:pointer}button:hover{background:#ddd;border:1px solid #ddd;color:#fff}</style>
    <br>
    <div id="disqus_thread"></div>
    <button onclick="load_disqus();this.style.visibility='hidden';">Kommentare laden</button>

• Ändere in dem Code den Text DISQUS-SHORTNAME gegen deine Disqus-Shortnamen. Den hast du bei der Registrierung bekommen.

Nachdem du deine Seite neu generiert hast, erhältst du in den Artikeln einen Button Kommentare laden. Mit einem Klick auf diesen Button werden die Kommentare geladen.

Die Idee und den Code für die Funktion habe ich von FastWP genommen. Dort ist zwar das ganze für Wordpress umgesetzt. Funktioniert aber für Jekyll genauso gut :)

Disqus social icon