Praxis: So binden Sie Share-Buttons ein
Die sogenannten Share-Buttons eignen sich hervorragend dazu, mit wenig technischen Aufwand Inhalte der eigenen Webseite ins Social Web zu verlängern. Wir zeigen wie das in der Praxis funktioniert und wie sich der Facebook Like Button, der offizielle Twitter Button und der “Zeiger” aus den VZ-Netzwerken auf der eigenen Webseite oder dem Blog einsetzten lässt.
Bookmarklets und Share-Button waren bisher oft übersehen Funktionen einer Website oder Blogs, mit denen der Besucher den Inhalt der entsprechenden Seite im eigenen Netzwerk verteilen konnte. Die Funktionen führen jedoch seit längerer Zeit ein Schattendasein im unteren Teil eines Beitrages, da der Nutzer sich für die Verteilung über den jeweiligen Dienst zuvor anmelden muss, oder eine andere Klickhürde nehmen muss.
Facebook Like Button
Mit der Umsetzung des “Gefällt mir”-Buttons für das Web, hat Facebook die Einfachheit der Funktion auf andere Webseiten portiert. Man kann nun – vorausgesetzt, man ist permanent in Facebook eingeloggt – den Button drücken und ohne die Seite zu verlassen, wird eine kurze Meldung im Stream auf Facebook veröffentlicht.
Der Gefällt mir Button lässt sich sehr einfach in die eigene Seite einbauen. Dafür hat Facebook eigens einen Generator zur Verfügung gestellt. Allerdings muss man für Content Management System gewisse Anpassungen vornehmen. Sieht der normale Code beispielsweise so aus:
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.beebop.de%2Farne-friedrich-mit-unserem-fanshirt%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>
Sieht der für WordPress angepasste Schnipsel so aus:
<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”></iframe>
Die farbliche Hervorhebung zeigt im ersten Fragment den statischen Link, der den Code nur für eine Seite nuztbar macht. Im zweiten Beispiel sieht man in der roten Hervorhebung die entsprechende WordPress-Abfrage der URL. Das Code-Fragment muss dann, je nach Theme, in der loop.php bzw. single.php platziert werden. Entsprechende Beispiele für andere CM-Systeme sollte es via Google oder entsprechende Nutzerforen geben.
Offizieller Twitter Share Button
Vor ein paar Tag veröffentlichte Twitter seinen Tweet-Button, der ähnlich einfach zu bedienen ist und unkompliziertes verteilen der besuchten Seite ermöglicht. Der Button ist ähnlich einfach gestrickt und ebenso einfach zu platzieren.
Twitter bietet unter http://twitter.com/goodies/tweetbutton ebenfalls einen Generator an, der ohne weitere Anpassung sich praktisch in jede Seite einbauen lässt:
<a href=”http://twitter.com/share” data-count=”horizontal” data-via=”Twitter-Nutzernamen” data-lang=”de”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
Allerdings empfiehlt sich für WordPress-Systeme die Einbindung wie folgt:
Innerhalb der Datei loop.php bzw. single.php
<a href=”http://twitter.com/share?url=<?php print(urlencode(get_permalink())) ?>&text=<?php print(urlencode(get_the_title())) ?>” data-count=”horizontal” data-via=”Twitter-Nutzernamen” data-lang=”de”>Tweet</a>
In der footer.php
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
VZ Share Button “VZ-Zeiger”
Eine bisher noch nicht so bekannte Variante eines vergleichbaren Buttons bzw. Funktion, ist der VZ-Zeiger. Nach ähnlichem Prinzip kann man interessante Inhalte bestimmten Personen im VZ zeigen. Die Funktion ist allerdings aufgrund der Geschlossenheit der VZ-Netzwerke etwas holprig und bedarf zur vollständigen Abwicklung einige Klicks. Zudem bestimmt man einen Personenkreis, welchem die Inhalte gezeigt werden, und man veröffentlicht den Link leider nicht direkt im Stream.
Einen offiziellen Generator für den VZ-Zeiger gibt es nicht, allerdings hat wemaflo in Eigenarbeit ein Formular erstellt, mit der sich ein entsprechender Zeiger für statische Seiten erstellen lässt. Die Integration in WordPress ist natürlich vergleichbar mit den vorherigen Varianten und sieht im Detail so aus (rot gibt in dem Fall die URL und blau den Titel des Beitrages):
<a href=”http://www.studivz.net/Suggest/Selection/?u=<?php the_permalink(); ?>&desc=<?php the_title(); ?>“>Diesen Beitrag bei studiVZ, meinVZ oder schülerVZ zeigen!</a>
Der VZ-Zeiger ist aus meiner Sicht noch ziemlich experimentell und hat leider mit einigen Fehlermeldungen zu kämpfen. Außerdem ist die vorherige Auswahl des jeweiligenVZ-Netzwerkes unglücklich und die Darstellung als Textlink ist weniger gelungen. Wobei man innerhalb des <a href> auch schnell selbst ein Logo einsetzen kann. Anscheinend wird daran wohl auch noch gearbeitet und womöglich ist deshalb die Dokumentation im VZ-Developer Blog zur Zeit auch nicht mehr erreichbar.
Allerdings hat man mit den Facebook- und Twitter-Button zwei gute Werkzeuge, um seinen Seitenbesuchern einfach und unkompliziert die Möglichkeit zu geben Wohlwollen für einen bestimmten Beitrag auszudrücken. Sollte der Besucher nicht eingeloggt sein, öffnet sich ein einfaches Pop up, mit welchem man sich schnell einloggt. Es ist darüber hinaus keine Genehmigung zur Datenfreigabe oder einer App notwendig, so dass sehr klickarm der Link verteilt wird.
Fragen zu dem Thema? Posten Sie gern einen Kommentar unter diesen Artikel!
