WordPress Plugin: Open Graph Image Tag


Die aktuellen Änderungen von Facebook machen es notwendig.
Facebook generiert seit ein paar Tagen echte Einträge auf meiner Facebook-Wall, wenn ich auf irgendeiner Website den Like-Bottom drücke. Dabei werden auch diese kleinen Bilder mit generiert, die üblicherweise schon immer dann erschienen sind, wenn ich einen Link geteilt habe. Leider sucht sich der Algorithmus von Facebook immer das falsche Bild aus, es sei denn, es gibt im Header des HTML-Bereiches eine Angabe zum Open Graph Tag – „og:image“.

Ich hatte hier bereits vor einer ganzen Weile mal eine Lösung gepostet, hier mal der Code, wie daraus ein Plugin werden kann.
Es würde mich freuen, wenn sich dem mal jemand annehmen würde und ein vollwertiges Plugin draus macht.

Es setzt auf das Plugin get_the_image von Justin Tadlock, welches ebenfalls installiert werden muss. Beides zusammen gibt dann die Referenz über den Open-Graph-Image-Tag z.B. auf das erste Bild im Post oder das Artikelbild. Wer daraus ein leicht zu handhabendes Plugin macht, bekommt von mir ein persönliches Lob ausgesprochen, diese falschen Bild in meinem Stream nerven mich doch zu sehr! 🙂


<?php
/*
Plugin Name: Open Graph Image Tag
Plugin URI: http://koffeinbetriebenes.net/
Description: Fügt einen META-Tags og:image in den Header ein. Für die Ausgabe des richtigen Bildes im automatisierten Facebook-Sharing. Benötigt das Plugin "get_the_image" von Justin Tadlock
Version: 0.1
Author: Steffen Peschel, Du
Author URI: http://steffenpeschel.de/
Min WP Version: 3.0
Max WP Version: 3.0
*/

// Hier URL zum Standardbild eingeben
$URL_to_logo = "";

// Filter im Plugin 'get_the_image'
if ( function_exists( 'get_the_image' ) ) add_filter( 'get_the_image', 'sp_overwrite_image' );
function sp_overwrite_image ($image) {
	$pattern = '/src="([^"]*)"/';
	preg_match($pattern, $image, $matches);
	$src = $matches[1];
	unset($matches);
return $src;
}

// Display og:img <meta> tag
if(!is_admin()) add_action ('wp_head', 'sp_og_img');
function sp_og_img() {
	global $URL_to_logo;
	if (is_single()) {
		global $posts;
		if ( function_exists( 'get_the_image' ) ) {
			$img_url = get_the_image( array( 'echo' => false, 'size' => 'medium', 'default_image' => $URL_to_logo ) );
		} else { 
		$img_url = $URL_to_logo; 
		}
	} else { 
		$img_url = $URL_to_logo; 
	} 
echo "\n<meta property=\"og:image\" content=\"" . $img_url . "\" />\n";
}
?>

p.s. Wenn es das Plugin für diese Funktion schon gibt, auch gut. Ich verlinke das dann gern.

Twitter Button über Api-Call ohne Javascript oder iFrame

Standartmäßig wird der Twitter Button über Javascript eingebunden, alternativ gibt es die Möglichkeit ohne Javascript den Button über ein iFrame in Webseiten einzubinden. Aber auch das geht nicht ohne extra Ladezeit zu generieren. Hat man z.B. auf der Startseite die letzten 5 bis 10 Artikel und möchte auch dort schon zu jedem Artikel den Twitter Button anzeigen lassen, wird für jeden Button jeweils einmal eine komplette HTML-Seite geladen. Denn ein iFrame ist nichts anderes als eine Webseite in einer Webseite. Man kann also auch sagen, dass über eine solche Startseite nicht nur die eine eigene angezeigt wird, sondern gleich mal elf an der Zahl. Eigentlich eine ganz schlechte Wahl.

Über folgenden Tweet von Macx bin ich darauf aufmerksam geworden, dass das auch noch anders geht.

Gesucht, gefunden! Nicolas Gallagher beschreibt in seinem Blog wie man es macht. Aus Zeitmangel von mir leider noch ungetestet, klingt aber vielversprechend.
Custom Tweet Button for WordPress

How to create a custom Tweet Button for WordPress using the bit.ly and Twitter APIs. The HTML and CSS is completely customisable and there is no need for JavaScript. PHP is used to automatically shorten and cache the URL of a post, fetch and cache the number of retweets, and populate the query string parameters in the link to Twitter.

WordPress: Facebook das richtige Bild für “geteilte” Artikel mitteilen

Nachdem ich jetzt schon mehrmals darüber geschimpft habe, dass mir beim automatischen Artikel posten die falschen Bilder eingefügt werden, habe ich mich jetzt endlich mal damit beschäftigt und nachgelsesen, was man machen muss. Es ist relativ einfach, für Facebook gibt es einen extra meta-tag, der im Header eine Bildquelle angibt.


<meta property="og:image" content="<?php echo $img_url; ?>" />

Hier mein Lösungsansatz, wie ich das in WordPress umsetze.
Für die Wahl der Bildquelle nehme ich mir das Plugin get_the_image von Justin Tadlock zu Hilfe. Über die Funktion get_the_image(); rufe ich das Plugin in meinem Theme auf. Das Plugin überprüft automatisch Custom Fields, Artkelbild oder auch den Artikel selbst nach Bildern, je nach Parametern wird eine dieser Bildquelle gewählt.

Auf Facebook wird in der Regel entweder die Startseite oder ein einzelner Artikel verlinkt. Also frage ich dies zunächst ab. Für die Startseite kann ich einfach ein generelles Bild, z.B. ein Logo, festlegen.


<?php
   if (is_single()) {
      global $posts; // da ausserhalb der Loop
      if ( function_exists( 'get_the_image' ) ) {
         $img_url = get_the_image( array( ... ) );
      }
   } else { 
      $img_url = get_bloginfo('template_url').'/g/fbdefault.jpg'; 
   } ?>
<meta property="og:image" content="<?php echo $img_url; ?>" />

WordPress: Facebook das richtige Bild für “geteilte” Artikel mitteilen weiterlesen

Den offiziellen Tweet Button in WordPress Archiv und Index Seiten

Gerade habe ich mir die erste Folge Technikload angeschaut und mir dadurch mal den neuen offiziellen Tweet Button zu Gemüte geführt. Das ganze ist wirklich ein Kinderspiel und kann in der single.php einfach an gewünschter Stelle reinkopiert werden. Für Archivseiten wie auch für die index.php oder home.php braucht es eine kleine Änderung, damit die richtige URL und der richtige Text vom Twitter Button benutzt wird.

Hier zunächst die Zeile „Code“ wie man sie direkt unter http://twitter.com/goodies/tweetbutton generieren kann:


<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTERNAME" data-lang="de">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Beim Generieren des Buttons gibt es auch die Möglichkeit weitere Attribute zu ergänzen, so z.B. data-url für eine eigene URL – also worauf der Tweet linken soll – und data-text für einen eigenen Tweet-Text. Werden diese Attribute nicht gesetzt, liest das Tweet-Button-Script diese Daten direkt von der Seite, was ja bei der Startseite (in der Regel die index.php oder home.php) einfach die Website URL und nicht der Beitrags-Permalink ist. Gleiches gilt für den Tweet-Text.

Innerhalb des WordPress Loops ist die Lösung natürlich ein Kinderspiel.
data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>"

Mein Sonderfall auf dieser Seite:
Da ich den Titel mit meiner beschriebenen Funktion um ein paar HTML Tags erweitere, funktioniert die Übergabe der des Titels nicht einfach so. Hier meine Quick and Dirty Lösung, um die HTML Tags einfach wieder rauszufiltern:
data-text="<?php echo htmlentities(get_the_title()); ?>"

Update:
Sergej hat in seinem Blog eine Variante gepostet, die anstatt dem Javascript den Button direkt in ein <iframe> einbindet. Das Javascript welches im Endeffekt ebenfalls den Button in einem <iframe> darstellt, entfällt.

WordPress: Artikel kollaborativ erstellen

Ich arbeite weiter an der Umsetzung meiner Ideensammlung, heute mal wieder:

Voransicht für Drafts

Gemeint ist eine öffentliche Voransicht für Entwürfe, um damit anderen Usern bereits vor der Fertigstellung eine Möglichkeit zu geben den Text/Inhalt zu korrigieren und zu ergänzen. Immer dann wenn es um Wissenerarbeitung und Wissensvermittlung geht, Texte oder auch einfach Sammlungen (Links, Bilder, Ideen) kollaborativ entstehen sollen, ist eine öffentliche Voransicht sinnvoll. Der Unterschied zu dem was man bereits mit den Grundfunktionen von WordPress über die User-Rollen erstellen kann, ist das Wörtchen „öffentlich“. Es soll nicht nur eine mit Userrechten ausgestattete Redaktion gleichzeit daran arbeiten können, sondern jeder. Vergleichbar dem Wiki-Prinzip mit dem Unterschied, dass es einen Zeitpunkt der Veröffentlichung gibt, der Artikel den Wiki-Status also verläßt. WordPress: Artikel kollaborativ erstellen weiterlesen

mit und ohne www unter WordPress 3.0 MultiSite

Ich habe gerade festgestellt, dass WordPress 3.0 unter Verwendung der MultiSite Funktionen inkl. mehrerer Domains (über Plugin) Probleme hat „mit und ohne www in der Domain“ richtig aufzulösen. So bekam ich unter einer Domain ohne www eine Umleitung auf die Startseite wenn ich einen Permalink eines Artikels mit www eingegeben hatte. Das kann z.B. passieren, wenn auf den Arikel gelinkt wird und dabei eben ein www in der Link-URL angegeben wird. Bei einer Domain mit www hatte ich auch Probleme. Ich habe das Problem jetzt nicht sonderlich lange getestet und will auch nicht ausschließen, dass das Problem erst durch das verwendete Plugin verursacht wird. Meine schnelle Abhilfe besorgte ich mit mit einem Eintrag in die .htaccess Datei. Dabei wird die URL gleich über das Apache mod_rewrite Modul umgebogen und kommt gar nicht erst „falsch“ auf die WordPress Scripte zu.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.de$ [NC]
RewriteRule ^(.*) http://www.domain.de/$1 [L,R=301]

Mehr zu Mod Rewrite erfährt man u. a. unter modrewrite.de.