heute mal was zum facebook sharer button.
oft haben websites ein ‘share on facebook’ link womit man direkt einen eintrag auf der eigenen wall erzeugen kann. normalerweise wird die funktion als <img> tag mit einem onclick event handler eingebunden.
hier ein beispiel aus meiner GPSRace site:
<img onclick="window.location="http://www.facebook.com/sharer.php?u=http://www.gpsrace.ch/2010/09/08/gps-trip-from-greifensee-switzerland-5/&t= published a km trip on GPSRace";" title="share on facebook" src="http://www.gpsrace.ch/wp-content/themes/hpf/images/fb_share.png">
aussehen tut’s dann so (exakte kopie vom oberen code, ergo dieser share link funktioniert auch beim clicken):
nach dem click auf dieses bild wird der benutzer auf eine facebook seite geleitet, wo er bestaetigen muss, ob das so OK ist. facebook nimmt automatisch den titel, einen teil des texts und ein bild der geshareden seite um damit folgenden eintrag auf der wall zu generieren:
facebook share on my wall
wie funktioniert’s?
das <img> tag hat folgende attribute:
onclick: beim click auf das bild wird die angegebene URL als window.location gesetzt, dies ist eine javascript anweisung die bewirkt, dass die aktuelle window.location (die momentane addresse der website) geaendert wird, bei dieser aenderung wird also die seite von facebook geladen.
um nun etwas auf die eigene wall bei facebook zu posten ruft man einfach folgende URL auf:
http://www.facebook.com/sharer.php
damit sharer.php weiss was zu tun ist, muss man zwei GET parameter uebergeben. GET parameter beginnen mit einem ‘?’ und werden durch ‘&’ getrennt:
- u: sagt welche URL genau geshared werden soll
- t: sagt was der titel sein soll
damit nicht irgendwelche sonderzeichen innerhalb der GET parameter, z.b. ein ‘&’, stoeren, sollte man die parameter-werte codieren. falls man php benutzt um die seite zu generieren nimmt man am besten die funktion htmlentities().
title: das title attribut gibt nur an was fuer ein ‘tip’ dargestellt wird wenn man die maus ueber das bild bewegt
src: die adresse des bildes, man kann irgendein bild verwenden dafuer, man findet die problemlos via google suche.
so geht’s noch besser!
meine erfahrung hat gezeigt, das facebook nicht immer den richtigen titel, text oder das richtige bild vorgeschlagen hat.
um dies zu vereinfachen kann man mit metatags genau spezifizieren was der titel, die beschreibung und welches bild genommen werden soll:
<meta name="title" content="GPS trip from Greifensee, Switzerland" />
<meta name="description" content="admin published a 17.3 km running GPS trip from Switzerland - Greifensee. " />
<link rel="image_src" href="thumbnail_image" / >
mit diesen drei metatags im der website welche geshared wird kann man dem sharer.php script von facebook genau sagen was der inhalt, der titel und das bild sein soll fuer den eintrag auf der wall. diese angaben koennen sogar abweichen vom effektiven inhalt der seite. wenn gesetzt, dann haben diese parameter prioritaet.
ausserdem
der sharer link muss nicht unbedingt auf der seite sein die geshared werden soll! angenommen man betreibt einen blog und will bei jedem excerpt (preview des eintrages, davon gibts dann mehrere auf der blog site) einen share on facebook link anbringen, das funktioniert problemlos wenn die URL (der u parameter) auf die korrekte seite verweist.
Guter Bericht.
Nehme an, htmlentities() sollte man durch urlEncode() ersetzen.
Zu erwaehnen ist, wenn man den url in js “generiert”, ist vermutlich encode() zu verwenden. (ich probiers noch aus und melde die resultate…)
…und twitter?
gibts noch eine post ueber twitter?
encodeURIComponent() ist die JS funktion, die man brauchen sollte…
danke fuers feedback don,
ich denke urlEncode() oder htmlentities() gehen beide, muesste man genauer testen…
wenn der knopf mit javascript generiert wird, dann sollten die GET parameter tatsaechlich mit encodeURIComponent() codiert werden.
@don: ich hab einen kleinen beitrag zum share auf twitter gemacht:
share auf twitter’
Da ich auf verschiedenen Seiten meiner Website einen “share button” anzeige, habe ich mir ein kleines javascript geschrieben
function shareOnFacebook() {
u=location.href;
t=document.title;
window.open(‘http://www.facebook.com/sharer.php?u=’+encodeURIComponent(u)+’&t=’+encodeURIComponent(t),’sharer’,'toolbar=0,status=0,width=626,height=436′);
return false;
}
An der entsprechenden Stelle muss ich lediglich das event onclick=shareOnFacebook() angeben. Das erspart mir einiges an copy & past. Die Url und die Beschreibung werden mit diesem script immer von der entsprechenden Seite übernommen.
Ein ähnlicher script verwende ich für den “twitter button”
function shareOnTwitter() {
u=location.href;
t=document.title;
window.open(“http://twitter.com/share?url=”+encodeURIComponent(u)+”&text=” + encodeURIComponent(t) + “&lang=de” , “shareiCasa”, “toolbar=0,status=0,width=550,height=450″);
return false;
}