Pinterest „Pin It“ Button für Fotos in WordPress

Pinterest ist ja zur Zeit gerade stark im Kommen. Ich selbst bin da nicht aktiv, da ich keinen Nutzen für mich daraus ziehen kann, aber das hat ja nichts zu heißen. Ich habe mich also mal kurz hingesetzt und einen „Pin to Pinterest“ Button für alle Fotoeinträge hier eingebaut.

Ich dachte mir es könnte vielleicht für den ein oder anderen interessant sein, wie man den Pinterest Code für WordPress anpasst, deswegen habe ich das mal zusammen gefasst:

Auf der Goodies Seite von Pinterest findet ihr den ganz normalen Code für den Pin It Button. Ihr könnt da eine statische URL für die Seite, das Bild und eine Beschreibung eingeben, den Code kopieren und in eure Seite einfügen. Das für jeden Eintrag manuell zu machen ist natürlich undenkbar und deswegen nehmen wir uns den Code und pflanzen unsere dynamischen WordPress Inhalte ein. Achtung: Das funktioniert nur innerhalb des Loops.

Da ich jedem Eintrag, der ein Bild enthält auch ein Artikelbild zuweise, welches ich zum Beispiel auf Facebook anzeigen lasse, wenn ein Eintrag geteilt wird, nutze ich dieses einfach auch für Pinterest. Bietet sich ja an, wenn ich es eh schon einbinde. Das bedeutet also keine weitere Arbeit.

In den Ausgangscode, den man von Pinterest bekommt, habe ich an den betreffenden Stellen Platzhalter eingestezt, damit ich weiß, wo meine WordPress Codes eingefügt werden müssen:

<a href="http://pinterest.com/pin/create/button/?url=urlzurseite&media=urlzumbild&description=beschreibung" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

Daraus machen wir dann folgendes:

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ); ?>&description=<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

Statt urlzurseite setzen wir den Permalink Tag von WordPress ein, der dafür sorgt, dass immer die Adresse des Eintrags genutzt wird. An Stelle von urlzumbild binden wir den Code ein, der das Artikelbild des Eintrags abfragt und die url einfügt und zu guter letzt fügen wir statt beschreibung noch einen Code ein, der einen Ausschnitt des Eintrags abfragt und als Text ausgibt. Ich möchte hier nicht den kompletten Content abfragen, da das unter Umständen ein kompletter, langer Blogpost sein könnte. Man könnte aber auch einfach get_the_content statt get_the_excerpt nutzen.

Da ich Artikelbilder nur für meine Fotoposts einfüge, kann ich diesen Umstand ganz einfach nutzen um abzufragen ob der Pin It Button überhaupt angezeigt werden soll. Gibt es kein Artikelbild, soll auch kein Button angezeigt werden, weil er keine Funktion hätte. Das sieht dann so aus:

<?php if ( has_post_thumbnail() ) { ?>
    <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ); ?>&description=<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<?php } ?>

Und dann am Ende nicht vergessen das Javascript vor dem schliessenden body-Tag einzufügen:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Wenn ihr das Artikelbild schon für etwas anderes nutzt oder aus einem anderen Grund das Feld leer lassen wollt, könnt ihr auch speziell ein Bild per Custom Field für Pinterest definieren und dieses im obigen Code einfügen. Bedeutet allerdings bei jedem Eintrag Mehrarbeit.
Wenn daran Interesse besteht, sagt kurz Bescheid, dann erkläre ich das noch.

Und jetzt bin ich gespannt ob der Button auch benutzt wird. :D