Statischen Button zum Teilen auf Tumblr in WordPress-Blog einbinden

Vor einiger Zeit hatte ich das Einbinden von statischen Social Media-Buttons hier in diesem Blog beschrieben. Da ich nun auch einen Tumblr-Blog betreibe, wollte ich in ähnlicher Weise zusätzlich einen Button einbinden, der es Besuchern ermöglicht meine Beiträge auf ihren Tumblr-Seiten zu verbreiten.
Das Internet gibt diesbezüglich nicht viel an Informationen her, aber ich habe dennoch eine Dokumentation darüber gefunden, wie ich einen statischen Teilen-Link umsetzen kann. Natürlich sollte er ähnlich wie die anderen Social Media-Buttons funktionieren und aussehen.

Das heißt, es sollte darin einerseits ebenfalls eine Popup-Lösung enthalten sein und andererseits der Optik von Twitter-, Facebook– und Google+-Buttons entsprechen.

Einbinden in der single.php

Eine Hilfeanleitung bietet übrigens auch Tumblr an. Und so werkelte ich ein wenig herum und ergänzte die single.php meines Themes letztendlich um folgenden Code (einschließlich Popup-Funktion):

<div class="tumblrbut">
<a target="popup" onclick="window.open('','popup','width=640,height=480,scrollbars=no,toolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=50,left=50')" href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink()) ?>&amp;name=<?php echo urlencode(strip_tags(get_the_title())) ?>&amp;description=<?php echo urlencode(strip_tags(get_the_excerpt())) ?>" title="Bei Tumblr empfehlen">
<img src="<?php bloginfo('template_url')?>/eigene-buttons/tumblr_text.png" alt="Tumblr" width="66" height="24" style="float:left;margin:3px 5px 0px 6px;border:none;" /></a>
</div>

Da ich ja keinen Zähler integriert habe, verwende ich momentan nicht das “t” als Icon, sondern den Logoschriftzug. Hat den zusätzlichen Vorteil, dass der Button nicht mit dem ebenfalls blauen Facebook-Button verwechselt werden kann. Finden könnt ihr die entsprechenden Icons und Symbole auf dieser Seite.

Gestaltung des Buttons per CSS

Diesen Code habe ich in die style.css meines Themes eingefügt:

.tumblrbut{background:-moz-linear-gradient(center top,#788087 5%,#2B4659 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#788087',endColorstr='#2B4659');background-color:#788087;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:85px;height:30px;margin:10px 0 0 40px;float:left;}
.tumblrbut:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#2B4659),color-stop(1,#788087) );background:-moz-linear-gradient(center top,#2B4659 5%,#788087 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2B4659',endColorstr='#788087');background-color:#2B4659;}
.tumblrbut:active{position:relative;top:1px;}
.tumblrzahl{display:inline-block;color:#ffffff;font-family:Tahoma,Verdana,Arial,sans-serif;font-size:16px;margin:3px 0 0 27px;text-decoration:none;text-shadow:1px 1px 0px #201C3F;}
.tumblrbut img{display:inline-block;}

Wie oben erwähnt, gibt es da noch diesen kleinen Wermutstropfen aufgrund des fehlendes Zählers: ein Script darüber war einfach nicht zu finden. Daher zähle ich auf die Profis unter Euch und hoffe, dass irgendwann jemand ein Script über dieses Feature ertüftelt. Allerdings kann ich diese Lücke noch verschmerzen, da sich die Anzahl der geteilten Beiträge bei Tumblr voraussichtlich in Grenzen hält. :-)