Share-Buttons für Facebook & Co.

facebook-sharebutton

Auf diesen Artikel über den Facebook-Sharebutton bei schwindt-pr.com wies mich neulich meine Netzwerkkollegin Kerstin Hoffmann hin. Fand ich gut und habe das inzwischen in meinem Blog ausprobiert. Nun wollte ich die Buttons nicht ins Template schreiben und habe daher einen zusätzlichen Widget-Container in der functions.php eintragen. Der erscheint jetzt unter jedem Artikel.

Widget-Container hinzufügen

Dazu bekommt die functions.php zunächst eine neue Sidebar. Moderne Themes haben meist schon Widget-Einträge. Beim neuen Standardtheme Twenty Twelve findet man die Registrierfunktion der Widgets ab Zeile 204. Diese Funktion erhält eine Ergänzung nach gleichem Muster wie die vorhandenen Container. Das sieht dann beispielseweise so aus:

// innerhalb von function nameDesThemes_widgets_init()
register_sidebar( array (
   'name' => __( 'Social', 'nameDesThemes' ),
   'id' => 'social',
   'description' => __( 'eigene Beschreibung', 'nameDesThemes' ),
   'before_widget' => '<div id="share" class="social widget %2$s"> ',         
   'after_widget' => '</div>',
   'before_title' => '<h2>',         
   'after_title' => '</h2>',
) );    	

Damit ist das neue Widget registriert. Neben Namen, ID und Beschreibung sind auch bereits alle HTML-Tags definiert, die gebraucht werden. Eine eigene Klasse ist hilfreich, um dem Container ggf. ein anderes Styling zu verpassen.

Widget in der content-single.php

Exkurs: Seit WP 3.0 und dem Standard-Theme Twenty Ten ist in vielen Themes der eigentliche Loop-Bereich in ein Template_Part ausgelagert. Die Template-Seite ruft den ausgelagerten Inhalt mit dem Befehl get_template_part() auf und inkludiert ihn. Gegenüber der früher üblichen Einbindung per INCLUDEPATH bietet diese Methode mehr Flexibilität und macht die Templates-Parts zudem für Child-Themes verwendbar.

Danach kommt der Einbau des Widgets, das in diesem Fall nicht in der Seitenleiste sondern direkt im Inhalt steht – und zwar am Fuß des Beitrags. Da ich den modularisierten Aufbau der Einzelansichten mit get_template_part nutze, kommt der folgende Code in die content-single.php unter den Artikelinhalt (the_content).

<?php if ( is_active_sidebar( 'social' ) ) : ?>
    <?php dynamic_sidebar( 'social' ); ?>
<?php endif; ?>

Abgefragt wird, ob das Widget „social“ aktiv ist, also Inhalt hat und dann wird es eingebaut. Das erspart überflüssige HTML-Tags, falls das Widget leer sein sollte.

PHP-Code in Text-Widget

Fehlt nur noch der Inhalt des Widgets. Die flexiblen Text-Widgets eignen sich gut für individuelle Eingaben. Sie akzeptieren aber nur Text, maximal mit HTML- und CSS-Anweisungen. Um Link und Titel des jeweiligen Beitrags auszulesen, müssen es aber die in WordPress üblichen Anweisungen wie get_permalink() und the_title() sein. Dazu muss die Textbox PHP-Code ausführen können. Plugins gibt es dafür mehrere, ich wollte aber lieber eine Funktion in mein Theme schreiben. Diesen Schnipsel fand ich bei pixelbar.be:

add_filter('widget_text', 'gibmirphp', 99);

function gibmirphp($text) {
 if (strpos($text, '<' . '?') !== false) {
    ob_start();
    eval('?' . '>' . $text);
    $text = ob_get_contents();
    ob_end_clean();
 }
 return $text;
}

Zusammen mit dem Link-Code für die Social Media-Buttons funktioniert das Sharing meiner Artikel jetzt in Facebook, Twitter und Google+. Die Eingabe im Text-Widget sieht bei mir wie folgt aus:

Facebook:

<a title="In Facebook teilen - es öffnet sich ein neues Fenster" href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="_blank" rel="nofollow">teilen</a>

Twitter:

<a title="Auf Twitter weitersagen - es öffnet sich ein neues Fenster" href="http://twitter.com/home?status=<?php the_permalink(); ?>" target="_blank">twittern</a>

Google Plus

<a title="bei Google+ posten - es öffnet sich ein neues Fenster" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">teilen</a>

Die Fenster für die Eingabe öffnen sich in einer normalen neuen Seite. Auf Popups habe ich im Moment verzichtet. Vielleicht ändere ich das aber noch. Was meinen Sie denn dazu?

2 Kommentare zu „Share-Buttons für Facebook & Co.“

  1. Schöner Artikel. Danke. Diese Lösung probiere ich mir mal. Übrigens, habe Deine neue Seite noch gar nicht gesehen. Wirklich schön geworden! Ich glaube, ich komme Dich mal interwieven 🙂

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Scroll to Top