Immer mal wieder was neues gibt es auch von den deutschen Datenschützern.

Weil diese nun die hauseigenen Social Plugins von Netzwerken wie Facebook, Twitter und Co. für rechtswidrig halten, stellt sich die Frage was nun.

Man könnte das zwar ignorieren, aber damit steigen natürlich die “Chancen” auf Bußgelder oder Abmahnungen.

Ich habe mich deshalb im Web schlau gemacht und mir eigene Buttons für Twitter und Facebook gebaut.

Eigene Social Buttons?!

Wie wichtig Social Buttons in einem Blog sind ist nicht wirklich zu sagen.

Auf Selbstaendig-im-Netz.de habe ich pro Artikel normalerweise zwischen 10 und 30 Retweets. Ich gehe zwar davon aus, dass der Großteil davon direkt in Twitter passiert und nicht mit Hilfe des Twitter-Buttons, aber gänzlich darauf verzichten möchte ich nicht.

Und es ist auch gar nicht so schwer, einen eigenen Facebook- oder Twitter-Button zu bauen.

Diese bestehen aus 2 Teilen.

Zum einen natürlich aus dem Button selber, der dann Facebook bzw. Twitter öffnet und die Artikel-URL + Titel gleich übernimmt.

Zum anderen finde ich den Zähler wichtig und nützlich, da er neuen Besuchern zeigen kann, dass ein bestimmter Artikel besonders gut angekommen ist.

Also habe ich mir selber Social Buttons mit Zählern gebaut.

Der Facebook-Button

Im Grunde funktionieren die beiden Buttons ähnlich.

Ich nutze bei Facebook übrigens immer die Share-Funktion und nicht die Like-Funktion. Deshalb sorgt der folgende Code für den Aufruf den Share-Fensters.

Ein Like-Button sollte aber ähnlich funktionieren.

Facebook-Share URL
Als erstes müssen wir die Facebook-URL zusammen bauen. Diese URL beginnt immer wie folgt:

1

http://www.facebook.com/sharer/sharer.php?u=

Hinter dem “u=” kommt natürlich die URL des aktuellen Artikels. Diese kann man mit WordPress sehr einfach hinzufügen:

1

http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>

Die Funktion “the_permalink()” gibt die aktuelle URL aus.

Doch danach kommt noch etwas. Man kann auch den Titel des aktuellen Artikels übergeben. Diesen bekommt man von der WordPress-Funktion “the_title()”.

Und so sieht die Facebook-URL dann komplett aus:

1

http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>&src=sp

Facebook Share Zähler
Da habe ich im Web mal etwas gegoogelt. Und ich habe die Seite johndyer.name gefunden. Dort gibt es Code-Beispiele, wie man die Anzahl der Stimmen für eine URL bei verschiedenen Netzwerken auslesen kann.

Darauf basierend habe ich meinen Code erstellt:

1
2
3
4
5
6
7
8

<?php
$URL = get_permalink();
function get_shares($URL) {
    $SBstring = file_get_contents('http://api.facebook.com/restserver.php?method=links.getStats&urls='.$URL);
    $SBarray = json_decode($SBstring, true);
    return intval( $SBarray[$URL]['shares'] );
}
echo get_shares($URL);

Man ruft die API-URL mitsamt der gewünschten eigenen URL auf, wandelt diese mit Hilfe der JSON-Funktionsbibliothek in ein Array um und kann dann auf ein Feld des Arrays zugreifen, das die Zahl der Shares enthält.

Im Grunde also recht einfach.

Der Twitter-Button

Beim Twitter-Button läuft es ähnlich ab.

Twitter URL
Auch hier erzeugt man eine spezielle API-URL und fügt dort die URL und den Titel ein.

Beim Aufruf dieser URL gelangt man zum Twitter und hat quasi schon einen fertigen Tweet, den man nur noch absenden muss.

1
2
3

$Titel = $post->post_title;
$Titel = urlencode($Titel);
https://twitter.com/intent/tweet?original_referer=<?php the_permalink(); ?>&source=tweetbutton&text=<?php echo $Titel;?>&url=<?php the_permalink();

Tweet Zähler
Diese Funktion basiert ebenfalls auf dem oben verlinkten Artikel.

1
2
3
4
5
6
7
8

<?php
$URL = get_permalink();
function get_retweets($URL) {
    $SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $URL);
    $SBarray = json_decode($SBstring, true);
    return intval( $SBarray['count'] );
}
echo get_retweets($URL);

Soweit so gut. Damit habt ihr also nun den Code für die Erzeugung der jeweiligen Tweet- bzw. Share-URLs.

Und ihr habt den Code für den Zähler.

Optische Gestaltung

Nun kommt es eigentlich nur noch darauf an, diese zusammen zu führen.

Man kann es so machen, wie im oberen Screenshot. Da habe ich einfach die übliche Anordnung nachempfunden.

Mit <div>-Tags und ein wenig CSS kann man das problemlos so gestalten wie man möchte.

Hier der Code für meinen Twitter-Button inkl. der Hintergrundgrafik social-tw-back.gif (damit wird das weiße Feld erzeugt, wo der Zähler drin steht):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div style="width: 80px; text-align:center; font-size:16pt; color:#496398; background-image: url(http://www.selbstaendig-im-netz.de/Bilder/social-buttons/social-tw-back.gif);">
<?php
$URL = get_permalink();
$Titel = $post->post_title;
$Titel = urlencode($Titel);
function get_retweets($URL) {
    $SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $URL);
    $SBarray = json_decode($SBstring, true);
    return intval( $SBarray['count'] );
}
echo get_retweets($URL);
?>
<a href="javascript:NeuFenster1('https://twitter.com/intent/tweet?original_referer=<?php the_permalink(); ?>&source=tweetbutton&text=<?php echo $Titel;?>&url=<?php the_permalink(); ?>')"><img src="http://www.selbstaendig-im-netz.de/Bilder/social-buttons/tweet-twitter.gif" style="margin-top:19px; padding:0px;" alt="Artikel tweeten" title="Artikel tweeten" border="0" ></a>
</div>

Der Tweet-Button selber ist auch eine Grafik (tweet-twitter.gif).

Ich lasse das neue Fenster übrigens in einem PopUp öffnen, so wie es standardmäßig auch ist. Dafür rufe ich die URL nicht direkt auf, sondern die Funktion “javascript:NeuFenster1(URL)”

Dazu habe ich noch den folgenden kleinen JaveScript-Code eingebaut:

1
2
3
4

<script language="JavaScript">
function NeuFenster1($url)
{ MeinFenster = window.open($url, "Artikel teilen","width=600,height=500"); MeinFenster.focus(); }
</script>

Das sorgt dafür, dass bei einem Klick auf den Tweet-Button ein Popup aufgeht.

Will man, dass ein neuer Reiter aufgeht, dann einfach normal die Twitter-URL verlinken und “target=_blank” nutzen.

Button und Zähler nebeneinander
Natürlich ist es damit genauso möglich, den Zähler rechts neben dem Button anzuzeigen.

Wenn man etwas HTML und CSS kann, sollte das kein großes Problem darstellen.

Caching?

Ich habe versucht heraus zu bekommen, ob es für die Abrufe des Zählerstandes ein Tageslimit gibt. So richtig sicher bin ich mir nicht.

Sollte das so sein, dann wird irgendwann am Tag, wenn das Limit erreicht ist, nur noch eine 0 angezeigt.

Um diesem Problem aus dem Weg zu gehen und zudem zu vermeiden, dass bei jedem Seitenaufruf der Zähler abgefragt wird, könnte man mehrere Dinge unternehmen:

1. Zwischenspeichern
   Zum einen wäre es möglich, dass man den Zählerstand nur alle 10, 20 oder 30 Minuten ausliest und ansonsten auf einen in der Datenbank oder in einer Datei gespeicherten Wert zurück greift. Allerdings ist das bei einem so dynamischen Wert, der ja gerade kurz nach der Veröffentlichung in kurzen Abständen steigt, nicht ideal. Zudem sind die Schreib- und Lesezugriffe auf die Datenbank (oder schlimmer auf eine Datei auf der Festplatte) nicht unbedingt die schnellsten.
2. Cachen
   Die Verwendung eines Caching-Plugins sorgt dafür, dass auch der Zählerstand gecached wird. Damit reduzieren sie die Aufrufe der API schon deutlich.
3. Ausblenden
   Ich überlege gerade, ob ich die Social Buttons nach einer gewissen Zeit einfach ausblende. In einem viele Monate alten Artikel wird kaum noch jemand diese Buttons benutzen.

Es gibt jedenfalls einige Möglichkeiten, die Anzahl der API-Zugriffe für die Zählerstände zu verringern.

Was ist mit Google+?

Den Zähler von Google+ abzurufen ist kein größeres Problem.

Allerdings ist es, soweit ich weiß, bisher nicht möglich eine statische URL zu erstellen, mit der man ein +1 bei Google+ vergeben kann.

Deshalb kann ich bisher auch keinen +1 Button selber bauen.

Aber ganz so schlimm ist das nicht, da Google+ mengenmäßig bisher noch keine große Rolle spielt.

Mittelfristig wäre das aber eine schöne Sache. Warten wir es mal ab.

UPDATE:
Nun habe ich (mit Hilfe eines Lesers) auch eine Lösung für den Google+ Button gefunden.

Zum Artikel “G+ Button selber bauen“.

Fazit

Man kann sich also recht einfach selber Social Buttons bauen, die von selber keine Daten über den Nutzer an Facebook und Co. versenden.

Damit sollte man rechtlich gesehen etwas sicherer sein.

36

Bei einem Klick auf den Twitter-Button gelangen Sie zu Twitter und dort werden Daten erhoben. Wir haben keinen Einfluss auf den Umfang der Daten, die Twitter erhebt.

veröffentlicht in: Social Web, Technik, WordPress-Plugins

1. Social-Network-Buttons und Zähler im Blog einbauen
2. Social-Media Buttons in Blogs – Macht das Sinn?
3. TweetMeme und Facebook Share für mehr Leser
4. Eigene Buttons im WordPress-Editor
5. Wie viel Social Media braucht ein Blog?