Photography and web in pictures & words by Martin Wolf
Der Name ist bescheuert und die App ist hässlich. Es ist trotzdem die beste Möglichkeit WordPress Blogeinträge vom iPad aus zu veröffentlichen. Man kann Artikelbilder vergeben und sogar Custom Fields anlegen. Die App unterstützt außerdem auch noch reichlich andere Dienste.
Wieso die offizielle WordPress App so hinterher hinkt verstehe ich nicht. Zum Kommentare beantworten ist sie top, danach hört’s aber auch schon auf. Sehr schade.
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.
Was macht das Plugin? Beim Upload gibt es jetzt ein zusätzliches Dropdown-Feld und zwei Texteingaben, um die Art der Lizenz (alle Creative Commons sowie All Rights Reserved) einzugeben. Wenn ihr das Bild in den Beitrag einfügt wird der img-Tag mit sogenannten data-Parametern erweitert, die es seit HTML5 als eine Art Platzhalter für genau solche Daten gibt. Bei der Ausgabe im Blog wird das Foto dann in einen figure-Tag gepackt, per CSS die Lizenzinfo dann oben rechts über das Bild gelegt.
Christoph hat ein nettes, kleines Plugin für alle WordPress-Betreiber geschrieben, dass es ermöglicht Fotos leicht mit Lizenzen zu versehen und mit dem Original zu verlinken. Nette Sache für alle, die oft Fotos von anderen Fotografen einbinden.
Die WordPress App für webOS sieht wirklich gut aus. Notifications über neue Kommentare egal wo man gerade ist, finde ich ziemlich cool und überhaupt sieht es hübsch aus, auch wenn es natürlich ob der “Sliding Panels” stark an Twitter fot iPad erinnert. Das bringt mich dann auch mal wieder zur Frage, wo bleibt eigentlich eine wirklich gute iPad und iPhone WordPress App?
Oh, seht mal. Ein neues Design. Naja, so ganz neu ist es nicht. Ich habe das bis eben noch aktuelle Theme genommen und weiter entwickelt.
Das neue visuelleGedanken.de ist etwas luftiger geworden. Nicht im Platz, aber im allgemeinen Aussehen. Es gibt mehr Weißraum, weniger Farben, mehr Unterlinien. Außerdem jetzt eine Serifenschrift. Bei allen, die einen neuen, guten Browser nutzen, sieht sie auch genau so aus, wie sie es sollte. Ich mag es sehr. Etwas ganz neues wäre nicht das Richtige gewesen.
Bevor ihr euch an der ein oder anderen Stelle wundert, ich arbeite hier und da noch etwas weiter. Manches ließ sich nicht testen ohne live zu sein oder den Blog in den Wartungsmodus zu schalten, und das wollte ich schlichtweg vermeiden. Das Antworten auf einen Kommentar funktioniert zum Beispiel noch nicht genau so, wie ich es möchte.
Also ihr dürft und sollt aber trotzdem auch gerne Bugs oder Ähnliches posten.
Also dann. Kommt immer mal wieder aus eurem Feedreader raus und schaut vorbei. Hier und da wird noch etwas dazu kommen. Vielen Dank!
Nachdem ich mein neues kleines Projekt daily.visuellegedanken.de vorgestellt habe, wurde ich an den verschiedensten Stellen im Netz danach gefragt wie ich das denn technisch umsetzen würde. Ob der Blog sich die Bilder von Flickr zieht, ob ich die manuell blogge oder oder oder.
Die Idee ist, bzw ganz wichtig bei meinem visuellen Tagebuch ist mir, dass ich innerhalb kürzester Zeit, ein Foto machen, es kurz aufpolieren und bloggen kann. Der ganze Vorgang sollte nicht länger als fünf Minuten dauern. Nur so kann ich hoffen, dass ich es wirklich jeden Tag schaffe. Und bisher klappt es ja noch ganz gut.
Also werde ich der Umsetzung heute mal etwas auf den Grund gehen und ihr könnt es ganz einfach selbst ausprobieren.
Ich braucht dazu ein Mobiltelefon oder von mir aus auch einen Computer, auch wenn es in meinem Fall dann irgendwie am Ziel vorbei schiesst, dass/der E-Mails mit Anhängen versenden kann. Des weiteren einen Flickr-Account und einen (WordPress) Blog. Es funktioniert auch mit anderen Blogs, ich werde es hier aber am Beispiel eines selbst gehosteten WordPress-Blogs machen.
In der Theorie sieht das System folgendermaßen aus: Ich schiesse mit dem iPhone ein Foto, bearbeite es in der App “Best Camera” und sende es von dort aus per E-Mail an Flickr. Flickr verarbeitet das Foto, sprich es wird gespeichert und der Tag “iPhone” hinzugefügt. Von dort aus postet Flickr das Foto auch direkt in meinen dafür konfigurierten Blog. Der Betreff der E-Mail wird dabei automatisch zur Überschrift des Blogeintrags. Man kann auch Text für den Eintrag mitschicken, das mache ich aber nicht.
Soweit ganz simpel, oder?
Damit das ganze überhaupt funktionieren kann, müsst ihr in eurem WordPress-Backend unter “EINSTELLUNGEN -> SCHREIBEN” die beiden Punkte “Atom Publishing Protocol” und “XML-RPC” aktiviert haben, da Flickr sonst keine Einträge automatisch erstellen kann.
Nun aber zu Flickr. Die Funktion ist etwas versteckt, was wahrscheinlich auch der Grund dafür ist, dass sie viele nicht kennen. Ihr findet sie unter YOU -> YOUR ACCOUNT -> EMAILS & NOTIFICATIONS
Auf dieser Seite klickt ihr dann auf “edit” unterhalb von “Upload by Email options”. Möglicherweise steht bei euch da noch nichts und ihr müsst erst eine Adresse erstellen. Kann ich leider nicht mehr nachschauen, ist aber auch kein Hokus-Pokus.
Die nächste Seite ist auch alles andere als übersichtlich. Wahrscheinlich gilt hier das Gleiche wie oben schon, bei mir ist es ein “edit” Link, ihr müsst wahrscheinlich einfach ein “add blog” oder Vergleichbares klicken.
Auf dieser Seite stellt ihr außerdem auch ein welche Tags eure Fotos automatisch zugewiesen bekommen sollen. Falls ihr sowas überhaupt wollt.
Habt ihr das gemacht, müsst ihr euch entscheiden, was für einen Blog ihr aufsetzen wollt. Wir bleiben hier beim Beispiel selbst gehosteter WordPress Blog. Dazu wählt ihr “MetaWeblogAPI Enabled Blog” aus und nicht “WordPress Blog”, das meint die von wordpress.com gehosteten Blogs.
Auf der nächsten Seite müsst ihr den API Endpoint eingeben. Dieser ist die Schnittstelle zu eurem Blog. Dafür habt ihr im ersten Schritt das Fernpublizieren aktiviert. Die URL folgt dem Schema http://eureblogurl/xmlrpc.php
Ihr könnt es auch an meinem Beispiel oben sehen.
Außerdem gebt ihr noch die Zugangsdaten zu eurem Blog ein, damit Flickr nachher die Artikel erstellen kann.
Jetzt noch die URL zum Blog und den Namen eingeben und auf “ALL DONE” klicken und ihr seid fertig. Ihr solltet “Store your password” anhaken, da Flickr sich sonst nicht automatisch bei euch im Blog anmelden kann und das ganze dann natürlich nicht automatisiert ablaufen kann.
Bei mir sieht das dann so aus. Hinter dem Punkt Layout verbergen sich noch ein paar Einstellungen dazu, wie der automatisierte Blogeintrag aussehen soll, sprich welche Bildgröße ihr einbindet, ob noch anderer Text zu sehen sein soll, etc.
Mein Template ist extrem simpel und beinhaltet lediglich einen Absatz mit einem A-Tag und dem Bild in der Größe M.
Es gibt außerdem auch vorgefertigte Layouts. Solltet ihr dazu noch fragen habe, kann ich die gerne im Einzelnen beantworten, ist aber alles simples HTML. Und unter dem Link auf der linken Seite unten findet ihr die Platzhalter, die ihr benötigt um die verschiedensten Sachen einzubauen.
Jetzt könnt ihr einfach eine E-Mail an die von euch eingerichtete Flickr-E-Mail-Adresse schicken mit dem Foto als Anhang, im Betreff die Überschrift des Blogeintrags und dem Text der Mail als Text für dein Blogeintrag.
Von da aus geht es bei mir sogar noch automatisiert weiter. Es wird ein Tweet rausgeschickt und gleichzeitig der Eintrag auf Facebook veröffentlicht um so gleich zwei große Plattformen zu bedienen, die Besucher generieren. Das will ich aber hier erstmal auslassen, damit es die Länge des Artikels nicht sprengt.
Das ist das ganze Geheimnis. Also alles ganz einfach. Sollte es dennoch irgendwo haken, einfach kommentieren, dann versuche ich euch so gut es geht zu helfen.
Viel Spaß!
Nur ganz kurz: Das Update auf WordPress 2.7 erfolgreich und sieht alles ganz schick aus. Da brauch’ ich das Fluency Admin Theme ganz sicher nicht mehr.
Das Problem mit den Permalinks wurde behoben umgangen (http://wordpress.org/support/topic/189058). Jedenfalls funktioniert soweit wieder alles und ich werde mir in den kommenden Tagen mal die neuen Features genauer ansehen.
Ich habe gerade auf WordPress 2.6 geupdatet. Allerdings hält sich meine Freunde in Grenzen… Es gibt ein Problem mit den Custom-Permalinks. Habe hier einen Forumpost gefunden, wo das Thema gerade besprochen wird. http://wordpress.org/support/topic/188959 (Falls jemand das hier liest und ähnliches Problem hat.)
Also wundert euch nicht, wenn hier einiges (bzw die Beitragsseiten mit Kommentaren, etc) nicht funktioniert…