Heute ergänzen wir den Blog um zwei wichtige Elemente für das Bestehen in Sozialen Netzwerken. Zum einen die "Folge Mir" Buttons (auf dem Bild im roten Kreis), zum anderen die "Like/Share" Buttons (auf dem Bild im grünen Kreis). Für beides gibt es Defaults von Google bzw. den jeweiligen Seiten, diese sagen mir persönlich aber optisch nicht zu. Ersteres werden wir als reine Bilder mit Links als Widget einbinden, zweiteres am Ende jedes Postings. Wir konzentrieren uns hierbei auf Facebook, Google+, Twitter und das native Sharing, also z.b. Feed, Email. "Folge Mir" implementieren wir ohne Tracker, aber "+1" ohne Tracker scheint mir zu wenig komfortabel. Natürlich gibt es so etwas wie 2-Klick-Likes, aber wer auf diese Anonymität Wert legt hat meist auch noch irgendwelche Skript-Blocker installiert. Zu diesem Zweck empfehle ich übrigens Ghostery.
1. Follow Me
Für die Follow-Buttons fügen wir im Layout ein neues Html/JavaScript-Gadget hinzu und verwenden dann einen ähnlichen Code wie den folgenden:
Nach bewährtem Rezept ist das ganze eine Tabelle. Die einzelnen Tabellen-Einträge stehen zwischen <td> und </td>. Betrachten wir das folgende Schema:
Hier steht nun URL für die aufzurufende URL, also das Benutzer-Profil im jeweiligen Netz, PICURL für die URL zum anzuzeigenden Bild, TITEL für den Text, der bei mouseover angezeigt wird und TEXT für den alternativen Text, der angezeigt wird, wenn kein Bild angezeigt wird. In obigem Beispiel verwende ich Profile bei Google+, Twitter und Facebook und eine mit Feedburner generierte Seite zum Feed-folgen. Die Icons stammen dankenswerter Weise von Paul Robert Lloyd und stehen unter einer CC-BY-SA-Lizenz, ihr müsst also bei Verwendung auf seine Seite verlinken, dann könnt ihr aber auch die obigen Links meines Picasa-Accounts verwenden.
2. Share This
Für die Like/Share-Buttons gibt es grundsätzlich zwei verschiedene Ansätze. Zum einen den bei Bloggerplugins beschriebenen Ansatz der Massen. Dieser ist dort recht gut beschrieben und verwendet viele verschiedene kleine Icons. Ich möchte aber nur wenige, dafür eingängigere Icons. Dazu kann man nun einerseits die Buttons selbst zusammensuchen und einbinden oder einen Dienst wie z.b. AddThis verwenden. Für den Ansatz der Massen und den Ansatz über AddThis muss man in der Vorlage HTML bearbeiten und die Widget-Vorlagen komplett anzeigen. Dann suchen wir die folgende Passage:
Und ersetzen das dann durch etwas ähnliches wie:
Dieser Code stammt nun von AddThis und kann auch direkt so verwendet werden.