WordPress und die sozialen Netze: Teilen-Buttons in das eigene Theme einfügen

Ohne die berühmten “Teilen”-Buttons kommt heutzutage kaum noch eine Website aus. Unter WordPress kann man hierfür selbstverständlich ein Plugin installieren. Die Auswahl ist geradezu riesig und mit Sicherheit ist das auch die einfachste Lösung. Verantwortungsbewusste Administratoren sollten dabei jedoch stets bedenken, dass mit einer steigenden Zahl an installierten Plugins irgendwann die Performance einer Webseite massiv gedrosselt wird. Die hier thematisierten Teilen-Links lassen sich ohne Plugin realisieren. Wo das geht, sollte man es auch tun. Im folgenden Beitrag gehen wir beide Wege. Im ersten Teil beschäftigen wir uns mit der manuellen Integration der wichtigsten Buttons (Twitter, Facebook und Google+). Im zweiten Teil schauen wir uns ein wirklich gutes Plugin dafür an. In Theme-Dateien rumwerkeln ist immerhin nicht jedermanns Sache…

Der manuelle Teil: “Share This”-Buttons manuell erstellen und in das WordPress-Theme einfügen

Zuerst einmal müssen wir uns den Code der jeweiligen Buttons von den Entwicklerseiten, in unserem Beispiel von Twitter, Facebook und Google+ besorgen. Hierbei ist darauf zu achten, den Button-Code vom Javascript zu trennen, da wir das benötigte JavaScript für eine bessere Performance in den Fußbereich (Footer) der Webseite integrieren werden. Im folgenden Codebeispiel habe ich bereits den Button-Code vom JavaScript getrennt. Diesen Code gilt es in die functions.php des Themes (wp-content/themes/Ihr Theme) einzufügen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function andys_share_this(){
$content = '';
if(!is_feed() && !is_home() && is_page() ) {
$content .= '<div class="share this">
 <a href="http://twitter.com/share" data-count="horizontal">Tweet</a>
 <div class="facebook-share-button">
 <iframe src="http://www.facebook.com/plugins/like.php?href='.
 urlencode(get_permalink())
 .'&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=light&amp;height=21"
 style="width:150px; height:21px;"
 allowTransparency="true"></iframe>
 </div>
 <div class="google-share-button">
 <g:plusone size="medium"></g:plusone>
 </div>
 </div>';
 }
 return $content;
 }

Der obige Code fügt nun die drei Buttons für Twitter, Facebook und Google+ in Verbindung mit dem Code für das JavaScript und den Funktionsaufruf in das Theme ein. Das hierfür benötigte JavaScript fügen wir – ebenfalls per PHP-Funktion – nun automatisch in den Footer der Webseite ein. Kopieren Sie also folgende Codezeilen ebenfalls in die functions.php ihres Themes.

1
2
3
4
5
6
7
8
9

function andys_share_scripts() {
?>
<!-- Share this Scripts -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 
<?php }
 
add_action('wp_footer', 'andys_share_scripts');

Öffnen wir nun das style.css unseres Themes, um einige wenige Zeilen CSS zu ergänzen, die dafür sorgen werden, dass unsere Buttons schön nebeneinander erscheinen und keine Elemente der Webseite stören.

1
2
3

.share-this {display: block; margin: 10px 0px;}
.share-this:after { content:"."; display:block; height:0; clear:left; visibility:hidden;}
.twitter-share-button, .facebook-share-button, .google-share-button {float: left; display: inline-block;}

Als nächstes platzieren wir den Funktionsaufruf, also eine kleine Zeile Code, in die Theme-Dateien an die Stelle, an der die Buttons erscheinen sollen. Hierfür bieten sich die Theme-Dateien single.php und page.php an.

1

<?php echo andys_share_this(); ?>

Geschafft! Sie haben die drei wichtigsten Social Buttons ganz ohne Plugin in Ihre WordPress-Seite integriert. Wollen Sie es bequemer, lesen Sie weiter…

Der automatisierte Teil: Das 2 Klick Social Media Buttons Plugin

Ein wirklich gutes Plugin zum Hinzufügen der Social Media Buttons ist das “2 Click Social Media Buttons” Plugin für WordPress.

Natürlich gibt es für den angestrebten Zweck eine Vielzahl weiterer Plugins im WordPress-Repository. Der Vorteil des von mir gewählten Plugins besteht jedoch darin, dass es stets die immer verwirrenderen Datenschutzbestimmungen in Deutschland bedient. Hier kann es herunter geladen werden.

2 Click Social Media Buttons unterstützt derzeit Facebook-Like/Empfehlen, Twitter, Flattr, Xing, Pinterest, t3n, LinkedIn und Google+. Alle Einstellungen werden bequem über einen Optionen-Dialog vorgenommen. Die Buttons aller Dienste lassen sich einzeln an- oder abschalten. Für den Besucher der Seite gestaltet sich die Nutzung etwas ungewohnt. Die Buttons der Dienste erscheinen an konfigurierbarer Stelle, zumeist wird man dafür die etablierte Position unter dem Beitrag wählen. Ein Klick auf den Button aktiviert diesen jedoch zunächst nur und weist den Verwender darauf hin, dass es einen weiteren Klickes bedarf, um tatsächlich die “trackbare” Aktion des Likens, Pinnens, Twitterns etc. zu tätigen. Ist der Umstand einmal verstanden, wird diese Art der Einbindung unter Ihrer Besucherschaft eher für eine positive Wahrnehmung sorgen.

Fazit:

Mit nur wenigen Minuten Aufwand können sie die wichtigsten Social Media-Buttons zu Ihrem WordPress-Theme hinzufügen, sodass künftig die Artikel ihrer Webseite fleißig in die diversen sozialen Netzwerke verteilt werden können. Welche der beiden Varianten Sie bevorzugen, hängt zum einen von den persönlichen Fähigkeiten, zum anderen von der Zahl der sonstigen Plugins und der Auslastung Ihrer Website ab. Kleinere Blogs mit überschaubarem Traffic und wenigen weiteren Plugins können den bequemeren Weg gefahrlos gehen.

(dpe)