QR-Codes erstellen – Kostenlos und Professionell

Tools 10. Feb. 2024
💡
Die hier vorgestellte Google Charts API wurde kürzlich eingestellt. Jetzt ist der Workflow nur noch über die Google-Diagrammtools möglich.

QR-Codes sind vielseitige zweidimensionale Barcodes, die eine breite Palette von Informationen speichern können, zum Beispiel URLs oder Kontaktdaten. Sie machen Informationen schnell zugänglich und können mit jedem handelsüblichen Smartphone gescannt werden. In unserer digitalisierten Welt sind QR-Codes allgegenwärtig, von Bezahlterminals, über Produktverpackungen bis zu Werbematerialien. Wie erstellt man also selbst QR-Codes in professioneller Qualität?

Die Google Charts API

Es gibt etliche Tools, die bei der Erstellung von QR-Codes helfen können. Mir selbst hat bis heute keins davon richtig zugesagt: Das UI ist unangenehm, das Tool kommuniziert mit unbekannten Servern, es funktioniert nicht zuverlässig, selbst einfachste Funktionalität ist mit erheblichen Kosten verbunden. Deshalb habe ich nach einfachen und effektiven Alternativen gesucht und mit der Google Charts API fündig geworden. Grundsätzlich ist das Generieren eines QR-Codes gar nicht so kompliziert, nur eine andere Art der Darstellung eines kurzen Texts oder Links. Für einfache Anwendungsfälle kann sowas lokal auf dem eigenen Computer passieren. Für Web- oder Cloud-basierte Systeme bietet sich die Google Charts API an, da sie von Google kostenfrei zur Verfügung gestellt wird, verlässlich erreichbar ist und der Konfigurationsaufwand minimal ist.

Projekte, die eine große Anzahl von QR-Codes erfordern, kann die automatische Erstellung mithilfe der Google Charts API eine enorme Zeitersparnis bedeuten. Ein Beispiel ist die Sammel-Erstellung von QR-Codes basierend auf einer CSV-Datei.

QR-Codes erstellen in der Praxis

Die Erstellung von QR-Codes mit der Google Charts API ist unkompliziert, aber es gibt ein paar grundlegende Informationen, Limits und Parameter, die man kennen sollte:

QR-Codes bestehen aus Quadraten mit einer festen Anzahl von Zeilen und Spalten, die als Versionen bezeichnet werden. Die Google Charts API wählt die Version basierend auf den bereitgestellten Daten automatisch aus. Je mehr Daten codiert werden sollen, desto komplexer der QR-Code. Deshalb ist es sinnvoll vor der Codierung zu überlegen, welche Geräte zum Lesen des Codes verwendet werden sollen: Die besten QR-Code-Lesegeräte können Version 40-Codes lesen, manche Mobilgeräte können nur bis Version 4 lesen. Um die Komplexität einer URL zu verringern, eignet sich der Privatsphäre-schützender URL-Kürzer maglit.me, der eine kurze URL erstellt, die auf deine längere URL verlinkt.

Es können bis zu 4.296 alphanumerische Zeichen bzw. 2000 Bytes als Inhalt in einem üblichen QR-Code hinterlegt werden. Der gewünschte Input wird per GET an die Google Charts API gesendet, als Output erhält man einen fertigen QR-Code in einer PNG-Datei.

Ein einfaches Beispiel: Die URL für einen hochaufgelösten QR-Code, der auf salesfuchs.com verlinkt, lautet https://chart.apis.google.com/chart?cht=qr&chs=500x500&chl=https://salesfuchs.com

Syntax und Parameter

  • Die Stamm-URL lautet: https://chart.apis.google.com/chart?
  • Zudem gibt es erforderliche und optionale Parameter, die jeweils mit einem & verbunden werden.

Erforderliche Parameter

  • cht=qr: Gibt an, dass ein QR-Code erstellt werden soll.
  • chs=<width>x<height>: Bestimmt die Größe des QR-Codes in Pixeln. Meistens werden quadratische Codes generiert, bedeutet Breite und Höhe sind identisch. Die Maximalauflösung beträgt 500x500; übliche Größen sind 150-500.
  • chl=<data>: Die zu codierenden Daten, die URL-codiert sein müssen. Zum Beispiel https://salesfuchs.com. Um einen Text sicher richtig zu codieren, setze deinen Text in ENCODEURL("DEIN TEXT") ein. Das macht vor allem Sinn, wenn du nicht ohnehin eine URL verwendest, sondern aus einem Text mit Sonderzeichen oder Leerzeichen eine URL generieren möchtest.

Optionale Parameter

  • chco=<color_hex_code>: Farbe des QR-Codes. Sollte eine andere Farbe als schwarz gewünscht sein, kann diese als Hexadezimal Code ohne das # angegeben werden. Dieser Farb-Parameter wird in der offiziellen Doku von Google nicht aufgeführt, ist aber problemlos möglich.
  • choe=<output_encoding>: Bestimmt die Codierung der Daten im QR-Code. Mögliche Codierungen sind UTF-8, Shift_JIS oder ISO-8859-1. Standardmäßig wird UTF-8 codiert. Diese Angabe ist nur nötig, wenn eine der anderen beiden Codierungen gewünscht ist.
  • chld=<error_correction_level>|<margin>: Definiert die Fehlerkorrektur-Ebene und den weißen Rand um den Code. Fehlerkorrekturebenen sind: L = bis zu 7% , M = bis zu 15%, Q = bis zu 25%, H = bis zu 30% Datenverlust kann wiederhergestellt werden. Margin gibt die Breite des weißen Rahmens um den Datenteil des Codes an. Die Angabe erfolgt in Zeilen, nicht in Pixeln. Der Standardwert ist 4.

Ein komplexeres Beispiel ist https://chart.apis.google.com/chart?cht=qr&chs=250x250&chco=ff0000&choe=iso-8859-1&chld=Q|1&chl=ENCODEURL("https://salesfuchs.com")

Salesforce QR-Code Formelfeld

Für meinen Anwendungsfall habe ich folgende Formel erstellt, die nicht nur einen, sondern zwei QR-Codes erstellt und diese unterschiedlich einfärbt, sodass sie einfach unterschieden werden können. Die QR-Codes sind zudem mit der URL verlinkt, auf die sie verweisen. So kann der QR-Code auch aus dem Salesforce-Datensatz ohne Mühe aufgerufen und kontrolliert werden.

In folgenden Beispiel wird ein roter QR-Code erzeugt, der auf das Salesforce-interne Produkt verweist, und für Lager-Mitarbeiter gedacht ist. Ein zweiter schwarzer QR verweist auf die öffentliche Webseite des Produktes, um Interessent mehr Kontext zu dem Produkt bieten zu können.

HYPERLINK("https://chart.googleapis.com/chart?cht=qr&chs=250x250&chco=BB0712&chl=" & LEFT($Api.Enterprise_Server_URL_510, FIND( '/services',$Api.Enterprise_Server_URL_510))+Id,
IMAGE("https://chart.googleapis.com/chart?cht=qr&chs=250x250&chco=BB0712&chl=" & LEFT($Api.Enterprise_Server_URL_510, FIND( '/services',$Api.Enterprise_Server_URL_510))+Id, " "))+
IF(ISBLANK( Website_Link__c ),"", HYPERLINK( Website_Link__c,
IMAGE("https://chart.googleapis.com/chart?cht=qr&chs=250x250&chl=" & Website_Link__c, " ")))

Tags

Julian Schiemann

IT-Berater und Facilitator. Mich begeistern funktionales & minimales Design, effiziente Workflows und weltbewegende Ideen.