Social Snippets: Informationen in WordPress aufbereiten

Veröffentlicht am 07. April 2015
Veröffentlicht von Martin
Schlagwort Codeschnipsel, HTML, Wordpress

Damit Bloginhalte in den sozialen Netzwerken auch schön aussehen, wenn sie geteilt werden, sollte der Blog bzw. die Seite Facebook, Google+ usw. auch entsprechende Informationen anbieten. Ist das nicht der Fall, kann es vor allem Probleme mit der Vorschaugrafik geben, denn im Zweifel rät Facebook, welches Bild in der Vorschau angezeigt werden soll.

Um das zu umgehen, gibt es das Open Graph Protokoll. Damit lassen sich Infos zum Artikel bzw. zur Seite vorgeben, die die sozialen Netzwerke verwenden sollen. Ein Beispiel dafür sieht etwa so aus:

<meta property="og:url" content="http://die-artikel-url.de" />
<meta property="og:title" content="Der Titel des Artikels" />
<meta property="og:image" content="Das_Bild_das_als_Vorschau_angezeigt_werden_soll.jpg" />
<meta property="og:description" content="Eine Zusammenfassung des Artikels" />

Diese Meta-Angaben gehören dann in den <head>-Abschnitt des Dokuments. Weitere Infos zum Thema Open Graph gibt’s z. B. bei Facebook selbst.

Umsetzung in WordPress

Nehmen wir nun an, wir haben einen mit WordPress laufenden Blog, bei dem wir auf der Startseite einen allgemeinen Standard-Text mit Bild anzeigen wollen, während auf jeder Artikelseite entsprechend Infos und ein Bild zum Artikel angezeigt werden sollen.

Zunächst prüfen wir, ob wir uns auf der Hauptseite befinden, oder auf einer Artikelseite. Auf einer Artikelseite müssen wir zunächst einen Loop starten, um Zugriff auf die Artikeldaten zu haben:

<?php
if (!is_home()) : // Nur auf einer Artikelseite wird die Info zum Artikel ermittelt:
if (have_posts()) : while (have_posts()) : the_post(); ?>

Befinden wir uns auf einer Artikelseite, prüfen wir nun, ob es bei dem Artikel ein post_thumbnail (Artikelbild) gibt. Wenn ja, soll dieses angezeigt werden. Falls nein, wollen wir das erste im Artikel verwendete Bild verwenden (die dazu verwendete Lösung stammt von CSS-Tricks.com):

<?php
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$vorschau = $thumb['0'];
}
else {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches[1][0];
$vorschau = $first_img;
}
?>

Anschließend können wir die Meta-Angaben dynamisch mit den ermittelten Werten und den Variablen wie the_title(), the_excerpt() usw. füllen. So könnte die Lösung dann auf einen Blick aussehen:

 <?php
 if (!is_home()) : // Nur auf einer Artikelseite wird die Info zum Artikel ermittelt:
 if (have_posts()) : while (have_posts()) : the_post(); ?>

 <?php
 if ( has_post_thumbnail() ) {
 $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
 $vorschau = $thumb['0'];
 }
 else {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches[1][0];
 $vorschau = $first_img;
 }
 ?>

 <meta property="og:url" content="<?php the_permalink(); ?>" />
 <meta property="og:title" content="<?php the_title(); ?>" />
 <meta property="og:image" content="<?php echo $vorschau ?>" />
 <meta property="og:description" content="<?php the_excerpt(); ?>" />
 <?php endwhile; endif;
 else : // Auf der Hauptseite werden allgemeine Infos zur Homepage ausgeben:
 ?>
 <meta property="og:url" content="http://www.pixelgedöns.net" />
 <meta property="og:title" content="Pixelgedöns.net" />
 <meta property="og:image" content="pixelgedoens_logo.png" />
 <meta property="og:description" content="Ich biete Internetseiten für Privatleute, Vereine und Firmen." />
 <?php endif; ?>

 

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen