WordPress Social Sharing Links im Theme selbst einbauen

In diesem ausführlichen Tutorial erkläre ich, wie du in wenigen Schritten deine eigenen WordPress Social Sharing Links erstellen und mit einer selbst programmierten Template-Funktion in deinem WordPress Theme integrieren kannst.

Social Sharing Buttons und der Datenschutz

Die Einbindung von Social Sharing Buttons auf deiner WordPress Website ist mit einer Vielzahl von Plugins möglich. Sehr häufig entsprechen diese Plugins aber nicht dem deutschen Datenschutz, weshalb du nicht wahllos ein Plugin installieren solltest.

Problematisch ist zum Beispiel der Datenschutz beim Share Button von Facebook. Mit dem offiziellen Code Konfigurator von Facebook wird für den Teilen-Button die komplette JavaScript Facebook SDK eingebunden.

Damit werden bereits mit der bloßen Anzeige des Buttons die Daten deiner Website-Besucher an Facebook übertragen. Da deine Besucher dieser Übertragung nur schlecht vor dem Aufruf der Website  zustimmen können, ist der Button unter anderem mit der neuen DSGVO nicht vereinbar.

Shariff Wrapper und statische Sharing Links

Eine mögliche Lösung ist Shariff, mit dem die Sharing Buttons erst nach einem zusätzlichen Klick und damit der Zustimmung des Besuchers eingebunden werden. In meinem nächsten Beitrag werde ich deshalb das beliebte Shariff Wrapper Plugin noch genauer vorstellen.

Eine zweite Möglichkeit ist die Nutzung von einfachen Textlinks zum Teilen, welche inzwischen die meisten sozialen Netzwerke bereitstellen. In den Parametern des Links kann zumeist die URL und Text des geteilten Beitrags übergeben werden.

www.facebook.com/sharer/sharer.php?u={URL}&t={TEXT}
twitter.com/intent/tweet?text={TEXT}&url={URL}
plus.google.com/share?url={URL}&t={TEXT}
pinterest.com/pin/create/button/?url={URL}&description={TEXT}
www.xing.com/spi/shares/new?url={URL}

Mit diesen statischen Links werden keine Daten übertragen und es erfolgt kein Tracking. Erst mit dem Klick auf einen Link wird man auf die Teilen-Funktion des Netzwerks weitergeleitet.

In den folgenden Code-Beispielen zeige ich, wie du die Social Sharing Links in deinem WordPress Theme unter jedem Beitrag automatisch anzeigen lassen kannst.

Eigene Template-Funktion für Share Buttons

Als Erstes legen wir eine neue Funktion an, welche unsere Social Sharing Links ausgeben soll. Du kannst den Code in die functions.php deines eigenen Themes kopieren oder auch in einem Child Theme nutzen, falls du ein fremdes Theme anpasst.

function theme_slug_social_sharing() {

	// Get current page URL.
	$page_url = get_permalink();

	// Get current page title.
	$page_title = get_the_title();

}

In diesem ersten Schritt legt die Funktion nur zwei Variablen an, welche die URL und den Titel der aktuellen Seite auf der Website beinhalten. Diese Variablen werden später in den Sharing Links an die jeweiligen sozialen Netzwerke übergeben.

Die Share Buttons sollen unter einzelnen Beiträgen und statischen Seiten sichtbar sein. Unsere Template-Funktion kommt also innerhalb des WordPress Loops zum Einsatz. Wir können deshalb die WordPress Funktionen get_permalink() und get_the_title() ohne Angabe einer Post ID aufrufen, womit sie URL und Titel des aktuellen Posts (im Loop) zurückgeben.

Array mit Social Sharing Links erstellen

Als Nächstes definieren wir ein Array, welches die komplette URL und Beschriftung der Social Sharing Links beinhalten soll. Aus Gründen der Übersichtlichkeit beschränke ich mir hier auf Facebook, Twitter und GooglePlus. Andere Netzwerke sind natürlich genauso möglich.

// Create Array with Social Sharing links.
$links = array(
    'facebook' => array(
        'url'  => 'https://www.facebook.com/sharer/sharer.php?u=' . $page_url . '&t=' . $page_title,
        'text' => 'Facebook',
    ),
    'twitter' => array(
        'url'  => 'https://twitter.com/intent/tweet?text=' . $page_title . '&url=' . $page_url,
        'text' => 'Twitter',
    ),
    'googleplus' => array(
        'url'  => 'https://plus.google.com/share?url=' . $page_url . '&t=' . $page_title,
        'text' => 'Google+',
    )
);

Die ganze URL der Social Sharing Links setzen wir dabei aus der Share-URL des Netzwerks und unseren zwei Variablen $page_url und $page_title aus Schritt 1 zusammen.

HTML-Code für Social Sharing Buttons generieren

Als letzten Schritt müssen wir unsere Social Sharing Buttons nur noch ausgeben.

Wir durchlaufen dazu unser Array mit den Sharing Links in einer foreach-Schleife und generieren etwas HTML-Markup zur Anzeige der Links, welches wir in der Variable $html speichern. Meiner Meinung nach bietet sich hierfür eine Liste mit ul gut an.

// Create HTML list with Social Sharing links.
$html = '<ul class="social-sharing-links">';

foreach( $links as $key => $link ) {

    $html .= '<li>';
    $html .= 	'<a href="'. esc_url( $link['url'] ) .'" target="_blank">' . esc_html( $link['text'] ) . '</a>';
    $html .= '</li>';
}

$html .= '</ul>';

return $html;

Etwas schöner finde ich persönlich die Nutzung von sprintf() in der Schleife:

foreach( $links as $key => $link ) {
    $html .= sprintf( '<li><a href="%1$s" target="_blank">%2$s</a></li>',
        esc_url( $link['url'] ),
        esc_html( $link['text'] )
    );
}

Am Ende unserer Template-Funktion geben wir dann noch unseren HTML-Code mit return $html; als Return-Value zurück.

Den vollständigen Code aus allen drei Schritten findest du in diesem Github Gist.

Social Sharing Links im Theme anzeigen lassen

Du kannst nun deine fertige Template-Funktion im WordPress Theme ausgeben lassen. Als Template-Dateien für die Anzeige der Social Sharing Links bietet sich beispielsweise die single.php oder page.php in deinem WordPress Theme an.

<?php echo theme_slug_social_sharing(); ?>

Alternativ kannst du auch den Filter the_content nutzen, um deine Social Sharing Buttons automatisch an deine Beiträge und statische Seiten anzuhängen. Wichtig ist dabei die Überprüfung mit einer if-Abfrage, ob es sich um den Main Query und einen einzelnen Post handelt, damit die Share Buttons nicht an unerwünschten Stellen auftauchen.

function theme_slug_add_social_sharing_to_content( $content ) {

	// Only display sharing links in single post and pages.
	if ( ! ( is_singular() && in_the_loop() && is_main_query() ) ) {
		return $content;
	}

	return $content . theme_slug_social_sharing();
}
add_filter( 'the_content', 'theme_slug_add_social_sharing_to_content' );

Die Funktion kannst du ebenfalls in die functions.php des (Child) Themes packen.

WordPress Social Sharing Links gestalten

In deinen Posts sollten nun die Social Sharing Links als einfache Liste zu sehen sein:

• Facebook
• Twitter
• Google+

Das Teilen des Beitrags ist damit schon problemlos möglich.

Mit etwas CSS in der style.css können wir nun das Styling der Links anpassen und diese beispielsweise als Buttons nebeneinander darstellen lassen.

ul.social-sharing-links {
	display: flex;
	padding: 0;
	list-style: none;
}

ul.social-sharing-links li a {
	display: block;
	margin-right: 0.5em;
	padding: 0.25em 1em;
	border-radius: 5px;
	color: #fff;
}

ul.social-sharing-links li a[href*="facebook.com"] {
    background: #3b5998;
}

ul.social-sharing-links li a[href*="twitter.com"] {
    background: #55acee;
}

ul.social-sharing-links li a[href*="plus.google.com"] {
    background: #dc4e41;
}

Die horizontale Ausrichtung der Listenpunkte gelingt mit Flexbox und mit einigen wenigen Zeilen sind die Links schnell als Buttons dargestellt. Danach können die Farben der Buttons noch für das jeweilige soziale Netzwerk angepasst werden.

Das Ergebnis sollte nun in etwa so aussehen:

Fazit

Zur Anzeige von Social Sharing Buttons benötigt man nicht zwangsläufig ein Plugin. Einfache Textlinks zum Teilen können auch mit wenig Code direkt im Theme integriert werden, wenn auf zusätzliche Features und Optionen verzichtet werden kann.

Eine fehlende Funktion ist die Anzeige eines Share Counts in den Buttons. Deshalb stelle ich bald noch das bereits erwähnte Plugin Shariff Wrapper vor, mit dem die Share Buttons auch mit Anzahl der Shares datenschutzkonform eingebunden werden können.