5202

ein Blog über technische Fragen zu Blogger

Ein eigenes Template entsteht: Update #4

von

Mein Blogger Basis-Layout five hat ein bedeutendes Update bekommen - ich denke, damit ist es für den 'realen' Einsatz fit.

Five setzen ja inzwischen doch eine Handvoll Leute ein [nach meiner letzten Zählung fünf :D] und ich habe versucht, die Rückmeldungen beziehungsweise Problemen in five zu lösen.

Im einzelnen sind das: Benachrichtigungen in den G+ Kommentare funktionieren jetzt, Kommentare werden als E-Mail verschickt, dass rel='author'Attribut funktioniert, five setzt nun strukturierte Meta-Daten nach schema.org ein und ich habe einmal testweise soziale Buttons eingebaut.

Benachrichtigungen in den G+ Kommentare

Das schwierigste Problem vorneweg und zwar das Problem mit Benachrichtigungen in den G+ Kommentare, genauer gesagt, dass es bis jetzt keine solch Benachrichtigung gab :).

Damit G+ einen Blogger Kommentar aus dem G+ Kommentarsystem richtig zuordnen kann, braucht jeder Post eine BlogID, eine PostID und eine Author-Tag nach dem schema.org Meta-Daten Format. Fragt mich nicht, warum das so ist ...

Diese drei Meta-Informationen sehen in five so aus:

<div class='post' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
...
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:i.id' itemprop='postId'/>
<a expr:name='data:i.id'/>

Zusätzlich braucht ihr einen Author-Tag, um das name Attribut zu erklären:

<!-- post-author -->
<div class='post-author'>    
 <b:if cond='data:top.showAuthor'>
 <span>
 <data:top.authorLabel/>
 </span>
  <b:if cond='data:i.authorProfileUrl'>
  <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <meta expr:content='data:i.authorProfileUrl' itemprop='url'/>
  <a class='g-profile' expr:href='data:i.authorProfileUrl' rel='author' title='author profile'>
  <span itemprop='name'><data:i.author/></span>
  </a>
  </span>
  <b:else/>
  <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <span itemprop='name'><data:i.author/></span>
  </span>
  </b:if>
 </b:if>
</div> 
<!-- post-author end -->

Den Author-Tag könnt ihr innerhalb des Templates verschieben wie ihr lustig seit und zur Not auch ausblenden, nur vorhanden muss er sein.

Zusätzlich braucht ihr für G+ noch ein Script, dass Kommentare quasi 'pushed'. Ihr findet das Script in der includablen iframe-comments.

<b:includable id='iframe_comments' var='i'> 
 <b:if cond='data:i.allowIframeComments'>
  <script expr:src='data:i.iframeCommentSrc' type='text/javascript'/>
 <div class='cmt_iframe_holder' expr:data-href='data:i.canonicalUrl' expr:data-viewtype='data:i.viewType'/>
 </b:if>
</b:includable>

Letztlich läuft damit bei den G+ Kommentaren alles wie es soll - passt beim rumbauen im Layout nur auf, dass ihr keine dieser Elemente aus dem Blog entfernt. Ihr werdet ansonsten zwar G+ Kommentare haben, aber nicht die volle Funktionalität.

Strukturierte Meta Daten

Wo ich gerade dabei war, habe ich den wichtigsten Blog Elementen strukturierte Meta-Daten nach schema.org gegeben - das ist sowohl für Suchmaschinen wichtig, als auch für soziale Netzwerke wie G+ oder FB, wenn sie für ein Snippet beispielsweise das erste Bild im Blog finden sollen. Um auf G+ etwa das erste Bild von einen Post anzuzeigen, braucht ihr dieses Schema:

<b:if cond='data:post.firstImageUrl'>
 <meta expr:content='data:i.firstImageUrl' itemprop='image_url'/>
</b:if>

Soziale Buttons

Weil ich immer mal wieder dazu gefragt worden bin, habe ich mal probehalber soziale Buttons eingebaut. Das ist der G+ Button:

<span class='g-plusone' data-align='right' data-annotation='bubble' data-size='medium' data-width='300' expr:data-href='data:i.canonicalUrl'/>

Und das ist der Twitter Button + Script:

<a class='twitter-share-button' data-lang='de' data-size='medium' expr:data-url='data:i.canonicalUrl' href='https://twitter.com/share'>Twittern</a>
 <script>
 //<![CDATA[
 !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p '://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');//]]>
 </script>

Alles zusammen habe ich in konditionalen Tags gepackt, die diese Buttons _nicht_ auf der mobilen Ausgabe von eurem Blog und ansonsten nur auf der Index-Seite anzeigen:

<!-- social-buttons -->
<b:if cond='data:blog.isMobile'>
 <b:else/>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='social-buttons'>
   <span class='g-plusone' data-align='right' data-annotation='bubble' data-size='medium' data-width='300' expr:data-href='data:i.canonicalUrl'/>
   <a class='twitter-share-button' data-lang='de' data-size='medium' expr:data-url='data:i.canonicalUrl' href='https://twitter.com/share'>Twittern</a>
   <script>
   //<![CDATA[
   !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p '://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');//]]>
   </script>
   </div>
  </b:if> 
 </b:if>
</b:if>
<!-- social-buttons end-->

Der Grund dafür ist, dass diese sozialen Buttons für die mobile Ladezeit richtig gehend ein Tritt in die Tonne sind .. falls ihr die Buttons irgendwo anders haben wollt, dann versetzt sie einfach. Ich habe den entsprechenden Bereich auskommentiert.

Wo bekomme ich five?

Five könnt ihr auf Github runterladen. Probiert das unbedingt in einem Test-Blog aus, das ist ein Roh-Layout zum selber basteln.

Nur mal 'ne Frage: Zu was soll das eigentlich gut sein?

Ihr sparrt euch mit five rund 1500 Zeilen Code im Vergleich zum 'Simple' Layout - ihr könnt mit five Layouts bauen, von denen ihr in den 'normalen' Blogger Layouts nicht mal träumen könnt - letztlich macht five das personalisieren eines Layouts viel einfacher.