QR-Code in Octopress-Sidebar für jede Seite bzw. jeden Post automatisch generieren

Vor ein paar Tagen bin ich über eine Google code-API gestoßen, welche über einfache URL GET oder POST-Anfragen oder url-encoded - Links QR-Codes für mobile-tagging erstellt. Diese kann man wunderbar dazu nutzen, automatisch genrierte QR-Codes für jeden Beitrag oder jede Seite in Octopress bzw. Jekyll einzubinden.

Nachfolgend kommt die kurze Anleitung, anschließend möchte ich aber noch die Hintergrundinformationen empfehlen, da sie an ein bis zwei Stellen wichtig sind.

Anleitung Integration in die Octopress-Sidebar

Zunächst erstellt man im Ordner octopress/source/include/custom/asides eine Datei qrcode.html mit folgendem Inhalt:

1
2
3
4
5
6
7
8
9

<section>
<h1>QR-Code<abbr title="The word 'QR Code' is a registered trademark 
of DENSO WAVE INCORPORATED. It applies only for the word 'QR Code', 
not for image.">&trade;</abbr></h1>
<a href="{{ site.url }}{{ page.url }}"><img
src="http://chart.apis.google.com/chart?chs=100x100&cht
=qr&chld=|0&chl={{ site.url }}{{ page.url }}" alt="post-qrcode">
</a>
</section>

Dann muss man in der _config.yml noch diese Datei in die Sidebar an der gewünschten Stelle einbinden bzw. aufrufen:

1
2
3
4
5

default_asides: [ custom/asides/facebook_no.html ]
# Oder falls nicht überall erwünscht, untenstehend nach Bedarf eintragen:
# blog_index_asides: 
# post_asides:
# page_asides:

Update: Für farbige QR-Codes siehe unten.

Hinweis: Dies sollte so funktionieren, falls in der _config.yml folgende Permalink-Struktur eingestellt ist:

permalink: /:title/  

Ansonsten muss ggf. der dynamische Aufruf der URL über site.url und page.url angepasst werden, dies habe ich nicht ausprobiert.

Hintergrundinformationen, wichtig für Anpassungen

Falls Sie sich über den abbr-Tag wundern, diesen haben ich ‘missbraucht’, um die Patentrechte der Firma Denso Wave Incorporated zu würdigen. Diese hat die Rechte an dem Wort ‘QR-Code’. Die Bilder sind jedoch frei verwendbar, siehe auch in deren QR Code Patent FAQ.

Desweiteren nutzen wir in diesem Code wie schon angedeutet eine Google code-API mittels url-encoded - Link.
Dies könnte z.B. für die URL http://home-server-mind.com folgendermaßen aussehen:

src="http://chart.apis.google.com/chart?chs=
100x100&cht=qr&chld=|0&chl=http://home-server-mind.com"  

Dabei kann man die Größe, hier 100x100 Pixel, bei Bedarf ändern. Höhe und Breite müssen gleich sein. Hier ist der genaue Syntax erklärt.

Um jeweils den betreffenden QR-Code für die aktuelle Seite bzw. den angezeigten Beitrag bereitzustellen, habe ich statt einer statischen URL die Jekyll-Variablen site.url und page.url benutzt.
Seltsamerweise ist das Octopress-Framework ein bisschen buggy, sodass bei mir page.url für Seiten auch für post.url bei Posts funktioniert sowie site.url aber nicht root_url. Ggf. müsst ihr bei anderer Permalink-Struktur als permalink: /:title/ auch root_url,base_url, etc. ausprobieren.
Falls es da ggf. Probleme und/oder Lösungen gibt, hinterlasst bitte einen Kommentar.
Demo: Siehe Seitenleiste rechts.

UPDATE: QR-Code farbig gestalten:

Auf eine Nachfrage hin möchte ich hier noch kurz erläutern, wie man den QR-Code farbig erstellt (Standard ist schwarz auf weiss): Man füge im img-src-Tag der Datei qrcode.html:

1
2

img src="http://chart.apis.google.com/chart?chs=100x100&cht
=qr&chld=|0&chl=...

noch Folgendes ein: &chco=farbe_in_hexadezimal, also z.B. für die Farben:

• blau: &chco=0000FF
• rot: &chco=FF0000
• grün: &chco=00FF00 usw.

Für blau sieht der img src-Tag so aus:

1
2

img src="http://chart.apis.google.com/chart?chs=100x100&cht=qr&chld=|0
&chco=0000FF&chl=...

English-version

Ich freue mich auf Feedback.

Update nach folgendem Tweet:

Nach einen Hinweis von @dsiw gibt es auch noch eine googlefreie Variante der Api bei qserver.com Doku. Dafür ändert man den Inhalt obiger qrcode.html z.B. so:

1
2
3

<section>
<h1>QR-Code<abbr title="The word 'QR Code' is a registered trademark of DENSO WAVE INCORPORATED. It applies only for the word 'QR Code', not for image.">&trade;</abbr></h1>
<a href="{{ site.url }}{{ page.url }}"><img src="http://api.qrserver.com/v1/create-qr-code/?size=150x150&color=165B94&format=png&qzone=1&bgcolor=F9F9F8&data={{ site.url }}{{ page.url }}" title="Scanne den Code mit Deinem Smartphone, um die Seite direkt aufzurufen."></a></section>