In dem vorigen Beitrag habe ich bereits über den validen “gefällt-mir”-Button geschrieben. Der manuelle Einbau der validen SocialMedia-Buttons von Tanja (siehe die Quellenangaben von CrazyGirls Blog am Ende dieses Beitrages) und meines “gefällt-mir”-Buttons ist unter anderem auch abhängig von dem verwendeten Theme und so versuchte ich diese in meinem Testblog einzufügen. Mir gefiel die Anzeige der Buttons in der single.php deswegen nicht, da sie durch das Plugin Yet Another Related Posts Plugin beeinträchtigt wurde. So wurden sie erst unter den “ähnlichen Beiträgen” angezeigt. Ich wollte aber erreichen, dass sie direkt unter dem jeweiligen Beitrag angezeigt werden.

Nicht so schön: Einbau in single.php

<h3>
geschrieben von <span><?php the_author() ?></span>  |  geschrieben in <span><?php the_category(', ') ?></span>  |  geschrieben am <?php the_time('d.m.Y') ?><br />
<?php the_tags('Tags: ', ', ', '<br />'); ?></h3>
</div>
<h4><?php comments_number('0', '1', '%'); ?></h4>
</div>

<div>
<?php theme_google_300_ads_show(); ?>
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php theme_google_468_ads_show(); ?>

</div>
</div>

<div id="tweet_button"><iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&amp;lang=de&amp;count=horizontal&amp;via=RebuSylvi&amp;related=RebuSylvi" style="width:110px; height:20px;" frameborder="0" scrolling="no"></iframe>

<p style="float: right; margin-right: 400px; margin-top: -2px; "><a name="fb_share" type="button" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title();?>">Teilen</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></p>    </div>

<?php comments_template(); ?>

Um zu demonstrieren, warum mir die Einbindung in der single.php nicht gefiel, hier der Screenshot über die Anzeige der Button bei aktiviertem YARPP-Plugin:

Sobald es deaktiviert ist, werden die Buttons auch direkt unter dem jeweiligen Artikel angezeigt:

Besser: Einbau in der yarpp-template.php

YARPP bietet die Möglichkeit, die Anzeige der ähnlichen Beiträge in einer template.php zu konfigurieren. Und so schaute ich mir die Datei yarpp-template-example.php etwas genauer an. Dort hatte ich bereits die Anzeige per Fettschrift und list-style formatiert. Also sollte es doch möglich sein, dort auch die SocialMedia-Buttons einzufügen.

Tipp:

Die Datei yarpp-template-example.php ist in folgendem Verzeichnis zu finden: dein-seiten-name/wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates.
Damit es vom Theme umgesetzt wird, muss sie anschließend in den Theme-Ordner kopiert werden, z. B. in  dein-seiten-name/wp-content/themes/dein-theme-verzeichnis

Nach der Ergänzung der validen Facebook-Teilen-, “gefällt-mir”-Button und den Twitter-Button sieht der Code in der yarpp-template-example.php nun wie folgt aus:

<div id="tweet_button"><iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo rawurlencode(get_permalink()) ?>&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&amp;lang=de&amp;count=horizontal&amp;via=RebuSylvi&amp;related=RebuSylvi" style="width:110px; height:20px;" frameborder="0" scrolling="no"></iframe>

<p style="float: right; margin-right: 400px; margin-top: -8px; "><a name="fb_share" type="button" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;=<?php the_title();?>">Teilen</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></p>    </div>
<p style="float: left; margin-top: 10px;"><iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink();?>&amp;=<?php the_title();?>" scrolling="no" frameborder="0"  style="border:none; width:450px; height:80px"></iframe></p>
<?php /*Example templateAuthor: mitcho (Michael Yoshitaka Erlewine)*/ ?><h3>Ähnliche Beiträge</h3><?php if ($related_query->have_posts())><dir style="list-style-type:square; color:black; font-weight:bold;">    <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--></li>    <?php endwhile; ?></dir><?php else: ?><p>Keine ähnlichen Beiträge</p><?php endif; ?>

Anschließend finde ich die Darstellung der Buttons sehr ansprechend:

Kombinierte Einbindung: Plugin WP Tweet Button und manuelle Einbindung Facebook-Buttons

Ich hatte ebenfalls in dem vorigen Artikel erwähnt, dass ich das Plugin WP-Tweet-Button deswegen behalten habe, da der Button einerseits valide ausgegeben wird. Andererseits kann darin sehr einfach die Ausgabe eines Tweets konfiguriert werden, so dass zusätzlich z. B. noch Kategorien oder Tags des jeweiligen Beitrages angehängt werden.

Somit müssen nur noch die beiden Facebook-Buttons in der yarpp-template-example.php ein wenig angepasst werden, damit sie ansprechend neben dem automatisch angezeigten Tweet-Button erscheinen. Diese Datei habe ich dann yarpp-template-example2.php benannt. Der Code sieht nun so aus:

<p style="float: right; margin-top: 12px;"><a name="fb_share" type="button" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title();?>">Teilen</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></p>
<p style="float: left; margin-top: 10px;"><iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink();?>&amp;=<?php the_title();?>" scrolling="no" frameborder="0"  style="border:none; width:450px; height:80px"></iframe></p>

<br style="clear:both;" />

<?php /*Example templateAuthor: mitcho (Michael Yoshitaka Erlewine)*/ ?><h3>Ähnliche Beiträge</h3><?php if ($related_query->have_posts())><dir style="list-style-type:square; color:black; font-weight:bold;">    <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--></li>    <?php endwhile; ?></dir><?php else: ?><p>Keine ähnlichen Beiträge</p><?php endif; ?>

Damit auch diese php-Datei optisch umgesetzt wird, muss sie noch unter den Einstellungen des Plugins YARPP im Dropdown-Menü angewählt werden:

Diese Darstellung gefällt mir und werde sie vorerst beibehalten.

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>

durch den folgenden ersetzt:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>

Der Beitrag beschreibt die Einbindung in meinem Theme und es handelt sich nicht um eine allgemeingültige Umsetzung. Für die richtige Umsetzung in Eurem Theme kann ich daher nicht garantieren.

Quelle Crazytoast.de:

• Facebook Share Button ohne Javascript und W3C valide
• So wird der Tweet Button W3C valide

Edit 13.02.2011

Ich verwende ab heute das Plugin von Sergej Müller Related Posts by Category. Das ermöglicht nun die Einbindung der Twitter und Facebook-Buttons in der single.php und ein separates Editieren in der yarpp-template-example.php ist nicht mehr erforderlich.