Kostenlos testen
Menü

Produktbox in Ghost einbinden: Script, Platzhalter und Theme-Baustein erklärt

Produktbox in Ghost einbinden: Script-Tag, Platzhalter und Shortcodes im Text erklärt, dazu das optionale Theme-Partial für Theme-Entwickler.

affilinode · · 4 Min. Lesezeit

Eine Produktbox in Ghost einzubinden ist einfacher, als es klingt. Du brauchst zwei Dinge: ein Script-Tag, das einmal pro Blog geladen wird, und einen Platzhalter an der Stelle, an der die Box erscheinen soll. Den Platzhalter setzt du entweder als HTML-Element oder als Shortcode direkt in den Text. Dieser Beitrag zeigt beide Wege, die Attribute, mit denen du die Darstellung steuerst, und den optionalen Theme-Baustein für Entwickler, die ein eigenes Ghost-Theme pflegen.

Schritt 1: Das Script-Tag in Ghost einfügen

Das Script-Tag brauchst du nur einmal. Den fertigen Code erzeugst du im Dashboard: Unter „Websites“ die Website öffnen, im Bereich „Einbettung“ den Schlüssel anlegen und im Generator den Reiter „Ghost & Foren“ wählen. Dort kopierst du das Script-Tag. Es hat diese Form, wobei pk_live_… für deinen eigenen Schlüssel steht:

<script src="…/embed.js" data-key="pk_live_…" async></script>

Füge das Tag in die Code Injection deines Ghost-Blogs ein. Du kannst den Schlüssel auch über den Assistenten unter Integrationen → Ghost anlegen lassen. Er zeigt eine Live-Vorschau im Ghost-Stil und prüft nach dem Einbau, ob dein Blog das Script lädt.

Der Schlüssel steht im Quelltext deiner Seite, kann aber nur lesen und wirkt nur auf den Domains, die du beim Schlüssel freigegeben hast.

Schritt 2: Den Platzhalter setzen

Ein Platzhalter ist ein kleines HTML-Element mit einem data-affilinode-Attribut. Das Script ersetzt ihn beim Laden durch die Box. Eine Produktbox sieht so aus:

<div data-affilinode="product" data-id="asin:B0XXXXXXXX"></div>

Die Art der Box steuerst du über den Wert von data-affilinode. Neben product gibt es compare für Vergleichstabellen mit data-ids, list für Bestenlisten mit data-list oder data-view, picker für einen Vergleichswähler, den Leser selbst zusammenstellen, und deals für Produkte mit gesunkenem Bestpreis. Mit data-title setzt du eine eigene Überschrift, mit data-limit begrenzt du die Anzahl.

Den HTML-Platzhalter setzt du in Ghost in eine HTML-Karte („HTML card“) im Ghost-Editor. Wenn du lieber im Fließtext arbeitest, nimmst du den Shortcode.

Schritt 3: Shortcodes im Text verwenden

Für Editoren ohne HTML-Baustein gibt es Shortcodes, die du direkt in den Text schreibst. Sie werden zur Box, sobald das Script mit data-shortcodes="1" aktiviert ist:

[affilinode_product id="…"]

Auch hier gilt: Die Attribute heißen wie im WordPress-Plugin. Für Produkte, Listen und Vergleiche sind Shortcodes verfügbar, dazu Packungsgrößen mit [affilinode_packs id=…], Gutscheine mit [affilinode_coupons] und der Vergleich „A vs B“ mit [affilinode_versus ids=a,b]. Mit [affilinode_link] und [affilinode_field] setzt du Textlinks und einzelne Werte in den Fließtext.

Schritt 4: Darstellung anpassen

Am Script-Tag stellst du das Aussehen für alle Boxen auf der Seite ein:

  • data-theme="light", "dark" oder "auto" für das Farbschema,
  • data-accent für die Akzentfarbe,
  • data-cta-color für die Farbe des Kaufen-Knopfs,
  • data-locale für die Sprache. Ohne Angabe übernimmt das Script die Sprache von <html lang>.
  • data-country für das Land der Angebote.

Auf einzelnen Boxen gelten eigene Angaben. Mit data-variants="0" schaltest du zum Beispiel den Varianten-Wähler für Modellprodukte ab.

Optional: der Theme-Baustein für Ghost-Entwickler

Wer ein eigenes Ghost-Theme pflegt, kann die Einbindung als Partial ins Theme legen: partials/affilinode.hbs. Die Einstellungen dafür stellst du im Ghost-Customizer ein. Der Baustein ist optional. Für den normalen Blog reichen Script-Tag und Platzhalter oder Shortcodes aus.

So prüfst du, ob die Box erscheint

Wenn keine Box erscheint, liegt es meist an einem von drei Punkten. Erstens: Das Script-Tag fehlt in der Code Injection oder ist beim Einfügen beschädigt. Zweitens: Die Domain ist nicht freigegeben. Ruft eine nicht freigegebene Domain die Boxen ab, bleiben sie leer, und sie erscheinen unter „Abgewiesene Domains“ beim Schlüssel. Drittens: Der Platzhalter hat keine gültige ID. Teste deshalb nach jeder Änderung eine Seite mit einer Box.

Die Live-Vorschau im Dashboard funktioniert auch, bevor deine Domain eingetragen ist. Aufrufe und Klicks aus der Vorschau zählen nicht zum Kontingent und nicht in die Statistik.

Für Ghost gibt es zusätzlich den Assistenten unter Integrationen → Ghost. Er prüft nach dem Einbau der Code Injection, ob dein Blog das Script lädt, und zeigt dir damit den ersten Schritt, bevor du einen Beitrag veröffentlichst. Danach setzt du deine Platzhalter und Shortcodes in den Beiträgen und siehst sie in der Vorschau, bevor du sie live schaltest.

Häufige Fragen

Brauche ich das Script-Tag auf jeder Seite? Nein. Das Tag braucht die Seite nur einmal. Weitere Boxen sind nur weitere Platzhalter oder Shortcodes.

Kann ich Boxen auch ohne Platzhalter automatisch erzeugen lassen? Ja. Mit data-links werden unterstützte Produktlinks im Beitrag automatisch zu Boxen. Mehr dazu steht im Beitrag Affiliate-Links in Ghost und in der Anleitung für Ghost.

Wie viele Boxen darf ein Beitrag haben? Für die automatische Verlinkung begrenzt du die Anzahl mit data-links-max. Jede Box, die du von Hand setzt, fügst du selbst ein.

Passt sich die Box an den Stil meines Blogs an? Du stellst Farbschema, Akzentfarbe und Kaufen-Knopf am Script-Tag ein. Die Live-Vorschau im Assistenten zeigt dir das Ergebnis, bevor du den Code einfügst.

14 Tage kostenlos testen

Teste Produktboxen in deinem Ghost-Blog in Ruhe. Du kannst 14 Tage kostenlos testen, bevor du dich für einen Tarif entscheidest. Die Übersicht über alle Tarife findest du unter /preise.