Anfang 2011 forcierte Facebook die Bemühungen, die Teilen-Funktion an den Like-Button zu koppeln. So wurde der betreffende Abschnitt im Facebook Manual über Nacht gestrichen und stattdessen auf den Like-Button verwiesen, was dazu führte, dass viele Irrungen und Wirrungen rund um die Share-Funktion entstanden.
Wie auf einschlägigen Seiten zu lesen war, war der Grund für dieses Vorhaben die weitaus höhere Interaktionsrate des Like-Buttons. User wären nach Meinung der Experten öfter und schneller bereit, auf den Like-Button zu klicken als den Share-Button zu betätigen, wodurch mehr Inhalte geteilt werden würden.
Ab diesem Zeitpunkt konnte die Teilen Funktion auf Webseiten nur durch die Einbindung des speziellen Share-Plugins realisiert werden.
Wie realisiert man einen Teilen-Button und was ist daran einfacher?
Beim Teilen-Button handelt es sich um einen einfachen HTML-Link mit der Ziel-Adresse
https://www.facebook.com/sharer/sharer.php
An diese wird mit ?u=value ein Parameter u hinzugefügt, dessen Wert (value) die zu teilende Adresse darstellt.
Beispiel
Möchte man die Startseite des Blogs über einen Share-Button auf Facebook teilen, ergibt sich im einfachsten Fall:
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.webdesign-bamberg.net" target="_blank">
webdesign-bamberg.net auf Facebook Teilen
</a>
Abhängig vom angegebenen target-Attribut öffnet sich beim Betätigen des Links der Share-Dialog in einem neuen oder im aktuellen Browserfenster.
In diesem Dialog kann nun bestimmt werden
– wo der Link geteilt werden soll (Chronik oder in einer Fanpage)
– welche Headline, Teaser und Textinhalte zu sehen sein sollen
– welches Miniaturbild verwendet werden soll
– wer den geteilten Inhalt sehen darf
Ohne die Verwendung Graph API, Javascript oder Facebook-Plugin kann somit auf einfachste Art und Weise jede beliebige URL, egal ob Seite, Bild oder Video, geteilt werden.
Ein weiterer Vorteil gegenüber dem Plug-In: Der Button kann mit CSS nach eigenen Vorstellungen gestylt und dem Seiten-Layout angepasst werden.
Teilen der aktuell angezeigten Seite – dynamischer Aufbau der Adresse
In diesem Zusammenhang möchte ich noch auf eine Anforderung eingehen, der man insbesondere bei Seiten mit Content Management Systemen immer wieder begegnet: das Teilen der aktuell angezeigten Seite. Da es bei Webseiten mit unzähligen Unterseiten nicht praktikabel ist, die Adresse des Share-Buttons für jede einzelne Page anzupassen, muss diese in irgendeiner Form dynamisch aufgebaut werden.
Möglich ist dies entweder mit der verwendeten serverseitigen Skriptsprache (PHP, ASP, JSP) oder aber mit Javascript. Da es für alle gängigen Content Management Systeme bereits vorgefertigte Extensions zum Teilen von Inhalten in Social Media Netzwerken gibt, möchte ich an dieser Stelle etwas näher auf die Variante mit Javascript eingehen.
Benötigt werden hierfür lediglich zwei kleine Code-Snippets. Zum einen eine Javascript- Funktion (fbshare), die die aktuelle URL (location.href) bestimmt und diese, wie bereits im statischen Fall geschildert, an die Basisadresse anhängt. Für das PopUp Fenster kann optional die Breite und Höhe angegeben werden.
<script type="text/javascript">
function fbshare(){
var sharer = "https://www.facebook.com/sharer/sharer.php?u=";
window.open(sharer + location.href,'sharer', 'width=626,height=436');
}
</script>
Die Funktion wird zunächst in einem script-Block im Header des HTML-Dokuments angelegt. Im Falle der Verwendung eines Content Management Systems muss diese im Seiten-Template verankert sein.
Der Aufruf der Funktion erfolgt schließlich mit Hilfe des onclick-Events:
<a href="" onclick="fbshare();">Diese Seite teilen</a>
Weiterführende Links zum Thema Share-Button
– Offizielle Facebook Developer Dokumentation
danke für die Erklärung, lg aus Wien.
Prima Erklärung! Nur schade, dass man den Code, der zur Verfügung gestellt wird, dann nicht kopieren kann … ;)
Ich versuche in jede Veranstaltung eines dynamisch erzeugten Veranstaltungskalenders den Share-Button so einzufügen, dass auch Tag+Zeit, Titel und ein Teil der Veranstaltungsbeschreibung beim Teilen-Dialog und damit dann auch auf der Facebookseite erscheinen. Die Url für u=… wird mit php dynamisch erzeugt. Wenn ich in Facebook auf den geteilten Link klicke, dann wird richtigerweise die geteilte Veranstaltung angezeigt. Die Beschreibung des Links wird aber aus den allgemeinen Angaben der Website und nicht aus den Angaben der Veranstaltung generiert, was in diesem Fall sinnlos ist. Kann man die einzelnen Bereiche der Veranstaltungen so für Facebook markieren – z.B. wie Microdata – dass diese von Facebook anstelle der Websiteangaben genutzt werden? Über hilfreiche Ideen würde ich micht freuen. Danke!
Hallo Florian,
das ist ein toller Code – Danach habe ich ewig gesucht. Geht es auch, dass ich nach dem „sharen“ auf der eigentlichen Seite bleibe und nicht auf die Startseite weitergeleitet werde?
Hast Du auch einen Code für Facebook like mit Java im eigenen Design?
Ansonsten wirklich toll der Code – Vielen Dank dafür.
Viele Grüße
Togo
Hallo Florian!
In meinem Kleinanzeigenscript habe ich versucht die Anzeigen Liken zu lassen. Wenn ich auf „Diese Seite Teilen“ klicke öffnet sich auch das fenster und in der Adresszeile ist auch alles zu sehen wie dieses Beispiel Zeigt:
https://www.facebook.com/sharer/sharer.php?u=https://www.meinURL.de/anzeigen.php?go=ea&id=8
Wenn ich das dann Geteilt habe und auf das Geteilte klicke um auf der Seite zu landen dann sieht die URL so aus:
https://www.facebook.com/sharer/sharer.php?u=https://www.meinURL.de/anzeigen.php?go=ea
Es fehlt am ende der URL das &id=8
Hast du eine Ahnung warum das so ist?
Würde mich freuen wenn du mir Antwortest.
Webmaster2001
Hallo Webmaster2001,
ich hab das Problem kurz recherchiert. So wie ich das sehe, kann der angehängten URL auf direktem Weg nur ein Parameter mitgegeben werden, in deinem Fall der „go=ea“, der zweite wird von Facebook ignoriert, da von FB wohl reversible Strings wie http://www.meineURL.de?u=www.meineurl2.de?u=www.meineurl3.de=u=…. weitestgehend ausschließen möchte. Das Problem wurde auch schon in mehreren Foren wie https://stackoverflow.com/questions/20956229/has-facebook-sharer-php-changed-to-no-longer-accept-detailed-parameters. Hier ist auch ne etwas verzwicktere Lösung über FB feed angesprochen. Was ich an deiner Stelle aber machen würde: Versuch einfach deine URL sauberer mit / zu formen, zum einen könntest du dann weiterhin über die Sharer Funktion linken und zum anderen bringt es dir natürlich auch für SEO Vorteile.
Gruß Flo