Blog anpassen - ein paar Tipps für Blogger. Teil 5

Shortly

In diesem vorerst letzten Beitrag zum Thema "Blogger anpassen", zeige ich wie man die Disqus Kommentare auf Klick laden kann, dynamisch die Breite von Elementen ändert und wo man kleine aber feine Einstellungen in Blogger findet, die man leicht übersehen kann.

Disqus on demand (auf Klick laden)

Disqus lädt seit einiger Zeit schon asynchron, das bedeutet, dass das Laden der Webseite durch das Laden von den Disqus Kommentaren nicht beeinträchtigt wird. Somit wirkt sich Disqus nicht auf die Ladezeit der Webseite an sich aus, aber werden viele Kommentare geladen, verursacht das natürlich viele Daten die zusätzlich geladen werden. Wie schon in den "Blogger anpassen Teilen" zuvor erwähnt, ist dies gerade für die mobile Nutzer unter Umständen ärgerlich. Deshalb ist es natürlich von Vorteil, wenn man die Kommentare auf Wunsch des Nutzers nachlädt - also on demand.

Schwierigkeiten mit Beispiel-Code aus dem Netz

Im Netz finden sich viele Beispiel-Codes die mit Javascript oder JQuery die Kommentare auf Klick auf einen Button nachladen. Die Codes sind eigentlich alle gleich, jedoch hatte ich mit diesen Schwierigkeiten, meine Kommentare zu laden. Einer der Gründe liegt in den Blogger Domain-Umleitungen auf nationale Adressen.

Blogger Domain-Umleitung

Jeder der sich auf Blogger einen Blog anlegt, kann sich eine verfügbare Adresse aussuchen, wobei standardmäßig die Adresse auf ".blogspot.com" endet. Surft man den Blog aber von einem anderen Land als den USA (.com) an, so wird die Blog-Adresse auf die nationale Top-Level Domain geändert. Da ich aus Österreich komme, wird wenn ich in die Adressleiste "any-thing-else.blogspot.com" eingebe, ein "any-thing-else.blogspot.co.at" angesurft.

Canonical URL

Die Hauptadresse "blogspot.com" wird in Blogger mit "Canonical Homepage URL" ausgewiesen. Blogger hat die Umleitung aus urheberrechtlichen Gründen eingeführt, da nicht für jedes Land alle Rechte gleich sind und anders gehandhabt oder Inhalte ausgeblendet werden müssen.

Damit Disqus weiß, welcher Kommentar-Thread geladen werden muss, verwendet Disqus immer die "blogspot.com" Adresse.  Somit verweist Disqus immer auf die ursprüngliche Adresse des Blogs.

Domain-Umleitung und Beispiel-Codes

Disqus unterteilt die Kommentare in Threads. Ein Thread entspricht auf Blogger einem Blog-Eintrag. Die Identifizierung des Threads erfolgt über die Canonical URL. Das Problem mit den Beispiel-Codes aus dem Internet besteht darin, dass aufgrund einer Domain-Umleitung nicht der korrekte Kommentar-Thread geladen werden kann.

Ein weiteres Problem, dass ich entdeckt habe ist, dass immer die "embed.js" von Disqus geladen wird. Das führt zu seltsamen Konstellationen. So werden zwar Kommentare vor der Umstellung richtig geladen, aber nicht die, die man mit der on demand Funktion hinzugefügt hat oder umgekehrt.

Lösung liegt im original Code von Disqus

Während ich über den Beispiel-Codes gegrübelt und versucht habe eine Lösung zu finden, habe ich auch den original Code von der Disqus-Homepage untersucht. Der Code ist zwar alles andere als leserlich, da hier die Anführungszeichen durch die Unicode-Schreibweise ersetzt sind (macht Blogger automatisch, wenn man den Code abspeichert). Aber dort finden sich die entscheidenden Hinweise. Als erstes darf man nicht "embed.js" verwenden, sondern "blogger_item.js". Offensichtilch hat Disqus für Blogger ein eigenes Javascript. Weiters muss man vor dem Script bestimmte Variablen verwenden, dann funktioniert es auch mit dem Laden der richtigen Kommentaren.

Anzahl der Kommentare anzeigen

Angenommen ein Leser hat den Post durchgelesen und sieht nun ein Feld "Kommentare laden" und klickt darauf. Ein Lade-Zeichen kommt, aber es sind keine Kommentare vorhanden. Wie oft klickt jemand dann noch auf die Kommentare-Laden-Funktion, wenn nichts geladen wird? Die Anzahl der bereits getätigten Kommentare kann man auch mit einem eigenen Code anzeigen lassen.

Nachteil

Der einzige Nachteil an der on demand Geschichte ist, dass die Kommentare nicht bei Google mit der Webseite indexiert werden. Wobei auch bei normalen Kommentaren es nicht ganz 100 Prozent sicher ist, dass sie indexiert werden. Die Vorraussetzung wären laut Disqus gegeben, aber anscheinend muss man die Kommentare auf den Server ins eigene System laden, damit es funktioniert. Aber eine klare Antwort bzw. wie man es macht, habe ich nicht gefunden.
Man bekommt, wenn man weitere Kommentare der Konversation verfolgen möchte, ein E-Mail von Disqus. Klickt man dort auf "Auf Webseite ansehen", so wird die Webseite zwar geöffnet, aber der Kommentar kann nicht angezeigt werden, da er erst auf Klick geladen wird.

Code

Hat man Disqus schon auf dem eigenen Blog, so muss man im Dashboard in der Rubrik "Vorlage" unter "HTML bearbeiten" das Disqus Gadget suchen (einfach mit "STRG + F" das Suchfenster öffnen und Disqus eingeben). Dort markiert man den Code ab "<b:includable id='main'>" bis inklusive "</b:includable>" und ersetzt ihn durch folgenden:

 <b:includable id='main'>  
   <b:if cond='data:blog.pageType != &quot;index&quot;'>  
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>  
    <script type='text/javascript'>  
    //EDIT CODE HERE   
      var disqus_shortname = &#39;YOUR_DISQUS_SHORTNAME&#39;;  
    // END EDIT CODE  
      var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;  
      var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;  
      var post_url = window.location.pathname;  
      post_url = post_url.substring(1);  
      var disqus_blogger_current_url = disqus_blogger_canonical_homepage_url + post_url;  
      var url = disqus_blogger_current_url;  
      //<![CDATA[  
      $('.post-footer').after('<div id="disqus_thread" class="disqus-comment-count" data-disqus-url="' + url + '">0 Kommentare</div><hr class="commentsLine"/><div class="show-comments" style="cursor:pointer;">Für Kommentare ist Javascript erforderlich. Bitte vergewissere Dich, dass du es nicht deaktiviert hast.</div><hr class="commentsLine" id="lastHr"/>');  
       //]]>  
      $j=jQuery.noConflict();  
      $j(document).ready(function() {  
       $j('.show-comments').html("Kommentare anzeigen");     
       $j('.show-comments').on('click', function(){  
         var disqus_url = disqus_blogger_current_url;  
         var disqus_identifier = disqus_url;  
         $j.ajax({  
          type: "GET",  
          url: "http://" + disqus_shortname + ".disqus.com/blogger_item.js",  
          dataType: "script",  
          cache: true  
         });  
         $j(this).fadeOut();  
         $j('.commentsLine').hide();  
       });  
      });  
      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */  
      /* * * DON'T EDIT BELOW THIS LINE * * */  
      (function () {  
       var s = document.createElement('script'); s.async = true;  
       s.type = 'text/javascript';  
       s.src = '//' + disqus_shortname + '.disqus.com/count.js';  
       console.log(s);  
       (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);  
      }());  
    </script>   
   </b:if>  
 </b:includable>  

Solltet ihr schon JQuery in eurem Blog verwenden, so könnt ihr diese Zeile (ist die dritte im Code) löschen

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Weiter müsst ihr noch "YOUR_DISQUS_SHORTNAME" durch euren bei Disqus festgelegten Namen ersetzen, damit es funktioniert.
Habt ihr noch kein Disqus, so einfach auf die Homepage surfen und auf  "Add Disqus to Your Site" klicken. Die 3 Schritte befolgen und den Code wie oben beschrieben ersetzen.
Danach könnt ihr noch im Dashboard in der Rubrik "Vorlage" unter "Anpassen" eigenen CSS Code hinzufügen. Hier ist mein CSS-Code:

.commentsLine {
  border-top: 1px solid;
  background-color: #8c1a1c;
  border-color: #8c1a1c;
  padding-top: 1.15px;
}

.disqus-comment-count {
  text-align: center;
  color: #8c1a1c;
  margin-top: 30px;
}

#lastHr.commentsLine {
  margin-top: 10px;
}

.show-comments {
  cursor: pointer;
  text-align: center;
  color: #8c1a1c;
} 

.show-comments:hover{
  font-weight: bold;
}

Dynamische Element-Breite

In einem früheren Beitrag habe ich ja gezeigt, wie man die Breite des Translate-Elements im CSS ändern kann. Ändert man jetzt die Anzahl der darüberliegenden Seiten-Links, so passt die Breite nicht mehr. Natürlich kann man dies im CSS anpassen, aber auch wenn jemand eine andere Sprache auswählt und die Seite übersetzt wird, stimmt die Breite nicht immer zusammen.
Man kann sich auch mit einem Javascript behelfen. Ist die HTML-Seite aufgebaut, so kann man über die einzelnen Elemente mittels Schleife die Gesamt-Breite berechnen und diese dann setzen. Um auch bei Übersetzungen die Berechnung erneut durchzuführen braucht man einen so genannten Observer. Dieser Observer beobachtet das Element und reagiert auf die Veränderung und ruft eine Methode auf, in der man die Gesamt-Breite ermittelt und setzt. Das klingt alles komplizierter als es ist. Der Code dazu sieht wie folgt aus:

 <script type='text/javascript'>  
 //<![CDATA[  
  $(document).ready(function() {  
   callback = function(){  
         var width = 0;  
         var jul = $('#PageList1 > div.widget-content > ul');  
         var lis = $(jul).children('li');          
         $(lis).each(function( index ) {  
             var w = $(this).width();  
             width = width + w;  
     });  
         $('#google_translate_element').css({"width":width-1.5});  
   };  
     callback();      
     var observer = new MutationObserver(callback);  
     var config = {  
         childList: true,  
         attributes: true,  
         characterData: true,  
         subtree: true  
     };  
     observer.observe($('#PageList1 > div.widget-content > ul')[0], config);  
  });  
 //]]>  
 </script>  

Erklärung zum Code

Es wird für diesen Code wieder JQery verwendet. Solltet ihr es noch nicht verwenden, so folgende Zeile einfach vor dem Code hinzufügen

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Damit man das jeweilige Element selektieren kann, habe ich hier den Child-Selektor ">" von JQuery verwendet. Man könnte jeweils immer ein Element nach unten gehen und eine eigene Variable anlegen, jedoch ist dies einfach schneller beim Code-Schreiben.
Für euren Code müsst ihr natürlich die ID anpassen, damit ihr das richtige Element selektiert. Im Browser einfach F12 drücken und mit dem Mauszeigersymbol das Element anklicken und die ID auslesen. In meinem Fall war die ID "PageList1". Dieses Elternelement, hat noch ein <div> Element mit der Klasse widget-content, welches wiederum die gesuchte "unordered list" <ul> enthält. Die kompakte Selektierung dieser unordered list sieht dann so aus

$('#PageList1 > div.widget-content > ul');

Von dieser <ul> holt man sich dann noch die einzelnen Listelemente mit dem Tag <li>. Hier holt man sich extra die Listelemente in eine Variable, da man später den Observer auf das <ul> Element mit allen Kindelemente setzt.
Die Selektierung und Berechnung habe ich in einer eigenen "function" verpackt, die später auch für den Observer verwendet werden kann. Diese "function" wird vom Observer aufgerufen, wenn er eine Änderung bemerkt. Am besten man setzt den Observer auf das Elternelement <ul>.

Nützliche Einstellungen

Jump Break

Damit ein langer Post auf der Startseite nicht den ganzen Platz einnimmt, kann man eine so genanntes Jump Break einfügen. Dieses findet man in der Post-Bearbeitungs-Ansicht. Man stellt sich an eine gewünschte Stelle im Text und klickt auf dieses Symbol. Dort wird dann der Jump Break eingefügt und wird durch eine strichlierte Linie mit grauem Schatten gekennzeichnet.

Jump Break

Im Dashboard in den Einstellungen unter "Sonstiges" kann man auch aussuchen, wie der RSS-Feed dargestellt werden soll. Wählt man hier Absatz aus, so wird auch der RSS-Feed nur bis zu diesem Jump Break erstellt.

404 - Seite nicht gefunden

In seltenen Fällen, kann es passieren, das eine Seite vom Blog nicht geladen werden kann. Dies kann passieren, wenn ein Leser direkt den Blog- und Seitennamen eingibt und sich vertippt. In den Einstellung im Dashboard findet man unter den Sucheinstellungen die Kategorie "Fehler und Weiterleitungen". Dort kann man einen eigenen Text für die Fehlerseite eingeben. Man kann neben normalen Text auch HTML-Code eingeben und so auch einen eigenen CSS-Stil vergeben, um die Seite aufzuhübschen.
Einfach mal ausprobieren in dem man beim eigenen Blog einfach mal eine Seite aufruft die es nicht gibt. Bei mir wäre dies zum Beispiel diese hier.

Permalink

Der Permalink ist jener Link mit dem man den Blogeintrag findet. In Blogger gibt es die Möglichkeit dem Beitrag einen eigenen Permalink zu geben. Das ist vorteilhaft, da ansonsten Blogger den Permalink aus Teilen des Titels des Blogeintrages und willkürlichen Nummern erstellt. Das mag vielleicht nicht stören, aber gerade wenn es um die Disqus-Thread Verwaltung geht, sind einprägsamere Namen vorteilhaft.
Den Permalink kann man in der Bearbeitungs-Ansicht zu einem Beitrag rechts in den Post-Einstellungen finden.

Permalink ändern

Beschreibung für Suchmaschinen

Neben dem Permalink in den Post-Einstellungen findet man auch die Beschreibung für Suchmaschinen. Diese Beschreibung wird dann unter dem Titel in der Suchmaschine angezeigt. Man sollte sich jedoch auf 150 Zeichen beschränken, da dies die maximale Zeichenanzahl bei Google für diese Beschreibung ist. Andere Suchmaschinen bieten eine höhere maximale Zeichenanzahl. Wird allerdings Google verwendet, so ist es doch nervig, wenn mitten im Satz oder sogar im Wort abgebrochen wird.

Anything Else...?

Das war der vorerst letzte Beitrag zum Thema "Blogger anpassen". Sollte ich noch interessante Änderungen finden, so werde ich sie sammeln und in einen eigenen Beitrag wieder mit euch teilen.