Tutorial: Social Media Buttons selbstgemacht

diy social media buttonsKaum 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

facebook iconDas 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

twitter iconDas 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

gravatar iconWenn 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.

23 Kommentare

  1. Kevinsays:

    Danke für die Tipps. Hat mir echt geholfen!

  2. Marcsays:

    Hallo,

    bei mir funktioniert das Ganze nicht, wenn der FB-Counter “0” sein müsste. Dann wird im Browser nur “{counter}” angezeigt. Bei Twitter gibt’s das Problem dagegen nicht.

    Wenn das hier noch jemand lesen sollte, würde ich mich über einen kleinen Tipp freuen! :)

    Danke
    Marc

  3. Hallo, vielen dank für den Artikel, bei mir hat es geklappt! Ich freue mich auf mehr Tipps LG

  4. Dixl Webdesignsays:

    Hallo,
    Fehler gefunden. Avira Browser Safety hat die Abfrage blockiert. Ich finde es recht komisch das die Abfrage zu Facebook nicht blockiert wurde aber die zu Twitter. Nochmal recht herzlichen Dank für die Hilfe.
    Nun muss ich mir das ganze nochmal für Google+ zusammen googln.

    Grüße zum Wochenende Peter

    • Hallo Peter,

      schön, dass es jetzt läuft. Was Google+ angeht – es gibt keine offizielle API die man da anzapfen kann. Deshalb hatte ich Sie hier im Artikel auch nicht erwähnt. Habe aber gestern Abend noch einen inoffiziellen Weg gefunden, den ich heute Abend noch hier im Blog vorstellen werde.

      Viele Grüße

    • Hallo Peter,

      ich habe mir das noch mal angeschaut. Da Google+ die Infos nicht per GET sondern per POST Request rausgibt, fällt eine Lösung mittels Javascript weg. (Aufgrund des Verbots von Cross-Domain-Requests.)

      Eine Umsetzung, so wie ich es für Twitter und Facebook geschrieben habe, ist also nicht möglich. Denkbar ist jedoch eine Lösung mittels ASP oder PHP. Dies hat sogar schon jemand gemacht. Ein Beispiel findest du hier:
      http://johndyer.name/getting-counts-for-twitter-links-facebook-likesshares-and-google-1-plusones-in-c-or-php/

  5. Hallo, genau danach habe ich gesucht. Nur leider funktioniert es bei mir auch nicht. Auch auf der jsfiddle Seite steht ja im Resultat nur “{Counter}” und nicht die entsprechende Zahl. Was läuft da schief. Freu mich auf eine Antwort.

    Gruß Peter

    • Bei mir läuft das hier in den Kommentaren verlinkte Fiddle immer noch ohne Probleme. Ich verwende den Chrome Browser. Welchen verwendest du? Vielleicht handelt es sich um ein browserabhängiges Problem. In diesem Falle würde ich mir das ganze dann noch einmal im Problem-Browser anschauen und mich melden, wenn ich eine Lösung hab.

      Zudem könntest du, wenn du auf der Fiddle Seite bist, mal F12 drücken bzw. die Entwicklerkonsole deines Browsers öffnen und mal schauen, ob es dort irgendwelche Javascript Fehlermeldungen gibt.

      • Dixl Webdesignsays:

        Hallo, erstmal vielen Dank für die schnelle Antwort. Darauf hätte ich selber kommen können und das Script mal in verschiedenen Browsern testen. Ich hatte es mit dem IE9 probiert und da funktionierte es nicht. Nun habe ich es im Firefox probiert und siehe da es funktioniert. Auch der Safari machte das was er sollte. Der IE hat scheinbar ein Problem mit dem Script.

        Gruß Peter

        • So, ich habe das mal im IE getestet. Ziemlich biestig, aber es läuft! Hier schon einmal ein aktualisiertes Fiddle: http://jsfiddle.net/EThh5/8/

          Das Problem war, dass der IE mit den XDomainRequest / Cross-Domain-Requests rumgezickt hat. Beheben lässt sich das Ganze, wenn man der anfragenden URL noch ein “&callback=?” anhängt. Dann läufts auch im IE und die anderen Browser stört die Erweiterung nicht.

          Gib mal Bescheid, ob es auch bei dir geklappt hat. Den Blog-Artikel hier, passe ich gleich noch an.

          • Dixl Webdesignsays:

            Jo, danke so funktioniert es tatsächlich auch im IE.Sehr schön Hürde 1 wäre genommen. Nun den Twitter Counter. Damit komme ich gar nicht zurecht. Hab schon einiges experimentiert aber ohne Erfolg. Da ist es bei mir so das ich in allen Browsern nur dieses {counter} angezeigt bekomme. Ich habe ein entsprechendes Fiddle angelegt wie ich es in meiner Testseite eingebaut habe. http://jsfiddle.net/FVJYC/2/
            Vielen Dank und Grüße Peter

            • In deinem Fiddle haben noch folge schließende Klammern und ein Semikolon gefehlt: “});”

              Habe mal dein Fiddle aktualisiert: http://jsfiddle.net/FVJYC/4/
              Das sollte jetzt laufen. Kannst dieses ja mal mit deinem Vergleichen, dann fällt die vielleicht in’s Auge wo es gehakt hat.

              • Dixl Webdesignsays:

                Danke das funktioniert und da habe ich mehrmals die Klammern gezählt. Unglaublich!
                Vielen Dank für die tollen Scripte. Kennst Du zufällig noch den passenden Code Snippet für G+? Oder vielelicht einen Tipp?
                Grüße Peter

                edit:// Leider klappt es nun im Firefox nicht, kannst du noch mal schauen? Hier das Fiddle: http://jsfiddle.net/FVJYC/4/

                • Hi,

                  ich kann dein Problem leider nicht nachvollziehen. Habe das von dir genannte Fiddle erfolgreich im IE9, IE11, Chrome 34, Opera 19 und Firefox 27 testen können.

                  Das sollte eigentlich im Firefox laufen. Umso komischer, dass es bei dir in den anderen Browsern ja läuft. Könntest du mal das Fiddle im Firefox öffnen, dann F12 drücken. In der Developer-Bar die sich öffnet gehst du im Hauptreiter/Tab auf “Konsole” und dann im Unterreiter auf “All”. Nun drückst du in der Menüleiste von Fiddle einmal auf “Run”. Bekommst du nun irgendwelche Meldungen jeglicher Art in der Developer-Konsole angezeigt? Wenn ja, welche?

  6. Thomassays:

    Hi Raffi,

    verstehe ich dich richtig, dass es mit deinem Script möglich ist, die Buttons individuell zu gestalten? Zum Beispiel statt einem blauen, einen roten Facebook-Button einzubinden?

    Danke & VG
    THomas

    • Das hast du korrekt aufgefasst. Die Gestaltung ist komplett frei. Da kannst du machen was du willst und dich austoben. Im zweiten Schritt wird dann die Funktionalität per JavaScript und Links angebunden.

  7. Felixsays:

    Alle Scripte (Twitter, Facebook, Pinterest) gehen nicht. Mit der Url-Abfrage kann ich mir die Zahl holen, aber das Script packt die Zahl einfach nicht in den {counter}.
    Ich habe das auch gerade nochmal bei einer Blankoseite ausprobiert. Kann es sein, dass das JScript Fehler hat?

    • Hi Felix,

      ich habe mir das noch mal angeschaut. Der Code, so wie er hier steht, läuft bei mir ohne Probleme. Siehe hier: http://jsfiddle.net/EThh5/ – hab dir mal ein Fiddle angelegt. Das sollte bei dir auch laufen.

      Hast du die Webseite schon online, wo du das eingebaut hast/einbauen wolltest? Dann könnte ich mir das direkt noch mal live anschauen und gucken, wo es bei dir hakt.

  8. Felixsays:

    Danke für diese tolle Anleitung.
    Das mit den Urls um die Counts abzufragen ist schon mal ne feine Sache. Für Pinterest ist es übrigens diese Url: http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=

    Leider funktioniert das Javascript nicht, dass mir das Ergebnis in {Counter} schreibt.
    Hast du da zufällig ne kleine Demo, die mir zeigt wo der Fehler liegt? Jquery wird vorher geladen.

    Tausen Dank schonmal.

    • Was genau klappt nicht. Das JavaScript aus meinem Artikel oder das JavaScript in Kombination mit der Pinterest URL? Schaue mir das heute Abend gern mal an, wenn du mir sagst wo es hakt.

  9. Danke für die Tipps. Viele dieser Schritte löse ich mit Plugins. Mit dem Code geht es natürlich auch sehr gut.

Schreibe einen Kommentar zu Patrick Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Sie dient nur dem Spamschutz.