Auf fast jedem Blog findet man sie: Social Sharing Buttons. Es gibt hierzu unzählige Varianten und dutzende Plugins für die Umsetzung. Was ist aber, wenn ihr einen Designentwurf mit ganz speziellen Buttons bekommen habt, den ihr auch exakt so umsetzen müsst? Dann wird es schon schwierig ein fertiges Plugin zu finden, bei dem ihr die Styles entsprechend anpassen könnt.

Auch beim letzten WP Meetup in Berlin kam diese Frage mal wieder auf und ich hatte versprochen, meine Lösung vorzustellen. Dieses Versprechen möchte ich nun einlösen und euch allen den Code präsentieren.

Weniger ist mehr

Schon vor mehr als dreieinhalb Jahren hatte ich hier im Blog über Social Sharing Funktionen geschrieben und die Probleme bezüglich der Performance aufgezeigt. Auch heute bin ich noch immer der Meinung, dass es besser ist, eine solche Funktion selbst zu bauen, denn im Grunde ist es gar nicht so schwer. Aber ein paar Tricks habe ich natürlich auch wieder für euch dabei 🙂

Sharing-URL des Netzwerks finden

Bei einem Auftrag hatten ich die Anforderung, Sharing Buttons für die großen Netzwerke Facebook, Google+ und Twitter zu erstellen, aber auch welche für LinkedIn und XING, sowie Funktionen zum Teilen per E-Mail und auf mobilen Geräten per WhatsApp. Bei einer solchen Anforderung wird es schon schnell dünn bei der Auswahl der Plugins. Und dann noch eines zu finden, das gut aussieht, ist schon fast unmöglich.

Zuerst einmal musste ich die Sharing-URL für jeden Dienst in Erfahrung bringen. Zum Glück hat jedes Netzwerk eine Dokumentation hierfür. Ich möchte euch die Suche ersparen und gebe euch gleich mal die fertigen URLs für die Dienste:

# Facebook
https://www.facebook.com/sharer/sharer.php?u=[URL]&t=[TITLE]
# Google+
https://plus.google.com/share?hl=de&url=[URL]
# Twitter
https://twitter.com/intent/tweet?text=[TITLE]&url=[URL]
# LinkedIn
https://www.linkedin.com/shareArticle?&url=[URL]
# XING
https://www.xing.com/spi/shares/new?url=[URL]
# E-Mail
mailto:?subject=[TITLE & BLOGNAME]&body=[URL]
# WhatsApp
whatsapp://send?text=[URL]

Die Platzhalten wir [URL] müssen später natürlich noch durch die WordPress-Template-Funktionen ersetzt werden.

Einfaches Funktion zum Öffnen der Teilenfunktion

Nachdem wir nun wissen, wie eine solche URL aussieht, müssen wir hierfür einen Link erzeugen und überlegen, was bei einem Klick auf diesen Link passieren soll. Zuerst einmal zum HTML für einen solchen Link:

<a class="popup twitter" target="_blank" data-service="twitter" data-width="650" data-height="510" href="https://twitter.com/intent/tweet?text=<?php echo urlencode( esc_attr( get_the_title() ) ); ?>&amp;url=<?php echo urlencode( esc_attr( get_permalink() ) ); ?>"></a>

Wie ihr im Code sehen könnt, habe ich hier bereits die WordPress-Funktionen eingebaut. Vielleicht fallen euch auch die Data-Attribute auf. Diese geben an, um welchen Dienst es sich handelt und welche Größe das Popup-Fenster beim Öffnen haben soll. Diese Attribute verwenden wir gleich im JavaScript-Code. Das Target-Attribut sorgt dafür, dass der Link in einem neuen Tab öffnen würde, falls es zu einem JavaScript-Fehler kommt. Nun aber zum JS-Code:

jQuery( document ).ready( function ( $ ) {
	// popup function for social bookmarks
	$( '.sharing-links a.popup' ).click( function() {

		var width = $( this ).data( 'width' ),
			height = $( this ).data( 'height' ),
			service = $( this ).data( 'service' );

		var popup = window.open( $( this ).attr( 'href' ), service, 'toolbar=0,status=0,width=' + width + ',height=' + height );
		popup.focus();
		return false;
	} );

	var has_touch = ( 'ontouchstart' in window );

	if ( has_touch ) {
		$( '.whatsapp' ).show();
	}
} );

Mehr ist nicht notwendig, um beliebig viele Buttons auf der Seite in einem Popup öffnen zu lassen. In der 3. Zeile müssen wir den passenden CSS-Selektor für die Auswahl der Buttons angeben. Ich verwende eine unsortierte Liste mit der CSS-Klasse .sharing-links dafür. Es können auf einer Seite auch mehrere dieser Listen vorkommen (z.B. auf einer Archivseite).

Aber was genau bezweckt der Code? Er wertet die zusätzlichen Data-Attribute aus, bezieht hieraus die Größe des zu öffnenden Popup-Fensters, öffnet dieses Fensters, und bricht den Klick auf Links ab.

Ganz am Ende findet ihr noch einen kleinen Trick für den WhatsApp-Button. Leider ist es nicht möglich über den Browser festzustellen, ob WhatsApp auf dem Gerät installiert ist. Auch die Erkennung, ob es sich um ein Smartphone handelt, kann nicht exakt umgesetzt werden. In dem Projekt haben wir also einfach nur geprüft, ob es sich bei dem Display um einen Touchscreen handelt. Das würde zwar noch immer den WhatsApp Button unnötigerweise auf Tablets und Laptops mit Touchscreens anzeigen, aber das wurde in dem Projekt akzeptiert.

Das Styling der Buttons

Jetzt haben wir gesehen wie der HTML und der JavaScript Code aussieht. Mehr braucht es im Grunde auch nicht für die Teilen-Funktion. Aber natürlich wollen wir die Buttons auch schön gestalten. Hierzu möchte ich euch einen Trick verraten, wie ihr an die Bilder kommt und diese clever verwenden könnt.

Viele von euch werden wohl wissen, was CSS-Sprites sind und wie man sie verwendet. Einige kennen wohl auch die sogenannten Icon-Fonts. Ich möchte aber einen anderen Weg zeigen, der darüber hinaus auch auf mobilen Endgeräten mit hochauflösenden Displays gestochen scharfe Buttons darstellt. Wir verwenden hierfür SVG-Dateien.

SVG-Dateien für Buttons finden

Auch hier gibt es wieder eine Fülle an Quellen mit sehr unterschiedlich gestalteten Bildern. Wer Icon-Fonts verwendet, der wird wohl Font Awesome kennen. Genau diese Icons möchte ich hier einsetzen. Statt aber eine Icon-Font mit aktuell über 600 Icons einzubinden, die dadurch sehr groß sind, verwenden wir nur die Icons, die wir benötigen. Alle Icons von Font Awesome findet man in einem GitHub-Repository als PNG und SVG in schwarzer und weißer Farbe.

Nehmen wir uns also das Facebook-Logo von der Seite. Das könnten wir dann wie folgt in CSS verwenden:

.social-icons a.facebook {
	background-image: url("facebook.svg");
}

Das ist zwar recht einfach, aber es hat natürlich den Nachteil, dass der Browser für jedes Social-Sharing-Icon eine Bilddatei runterladen muss. Um dies zu verbessern, verwenden wir eine sogenannte Data-URL. Hierbei dir der Inhalt der Datei ins Base64-Format kodiert und der daraus resultierende String direkt verwendet. Das sieht dann wie folgt aus:

.social-icons a.facebook {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMzQzIDEydjI2NGgtMTU3cS04NiAwLTExNiAzNnQtMzAgMTA4djE4OWgyOTNsLTM5IDI5NmgtMjU0djc1OWgtMzA2di03NTloLTI1NXYtMjk2aDI1NXYtMjE4cTAtMTg2IDEwNC0yODguNXQyNzctMTAyLjVxMTQ3IDAgMjI4IDEyeiIvPjwvc3ZnPg==");
}

Jetzt ist zwar die CSS-Datei größer geworden, der Browser spart sich aber den Download der vielen einzelnen Bilder. Die etwas größere CSS-Datei fällt durch die Komprimierung, die ihr aktiviert haben solltet, nicht großartig ins Gewicht. Update: Falls ihr Less oder SASS verwendet, könnt ihr das auch automatisieren. Wie das geht verrate ich euch im Artikel Bilder mit Less oder Compass als Data-URL einbinden.

SVG-Bilder anpassen

Was ist nun aber, wenn euch die SVG-Dateien nicht gefallen, nehmen wir z.B. an, dass ihr statt schwarzer oder weißer, lieber graue Icons haben möchtet. Wenn es nur um die Farbänderung geht, dann gibt es einen einfachen Weg dafür. Hier seht ihr den SVG-Code für das Facebook-Logo:

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg>

Die SVG-Dateien für die Font Awesome Bilder sind wirklich sehr aufgeräumt und optimiert. Wie ihr sehen könnt, besteht die XML-Datei für das FB-Logo nur aus zwei Knoten. Dem SVG-Root-Noten und einem Path. Um nun die Hintergrundfarbe zu ändern, müsst ihr lediglich im Path-Knoten ein Fill-Attribut mit einer Farbe im hexadezimalem Wert angeben. Für dein Grau z.B. #a6a6a6. Der Code sieht danach also wie folgt aus (achtet auf das zusätzlichen Fill-Attribut am Ende):

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z" fill="#a6a6a6"/></svg>

Alternativ kann man natürlich auch Programme für Vektorgrafiken wie das professionelle Adobe Illustrator oder das Open Source Programm Inkscape verwenden. Aber für eine einfache Farbanpassung reicht auch die XML-Datei. Anschließend müsst ihr die veränderte SVG-Datei natürlich erneut mit Base64 kodieren.

Ergebnis

Wenn ihr alle Bilder kodiert habt und noch ein wenig CSS für die Ausrichtung und Verschönerung der Liste geschrieben habt, könnte das Ergebnis wie folgt aussehen:

Eurer Kreativität sind bei der Gestaltung natürlich keine Grenzen gesetzt. Wie wäre es z.B. mit farbigen Bildern beim „Hover“ über dem Bild. Erstellt hierfür dann einfach ein Bild mit der Hintergrundfarbe des jeweiligen Dienstes.

Damit ihr euch den gesamten PHP/CSS/JS Code mal ansehen könnt, habe ich diesen natürlich auch wieder bei GitHub hinterlegt. Es ist auch wieder ein Plugin, aber ich kann euch nicht empfehlen, dieses direkt zu verwenden. Es fügt die Buttons einfach nur an das Ende der Seite (wp_footer) ein, was vermutlich nicht so gut aussieht. In diesem Fall würde ich euch empfehlen, die beiden Funktionen in die functions.php Datei eures (Child-)Themes zu kopieren und den passenden CSS-Code in eure styles.css Datei zu schreiben. Den JavaScript Code solltet ihr auch in eine bereits bestehende Datei kopieren, da das zusätzliche Laden einer so kleinen JS-Datei nicht gut für die Performance der Seite ist.

Fazit

Wie ihr seht, ist es gar nicht so schwierig, individuell gestaltete Social-Sharing-Buttons zu erstellen. Falls auch ihr damit etwas gebastelt habt, würde ich mich über einen Screenshot in einem Kommentar sehr freuen.