Ole Michelsen:

As a web developer I’m frequently looking at the source code of various websites. Lately my new iPad has become my primary tool for surfing and reading documentation, but alas it completely lacks a view source feature.

Also hat der gute Mann einfach mal ein Bookmarklet gebaut, dass den Quellcode ausliest und ihn sogar auch noch hübsch darstellt. Ich find’s großartig. Vielen Dank Ole Michelsen.

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

Offscreen Mag Blog:

This cabin makes me want to give up city life and move into the country side so badly. Love everything about it—well, maybe not the PC

Ich würde sofort einziehen.

fancyApps:

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

In Zukunft kann man alle Bilder hier im Blog anklicken und bekommt eine Hi-Res Version angezeigt, die sogar auf dem iPad dank einer Auflösung von 2048px an der langen Kante, gut aussieht. Realisiert habe ich die simple Funktionalität mit fancybox, meinem lieblings Lightbox Script.
Die fancybox kann noch viel mehr als das wofür ich sie bisher nutze und alles ist super einfach zu implementieren. Und weil ich hier den ein oder anderen Euro verdiene, habe ich auch gerne eine Lizenz für 15€ gekauft.