Amazon-Button „Send to Kindle“ manuell einbauen

Amazon bietet seit letzter Woche ein WordPress-Plugin an mit dem man sich vor oder nach dem Artikeltext einen Button einblenden lassen kann, der den Inhalt des Blogbeitrags an Amazons eBook-Reader Kindle schickt (via WLAN oder Whispernet).

Wem, so wie mir, die Einbindung in Bezug auf die Positionierung auf dem Blog nicht flexibel genug ist, der hat auch die Möglichkeit den Button händisch einzupflegen. Das ist dank des Button-Konfigurators von Amazon kinderleicht. Nach wenigen Eingaben spuckt er den fertigen Code zum Einbinden in die Webseite aus.

Der von Amazon generierte Code

Einmal ein bisschen Javascript (wird vor dem schließenden </body>-Tag eingefügt):

<script type="text/javascript" src="https://d1xnn692s7u6t6.cloudfront.net/widget.js"></script>
<script type="text/javascript">(function k(){window.$SendToKindle&&window.$SendToKindle.Widget?$SendToKindle.Widget.init({"content":".post-content","exclude":".relatedposts,.content-ad,#greet_block","title":".entry-title","published":".entry-date"}):setTimeout(k,500);})();</script>

In dem Script steht beispielsweise drin, welche CSS-Klassen oder CSS-IDs die verschiedenen Metainformationen (Titel, Datum, Autor) und den eigentlich Inhalt identifizieren. Darüber hinaus lassen sich bestimmte Elemente, die im Artikel stehen vom Export für den Kindle ausschließen (bei mir ist das zum Beispiel der block mit den ähnlichen Artikeln oder teilweise Werbeanzeigen).

Alternativ ist es auch möglich Open Graph, schema.org, oder hNews zum Identifizieren der Inhalte zu verwenden.

Daher empfehle ich jedem, den Generator von Amazon zu benutzen um den Javascriptcode zu erstellen. Das ist bequem und geht schnell-

Der andere Teil, den der Generator ausspuckt habe ich nochmal angepasst. Das hier liefert Amazon:

<div class="kindleWidget" style="display:inline-block;padding:3px;cursor:pointer;font-size:11px;font-family:Tahoma;border-radius:3px;border:#ccc thin solid;color:black;background:transparent url('https://d1xnn692s7u6t6.cloudfront.net/button-gradient.png') repeat-x;background-size:contain;">
  <img style="vertical-align:middle;" src="https://d1xnn692s7u6t6.cloudfront.net/white-15.png" />
  <span style="vertical-align:middle;margin-left:3px;">Send to Kindle</span>
</div>

Das <DIV>-Element mit der Klasse „kindleWidget“ lässt sich nun völlig frei im Template positionieren oder seine Einbindung an beliebige Faktoren knüpfen.

Und so sieht der fertige Button aus: send2kindle

Meine Anpassungen und die Übersetzung

Laut der Terms & Conditions bzgl. der Einbindung und Nutzung des Buttons sind Anpassungen scheinbar kein Problem und da ich ausschließlich auf Deutsch blogge, habe ich den Button ins Deutsche übersetzt und der Einfachheit halber eine PNG-Grafik daraus gemacht, die ich mit folgendem Code eingebunden habe:

<div class="kindleWidget">
  <img src="<?php bloginfo('template_directory'); ?>/images/send2kindle.png" width="125" height="26" alt="Lesen Sie den Artikel auf Ihrem Kindle weiter!" />
</div>

So findet ihr seit letzter Woche unter dem Beitrag den Button um meine Artikel direkt auf Euren Kindle zu schicken und dort in Ruhe zu lesen. Gerade für längere Artikel á la TLDR; ist das sicher eine prima Sache.

Update vom 11. August 2015: Ich habe mir die Statistiken des Buttons mal angeschaut, und da er kaum verwendet wurde, habe ich mich dazu entschlossen, ihn wieder auszubauen. Die oben genannte Lösung funktioniert natürlich immer noch.

Bei den mit * markierten Links handelt es sich um Affiliate-Links.

Kommentarbenachrichtigungen
Benachrichtige mich bei
3 Kommentare
älteste
neueste meiste Bewertungen
Inline Feedbacks
View all comments