Tutorial: Social Media Buttons selbstgemacht

Kaum eine Webseite kommt heutzutage noch ohne sie her. Worum es geht? Um Like-Buttons, Share-Buttons, Like-Counter, Benutzerbilder, usw. – aus der heutigen Netzlandschaft sind sie kaum noch wegzudenken.

Und deshalb möchte ich euch heute zeigen, wie man die Teilen- und Liken-Funktionalitäten von Facebook und Twitter sowie Benutzerbilder von Gravatar in das eigene Website-Theme einbaut.

Ich sage bewusst “Funktionalitäten”, weil ich nicht zeigen möchte, wie man die fertigen Standardkomponenten nutzt, sondern wie man die Kernfunktionalitäten anspricht, sodass man hinterher in der Gestaltung des Like-Counters zum Beispiel ganz frei agieren kann.

Wie das dann aussehen kann, wenn man in der Gestaltung der Social-Funktionalitäten ganz frei ist, könnt ihr in dem Artikelbild oben-links unter der Unterschrift dieses Artikel sehen.

Facebook Share-Button und Share-Counter einbinden

Das HTML-Grundkonstrukt, dass wir mit den Facebook-Funktionalitäten “Teilen” (Share) und dem Zähler, wie oft die Seite geteilt wurde (Share-Counter), belegen wollen ist minimal und besteht im Prinzip nur aus einem Link (<a>-Tag).

Die Basis auf die wir in diesem Tutorial aufsetzen wollen, sieht wie folgt aus:

<a data-url="{url}" href="{share-url}" class="share-facebook">{counter}</a>

Bei Klick auf den Link, soll die aktuelle Seite geteilt werden bzw. sich das Teilen-Dialogfenster von Facebook öffnen. Dies ist dadurch zu erreichen, eine passende Url in dem href-Attribut zu generieren.

Die Struktur der Facebook-Url ist recht simpel aufbaut.

http://www.facebook.com/share.php?u={url}

Der {url}-Platzhalter muss lediglich durch die Url der Seite ersetzt werden, die geteilt werden soll. Ebenso setzen wir die Url der Seite in das data-url-Attribut, welches wir später zum Anzeigen des Link-Counter brauchen. Bezogen auf unseren Beispiel-Code könnte das so aussehen:

<a data-url="http://code-bude.net" href="http://www.facebook.com/share.php?u=http://code-bude.net" class="share-facebook">{counter}</a>

Klickt man nun auf den Link, öffnet sich der Facebook-Teilen-Dialog.

Um nun anzeigen zu können, wie oft diese Seite schon geteilt wurde, müssen wir die Informationen für die entsprechende Seite von Facebook abholen. Um den Seitenaufbau unserer eigenen Seite nicht auszubremsen, soll dies asynchron per Javascript/jQuery geschehen. Würden wir die Daten zum Beispiel per PHP beschaffen, dann würde sich bei Problemen seitens Facebook unser Seitenaufbau ebenfalls verlangsamen und im schlimmsten Fall sogar abbrechen. Durch den asynchronen Ladevorgang wäre der schlimmste Fall, dass die Daten, wie oft die Seite geteilt wurde, schlichtweg nicht geladen werden könnten. Ich denke dies ist die weitaus bessere Variante.

Die Anzahl der Likes für eine Url kann mittels folgender Facebook-Url abgefragt werden.

http://graph.facebook.com/?ids={url}

Der {url}-Platzhalter muss durch die entsprechende Url der Seite ersetzt werden, deren Like-Anzahl bestimmt werden soll. Starten wir die Abfrage nun exemplarisch für diesen Blog (http://graph.facebook.com/?ids=http://code-bude.net) dann erhalten wir folgendes JSON-Ergebnis:

{
    http://code-bude.net:
    {
        id: http://code-bude.net,
        shares: 18
    }
}

Nun benötigen wir ein nur noch ein kleines Script, welches das JSON-Objekt von Facebook abfragt und den Wert der Eigenschaft “shares” aus dem Json-Antwortcode in unser HTML-Grundkonstrukt schreibt. Hierzu legen wir möglichst kurz vor dem schließenden Body-Tag () folgenden Code an.

<script>
	$(document).ready(function() {
			$.each($('.share-facebook'), function(i, v){
		 		var url = $(this).attr('data-url');
		 		var parent = $(this);
		 		if (url !== undefined)
		 		{
		 			$.getJSON("http://graph.facebook.com/?ids="+url+"&callback=?", function(data){
		 				if (data[url].shares !== undefined)
		 				{
		 					parent.text(data[url].shares);
		 				}
		 			});
		 		}
		 	});
	});
</script>

Dieses Script durchläuft jedes Html-Element, dass die Klasse share-facebook hat. Schließlich können wir ja mehr als einen Facebook-Teilen-Button auf unserer Seite haben. Für jeden Button/Link lesen wir die entsprechende Url aus dem data-url-Attribut und holen für diese das JSON-Objekt mit der Anzahl der Shares ab. Danach schreiben wir diese in den jeweilige HTML-Grundkonstrukt. Nach der Ausführung des obigen Javascripts würde unser ursprüngliches HTML-Konstrukt nun wie folgt aussehen:

<a data-url="http://code-bude.net" href="http://www.facebook.com/share.php?u=http://code-bude.net" class="share-facebook">18</a>

Den Link bzw. unser HTML-Grundkonstrukt können wir nun noch nach belieben um weiteren HTML-Code erweitern und/oder mit CSS gestalten.

Twitter Share-Button und Counter einbinden

Das Einbinden der Twitter Share- bzw. Teilen-Funktionalität gestaltet sich ähnlich wie der Aufbau des Codes für Facebook, den wir weiter oben im Artikel bearbeitet haben.

Wir fangen wieder mit einem minimalen HTML-Grundkonstrukt, welches lediglich aus einem Link (<a>-Tag) besteht. Der Code mit dem wir starten sieht wie folgt aus:

<a data-url="{url}" href="{share-url}" class="share-twitter">{counter}</a>

Damit das Teilen- / Tweet-Fenster aufgeht müssen wir auch hier wieder eine Url generieren. Bei Twitter muss jedoch nicht zwingend eine Url angegeben werden, sondern auf Wunsch auch ein ganzer Text. Die Grundstruktur der Twitter-Url sieht wie folgt aus:

http://twitter.com/share?url=/&text={url/nachricht}

Der {url{nachricht}-Platzhalter muss nun durch die Url oder einen beliebigen Text ersetzt werden. Im Unterschied zu Twitter muss dieser Textblock jedoch enkodiert werden. Ich nutze in diesem Beispiel hierzu die PHP-Funktion “urlencode()”. Da wir für unser Beispiel eine Url-Teilen wollen und dessen Tweet-Anzahl messen wollen, füllen wir auch hier wieder das data-url-Attribut mit der Url. Bezogen auf unseren Beispiel-Code könnte das so aussehen:

<a data-url="http://code-bude.net" href="http://twitter.com/share?url=/&text=<?php echo urlencode('Share-Button Tutorial - gelesen auf http://code-bude.net'); ?>" class="share-twitter">{counter}</a>

Somit hätten wir die Teilen- bzw. Twitter-Funktionalität nun implementiert.

Für die Anzeige der Anzahl der Tweets zu dieser Url nutzen wir wieder ein kleines Javascript im Footer der Seite. Hierdurch schaffen wir eine Asynchronität und verhindern, dass Twitter die Ladezeiten unserer Seite effektiv beeinflussen kann.

Die Anzahl der Tweets können wir mit folgender Url abrufen:

http://urls.api.twitter.com/1/urls/count.json?url={url}&callback=?

An der Stelle des {url}-Platzhalters muss die Url der Seite eingefügt werden. Setzen wir für einen Test die Url dieses Blogs ein (http://urls.api.twitter.com/1/urls/count.json?url=http://code-bude.net&callback=?), erhalten wir folgendes JSON-Ergebnis:

/({"count":35,"url":"http:\/\/code-bude.net\/"});

Jetzt benötigen wir, wie schon bei der obigen Facebook-Variante, wieder ein kleines Javascript, dass uns das JSON-Objekt abholt und den Wert der “count” Eigenschaft in unser HTML-Grundkonstrukt schreibt.

<script>
	$(document).ready(function() {

			$.each($('.share-twitter'), function(i, v){
 		 		var url = $(this).attr('data-url');
 		 		var parent = $(this);
 		 		if (url !== undefined)
 		 		{
						$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?",
				  function (data) {
		     			    if (data.count !== undefined)
 		 				{
 		 					parent.text(data.count);
 		 				}
					});

	         		}
		 	});
	});
</script>

Das Script durchläuft alle Html-Elemente, deren Klasse “share-twitter” ist. Für jedes dieser Elemente lesen wir die geteilte Url aus dem data-url-Attribut und holen das JSON-Objekt ab, welches die Anzahl der Tweets enthält.Dann schreiben wir diesen in unser HTML-Grundkonstrukt. Wenn alles geklappt hat, sollte unser HTML-Code (bei Anzeige in einem Browser und nach Ausführung des Javascripts) wie folgt aussehen:

<a data-url="http://code-bude.net" href="http://twitter.com/share?url=/&text=<?php echo urlencode('Share-Button Tutorial - gelesen auf http://code-bude.net'); ?>" class="share-twitter">35</a>

Wie auch schon bei der Facebook-Variante kann dieses HTML-Grundkonstrukt nun nach Belieben um HTML-Code erweitert und mit CSS umgestaltet werden.

Benutzerbilder mittels E-Mail-Adressen abrufen

Wenn die eigene Webseite eine Kommentarfunktion oder sogar einen eigenen Communitybereich mit Benutzerprofilen hat, kann man sich den Service von Gravatar.com zu nutze machen. Auf Gravatar können sich Internetnutzer mit ihrer E-Mail-Adresse anmelden und ein Profilbild hinterlegen. Alle Webseiten, die wiederum auf den Gravatar-Dienst zugreifen, können nun das vom Nutzer hinterlegte Profilbild abfragen. So kann man, sofern der Nutzer bei Gravatar registriert ist, ein passsendes Profilbild anzeigen, wenn dieser auf der eigenen Webseite zum Beispiel einen Kommentar schreibt.

Die Abfrage des Profilbildes gestaltet sich relativ einfach. Hierzu muss nur folgende Url mit Parametern versehen werden:

http://www.gravatar.com/avatar/{md5-email}.jpg?s={size}&d={fallback-img}

Nachfolgend möchte ich kurz auf die 3 Parameter eingehen, die für obiges Beispiel nötig sind.

{md5-email}: Entspricht dem MD5-Hash der E-Mail-Adresse des Nutzers/des Kommentators
{size}: Gibt die Kantenlänge (in px) des Benutzerbildes an, sodass man sich ein passendes (quadratisches) Nutzerbild liefern lassen kann.
{fallback-img}: Dieses Bild wird angezeigt, wenn zu der E-Mail-Adresse kein Benutzerbild auf Gravatar hinterlegt ist.

Ein Beispielaufruf könnte wie folgt aussehen:

http://www.gravatar.com/avatar/e02892eff1253a127dc8e0f28e1d630f.jpg?s=80&d=http://code-bude.net/wp-content/uploads/2011/05/PICT2290_-300x199.jpg

Diese Adresse kann nun im src-Attribut eines Bildes angegeben werden, um das Benutzerbild anzuzeigen.

<img src="http://www.gravatar.com/avatar/e02892eff1253a127dc8e0f28e1d630f.jpg?s=80&d=http://code-bude.net/wp-content/uploads/2011/05/PICT2290_-300x199.jpg" />

Fazit

Mit ein bisschen Aufwand lassen sich so recht indivuduelle Umsetzungen der Teilen-Funktionalitäten erreichen und innerhalb weniger Minuten die eigene Seite mit ein paar “sozialen Komponenten” versehen. Falls während des Lesens des Artikels noch Fragen aufgekommen sind, schreibt mir einfach einen Kommentar.