Einbau von validen Social Media Buttons

9. Januar 2011
7 Kommentare
WordPress
Facebook, SocialMedia-Buttons, Twitter, Validität
Sylvi

In dem vorigen Beitrag habe ich bereits über den validen “gefällt-mir”-Button geschrieben. Der manuelle Einbau der validen Social Media-Buttons von Tanja 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 »'); ?>
<?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()) ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&lang=de&count=horizontal&via=RebuSylvi&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();?>&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 Social Media-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()) ?>&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>&lang=de&count=horizontal&via=RebuSylvi&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();?>&=<?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();?>&=<?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 ich darin sehr einfach die Ausgabe eines Tweets konfigurieren, so dass zusätzlich z. B. noch Kategorien oder Tags des jeweiligen Beitrages angehängt werden.

Somit habe ich nur noch die beiden Facebook-Buttons in der yarpp-template-example.php ein wenig angepasst, 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();?>&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();?>&=<?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 ich sie noch unter den Einstellungen des Plugins YARPP im Dropdown-Menü auswählen:

Diese Darstellung gefällt mir und behalte sie vorerst.

Edit 11.01.2011

Eine Kleinigkeit habe ich an dem Script des Teilen-Buttons für Facebook noch geändert. Um mir die Anzahl der geteilten Links anzeigen zu lassen, habe ich den Code

<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();?>

Hinweis

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.

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.

Hinweis

Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist also möglich, dass sie in dem aktuellen Blog-Theme nicht mehr enthalten sind und somit die Darstellung bzw. Funktion nicht mehr existiert.

7 Kommentare

Pauli sagt:
9. Januar 2011 um 17:24 Uhr
Boah Sylvi… es ist Sonntag – mach Feierabend! ;-)
Klasse Beitrag und sehr verständlich geschrieben!
LG
Pauli
- Sylvi sagt:
  9. Januar 2011 um 17:35 Uhr
  Hej Pauli,
  das ist doch keine Arbeit in dem Sinne – für mich zumindest. Jetzt ist mein Urlaub auch zuende und die Beiträge werden wohl künftig wieder etwas spärlicher fließen ;-)
  Danke für Dein positives Feedback.
  Lieben Gruß
  Sylvi
Crazy Girl sagt:
9. Januar 2011 um 18:08 Uhr
Ach Du meine Güte, was is’n das für’n Akt? Hängt sich das Plugin doch glatt an the_content ran… gar nicht schön gelöst vom Plugin Author finde ich :-(
Hast Du aber wirklich klasse gemacht und eine super Anleitung dazu geschrieben *großes Lob*! :-)
- Sylvi sagt:
  9. Januar 2011 um 18:23 Uhr
  Ja etwas unglücklich und eine Weile hatte ich gehofft, dass ein Update von YARPP vielleicht irgendwann das “Problem” löst. Jetzt wollte ich aber nicht mehr darauf warten. Außerdem hätte ich den Plugin-Entwickler ja auch darauf aufmerksam machen können. Hatte aber angenommen, dass es vielleicht eine kleine Macke in meinem Theme sein könnte.
  Interessant ist, dass sich der Tweet-Button des Plugins WP Tweet Button wiederum über die “ähnlichen Beiträge” platziert – nur eben nicht die manuellen Einbindungen.
  Vielen Dank für Dein Lob, darüber freue ich mich sehr :-D
  Lieben Gruß
  Sylvi
Crazy Girl sagt:
10. Januar 2011 um 6:25 Uhr
Der Button des Plugins hängt sich wohl auch an the_content ran, genauso wie YARP. Anders ist es in meinen Augen nicht zu erklären, warum die über der manuellen Einbindung erscheinen, wenn die direkt unterhalb von the_content erfolgt.
Ehre wem Ehre gebührt :-)
- Sylvi sagt:
  11. Januar 2011 um 12:08 Uhr
  So wird es wohl sein und dafür kann dann der Theme-Ersteller auch nichts – was hab ich mein Theme deswegen schon verflucht…
  Tja, das ist wohl das Los der Plugin-Verwender, wie ich es bin und dann musste ich einen etwas unkonventionellen Weg finden.
  Danke Dir – bei solchen tollen Kommentaren macht es gleich doppelt so viel Spaß, das Ertüfftelte zu bloggen. Ich denke mir, da wird es vielleicht den ein oder anderen geben, der ebenfalls mit diesem Problem konfrontiert ist. Und das Rad muss nicht ständig neu erfunden werden…