5202

ein Blog über technische Fragen zu Blogger

Cookies-Benachrichtigung bei Blogger anpassen/aussschalten

von

Seit gestern, 27. Juli 2015 findet ihr eine Nachricht in eurem Blogger-Dashboard, dass ihr ab 1.9.2015 eure EU-Besucher über die in eurem Blog verwendeten Cookies informieren müsst.

Dies soll dem 'Datenschutz' dienen, was ja bekanntlich nach Lesart deutscher Juristen lediglich eine formale Unterlassenspflicht ist - eure Daten werden selbstverständlich dadurch genauso wenig 'geschützt' wie vorher ... aber lassen wir das :D.

Damit ihr diese neuen rechtliche Bestimmungen einhalten könnt, hat Blogger ein Script in jeden Blogger Blog eingebaut, mit einem Hinweis über die verwendete Blogger- und Google-Cookies, einschließlich Cookies für Google Analytics und AdSense.

Dieses Script ist automatisch in eurem Blog vorhanden. Ihr müsst nichts weiter dazu tun. Vor allem braucht ihr keine Scripte von irgendwelchen Drittanbieter. Falls ihr solche Scripte bereites verwendet, empfehle ich diese auszubauen, schlichtweg weil eure Besucher ansonsten doppelt zustimmen müssten.

Darüber hinaus könnt ihr eure Cookies auch komplett deaktivieren, beziehungsweise den Hinweis personalisieren.

Retrieving labels from Blogger JSON feed

von

Ich wurde gefragt, wie man Post-Labels aus dem Blogger JSON Feed zieht. Das Problem dabei ist, dass ein Post mehr als ein Label haben kann, ihr folglich nicht ein einzelnes Objekt, sondern ein ganzes Array als Rückgabe habt.

Starten wir mit einer Liste von Post-Titel aus dem JSON Feed:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var posttitle = data.feed.entry[i].title.$t;
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Wie definieren nun ein leeres Array als Variable:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

In einer weiteren Schleife iterieren wir jeden Post durch alle Labels:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
      }
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Wir hängen nun jedes Label in das Array ein:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
        labels.push(data.feed.entry[i].category[j].term); // append the label to collection
      }
      htmlCode  = "<li><h3 class='posttitle'>"  + posttitle +  "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Letzter Schritt - wir lesen das Array aus und fügen es in die Liste ein:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
        labels.push(data.feed.entry[i].category[j].term);
      }
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3><h5 class='label'>" + labels.join(', ') +  "</h5></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Ich habe außerdem ein funktionierendes Beispiel auf CodePen gebaut.

See the Pen labels from Blogger json-feed by oliver (@5202) on CodePen.

Fehler, weiter Beispiele, Probleme - schreibt einfach einen Kommentar!

Blogger: Sitemap für statische Seiten

von

Seit einigen Monaten hat euch Blogger bekanntlich eine automatisch erstellte Sitemap spendiert. In der Standard robots.txt für jeden Blogger Blog ist diese Sitemap eingetragen

Diese Sitemap bezieht sich aber nun nur auf den Inhalt eurer Posts. Ich wurde vor einigen Monaten gefragt, ob man bei einem Blogger Blog auch statische Seiten mit einer Sitemap indexieren kann und damals war ich der Meinung, das geht nicht.

Wie ich nun erfahren habe, war das falsch. Blogger besitzt auch eine Sitemap für statische Seiten. In der allgemeinen Form schaut die so aus:

http://www.euerBlog.blogspot.com/sitemap-pages.xml

Falls ihr auf euren Blog statischen Seiten mit Inhalt habt, die ihr von Google indexieren wollt, könnt ihr also diese Sitemap mit in eurer robots.txt eintragen - wenn nicht, könnt ihr euch den Eintrag auch sparren.

Den Eintrag macht ihr im Blogger Dashboard unter Sucheinstellung > Crawler und Indexierung > Benutzerdefinierte robots.txt > Benutzerdefinierten robots.txt-Inhalt aktivieren?

Ihr kopiert den Inhalt euerer bestehenden robots.txt in das Feld und tragt als letzten Punkt neu ein:

Sitemap: http://www.euerBlog.blogspot.com/sitemap-pages.xml

Alternativ dazu könnt ihr auch die Sitemap bei bei Webmaster Tools anmelden.

Blogger & Material Design Lite Layout

von

Vor etwa einer Woche hat Google sein neues Framework Material Design Lite vorgestellt - mdl ist quasi die Implantation von Googles Material Design in CSS, HTML und Javascript für das Web.

Ich habe nun - just for fun - das Blog-Template von mdl in einem Blogger-Template zum laufen gebracht. Es ging mir dabei hauptsächlich darum, die verschiedenen Komponenten, wie etwa die 'cards', für die Startseite in Blogger Data-Layout-Tags darzustellen.

Das Template ist in Blogger voll lauffähig, ist aber kein fertiges, einsatzfähiges Layout. Ich habe es geschrieben, um grundsätzlich zu zeigen, wie ich mdl in Blogger umsetzen würde. Daraus kann wer will ein eigenes Template bauen, vielleicht hilft es je jemand weiter.

Ihr findet den Code für den Test-Blog auf Github. Falls jemand an etwas ähnlichem arbeitet, würde mich das sehr interessieren, meldet euch doch einfach in den Kommentaren. Fragen und Anregungen könnt ihr hier oder in den Issues auf Github loswerden.

Gadgets nur auf bestimmten Seiten anzeigen

von

In Blogger könnt ihr jedes Gadget entweder auf allen Seiten, oder nur auf einer bestimmten Seiten, wie etwa einer spezifischen statischen Seite, anzeigen lassen. Das geht einfach mit CSS, oder etwas komplexer dafür besser mit Blogger Layout Daten-Tags.

Die Version mit Daten-Layout-Tags ist deswegen besser, weil das Gadget damit wirklich nur auf der spezifischen Seite und nicht global auf jeder Seite geladen wird. Das verringert den Overhead und kommt der Ladezeit zu gute.

Ich beschreibe beide Techniken am Beispiels des Kontaktformular-Widgets. Manchmal möchten Blogbetreiber ja eine Kontaktseite mit eigenem Kontaktformular haben und nehmen dazu eine externe Lösung, weil sie nicht wissen, dass bei Blogger das Kontaktformular auch auf einer statischen Seite funktioniert.