Print-Friendly-Button im Blogspot-Blog hinzufügen

Print Friendly bietet Script-Code für einen Button, über den man den Inhalt eines Post oder einer Seite druckerfreundlich ausdrucken oder als PDF speichern kann.

---

http://www.printfriendly.com/button

Standardmäßig wird der Button für Blogger/Blogspot im Post-Footer angezeigt, egal wo man den Code im HTML eingetragen hat. Er steht (nur) unter geöffneten Posts und Seiten.

Die einfachste und sicherste Methode, um den Button im Blog hinzuzufügen, ist die automatische Installation, die für Blogger/Blogspot bei Print Friendly per Klick auf einen Button zur Verfügung steht.

Dabei wird im ausgewählten Blog automatisch ein HTML-Gadget hinzugefügt und der Script-Code darin eingetragen. Von da aus wird der Button im Post-Footer angezeigt.

Man muss gerade in seinem Account angemeldet sein, damit das möglich ist.

Da das HTML-Gadget nur Script-Code enthält, erscheint es im Blog inhaltsleer, nimmt aber dennoch ein wenig Raum ein, 10px Höhe waren es in meinem Testblog. Setzt man das folgende Style-Kommando unter den Scriptcode mit in das Gadget, dann verschwindet das HTML-Gadget ganz aus der Blog-Ansicht. Der Button wird dennoch angezeigt. Ob das entsprechende Gadget die ID "HTML1" hat oder eine andere Ziffer darin vorkommt, kann man im Quelltext nachsehen.

<style>
#HTML1 {
display:none;
}
</style>

Falls der Button nicht angezeigt wird, könnte ein Gadget die Ursache sein. In einem meiner Testblogs verhinderte das "Learn Sign Language"-Gadget, dass der Button angezeigt wurde.

Ablauf in Bildern

"Terms" (Link unten) lesen, einiges aussuchen und dann den Button zum Installieren klicken:

Es öffnet sich dann eine Seite bei Blogger, auf der man aussuchen kann, in welchem Blog das Print-Friendly-Gadget hinzugefügt werden soll:

Das Gadget steht dann im Layout:

Und es steht inhaltsleer, aber dennoch bemerkbar, im Blog (siehe Linie über "Labels"):

Aber, wenn man den Ausblende-Code unter das Skript in das Gadget setzt ...

... dann sieht man davon nichts mehr:

So sieht der Button dann (erstmal) aus:

Es gibt im Skript jedoch einen kleinen Style-Bereich in dem man etwas am Aussehen ändern kann:

Mit geänderter Schriftfarbe und verringertem Abstand nach rechts sieht der Button dann so aus:

Das kann der Button

Man kann sich das, was der Button macht, unter Fantastisch Humingbirds2 Bspl ansehen. Ich habe aber nur Drucken und PDF mit drin, nicht den Versand per Email.

Eine PDF-Datei wird mit dem Programm blitzschnell kreiert und auf dem Rechner im Download-Ordner gespeichert und sieht dann beispielsweise so aus: https://docs.google.com/file/d/0BxGyLDldtJCRcDk1bzJmRXh1Q00/edit?pli=1

Nicht erfasst werden Markierungen per Hintergrundfarbe und Iframes. Es ist halt ein Skript zum Drucken und nicht zum Screenshot machen.

Wenn das freigegeben wurde, kann man auswählen, was von dem Postinhalt im Ausdruck bzw. in der PDF übernommen werden soll. Man kann dann einzelne Abschnitte löschen, wenn man will. Was ein Abschnitt ist, ist jedoch vorgegeben. Das richtet sich danach, wie der Post geschrieben wurde. Ein Abschnitt ist bei mir immer das, was zwischen zwei Leerzeilen steht. Auch Bilder können gelöscht oder behalten werden.

Übrigens kann man auch eine CSS-Datei z.B. bei Google-Drive ablegen und beim Auswählen ihre Webadresse unter "Custom css url" angeben, damit das Skript darauf zugreift anstatt auf den Standard. Standard-Code und Anleitung: http://support.printfriendly.com/customer/portal/articles/895256-custom-css-styles

Button an anderer Stelle einordnen

Die Anleitung auf Print Friendly, wie man den Print-Friendly-Code für Blogger/Blogspot alternativ auch an anderer Stelle im Blog einbauen könnte, ist veraltet und gilt nicht mehr. 

Es gibt aber im englischen Forum eine aktuelle. Wichtigster Hinweis darin: An anderer Stelle als dem Post-Footer kann man den Button nur mit dem Print-Friendly-Code für "Website" einordnen. Dafür gibt es keinen Button zum Übertragen in das Blog, sondern man muss den Code kopieren und unter "HTML bearbeiten" eintragen.

Ich rate aber davon ab.

Das Blogger-HTML nimmt den Website-Code zwar und der Button steht dann auch an der richtigen Stelle und funktioniert korrekt, beim Verlassen des HTML-Bereichs gibt es aber eine Meldung, die fragt, ob man den Bereich tatsächlich verlassen möchte; denn es gäbe noch Ungespeicherte Änderungen. Das kann man zwar ignorieren, es deutet aber darauf hin, dass das Programm irritiert ist. Beim nächsten Öffnen des HTML wird der Print-Friendly-Code dann auch rot gefärbt angezeigt. - Was genau das bedeutet, weiß ich nicht. -  Es könnte nur bedeuten, dass das Programm einen anderen Print-Friendly-Code erwartet und ihn deshalb rot färbt, es aber trotzdem mit ihm klarkommt, weshalb es den Code beim Speichern nicht gelöscht hatte.

Will man, das möglichst immer alles rund läuft, sollte man Irritationen des HTML aber vermeiden.

Den Button unter den Post-Titel setzen

Die Anleitung, um den Button mit Hilfe des Code für "Website" direkt unter dem Post-Titel einzutragen, findet man dort:
https://productforums.google.com/d/msg/blogger/t25a2QYF-AM/yeqGsqI7RHAJ

Mit etwas Ausrichtung per CSS kann man den Button dann auch von unter dem Post-Titel in die rechte obere Ecke des Post befördern, wenn man will:

Dazu habe ich in diesem Blog den folgenden Code benutzt und unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eingetragen:

/* Print-Friendly-Button ausgerichtet */
/* Deshalb muss man aber auch den post-body (Post-Inhalt) etwas runter setzen */
.post-header {
text-align: right;
margin-top:-60px;
}
.post-body {
margin-top:50px;
}

Über HTML platzierten Button nur bei einzeln geöffneten Posts anzeigen lassen

Die oben verlinkte Lösung, um den Button unter dem Post-Titel anzeigen zu lassen, muss man aber noch um Code ergänzen, damit der Button nur auf einzeln geöffneten Posts angezeigt wird.

Denn, wenn man den Button auf der Startseite, einer Label-Seite oder einer Archiv-Seite anklickt, wird nicht der Inhalt des einzelnen Post verarbeitet, sondern der angezeigte Inhalt aller Posts der Startseite, Label-Seite, Archiv-Seite.

Zu ergänzender Code rot markiert:

<div class='post-header'>
<div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == "item"'>
PF-CODE FÜR "WEBSITE" DAZWISCHEN
</b:if>
</div>

Interessanterweise verschwand dann auch die Warnmeldung, die vorher beim Verlassen des HTML stets auftauchte, dass es noch ungespeicherte Änderungen gäbe. Der Code blieb aber rot gefärbt.

Leider wird der Button dann auch nicht auf statischen Seiten angezeigt. Will man das ebenfalls anbieten, muss man den PF-Code für "Blogger/Blogspot" wählen, der im Post-Footer angezeigt wird. Mit ihm wird der Button automatisch nur in allen einzeln geöffneten Posts und auch in allen statischen Seiten angezeigt.

Den Button in die Sidebar setzen

Auch das geht mit Print-Friendly-Code für "Website", den man unter "HTML bearbeiten" einträgt. Zuvor muss man aber unter "Layout" ein HTML-Gadget hinzufügen. Den Titel kann man frei lassen, aber man muss etwas in das Content-Feld schreiben, damit man das Gadget speichern kann. Es empfiehlt sich, "Print Friendly" hinein zu schreiben, damit man später noch weiß, wozu das Gadget da ist und man es leicht findet. Das Gadget dann an die Stelle schieben, an der der Button später zu sehen sein soll. Nun muss man im Quelltext nachsehen, welche ID das Gadget hat. Dazu sucht man nach "Print Friendly"; denn so gelangt man zu dem Gadget. Nun zu "HTML bearbeiten" wechseln und über den Button "Weiter zum Widget" zu diesem HTML-Gadget springen. Man muss dann mit einem oder zwei Pfeilen links davon das Gadget noch vollständig öffnen. Die Zeile

<data:content/>

wird nun gelöscht und statt dessen der Print-Friendly-Code dort eingetragen.

Auch hier gilt: Wenn man will, dass der Button nur dann angezeigt wird, wenn ein einzelner Post geöffnet ist, dann muss man direkt über dem PF-Code noch

<b:if cond="data:blog.pageType == &quot;item&quot;">

und direkt darunter

</b:if>

setzen. Auf "Vorlage speichern" klicken und warten bis das erledigt ist.

Falls der Button eingerückt im Gadget steht, kann man das über die margin-Angaben, die sich im Style-Bereich des PF-Code befinden, passend ändern. In der Sidebar kann auch Fettschrift passender sein. Das kann man in dem Abschnitt ergänzen, wo auch "color" steht. font-weight:bold ist das Kommando dafür. Nicht vergessen: Die Kommandos müssen durch ein Semikolon voneinander getrennt sein.

Es wird der aktuell angezeigte Postbereich für den Druck bzw. das PDF verwendet, wenn man den Button anklickt.

Ute Ziemes, sg.utez.de, 2014-08-31, Änderungen: 2014-09-01, 2014-09-04, 2014-09-06, Linkkorrektur: 2015-06-13