Anleitung: Facebook Like Button mit XFBML und Kommentarfunktion in deutsch

Ok, die Variante mit dem iFrame ist mit copy/paste für praktisch jeden ohne irgendwelche Kenntnisse in Sekunden möglich. Will man jedoch auch die Kommentar Funktion nach Klick auf "empfehlen" oder "gefällt mir" haben (und nicht in Englisch), so sind diese paar Schritte nötig (gibt sicher noch andere Möglichkeiten, aber diese hier funktioniert jedenfalls):

1) Facebook via JavaScript SDK laden und den Button via <fb:like>  in einem div einbetten (das funktioniert eben nur mit der SDK): 

 <div id="fb-root" style="height:45px;"> 

<fb:like href="[%c.req.uri%]" layout="standard" show_faces="true" 

	width="500" action="recommend" colorscheme="light" 

	class="fb_edge_widget_with_comment fb_iframe_widget" /> 

</div> 

<br clear="all"> 

<script> window.fbAsyncInit = function() 

	{ FB.init({appId: 'xxxxxxxxxxxxxxxxxxxxx', status: true, 

	cookie: true, xfbml: true}); }; 

	(function() { var e = document.createElement('script'); 

	e.async = true; 

	e.src = document.location.protocol + 

	'//connect.facebook.net/de_DE/all.js'; 

	document.getElementById('fb-root').appendChild(e); }

	()); 

</script> 

Höhe, Breite können hier mit width, height gesteuert werden. Wichtig: In meinem Beispiel steht für die URL [%c.req.uri%], das ist in der jeweiligen Sprache durch die Adresse der Seite zu ersetzen, muss genau der aufgerufenen URL der Seite mit dem "Like-Button" entsprechen.

Mit dem Parameter "de_DE" wird das Ergebnis auch richtig "eingedeutscht", die Standardbeispiele enthalten immer das "en_US".

2) Damit die Kommentar-Funktion auch wirklich nach dem Klick des Buttons erscheint, muss man sich mit einer gültigen appID bei Facebook anmelden (oben im Code durch die Zeichenfolge  "xxxxxxxxxxxxxxxxxxxxx" illustriert). Wie kommt man zu dieser? Unter

http://www.facebook.com/developers... bzw.

http://www.facebook.com/developers... 

entweder neue App erzeugen bzw. eine bereits bestehende editieren. Wichtig ist der "API-Schlüssel", diese Zeichenfolge ist statt den 'xxxxxxxxxxxxxxxxxxxxx' oben im Code einzufügen (siehe im Bild unten 2a)).

Und der entscheidende Schritt: Rechts auf "Einstellungen bearbeiten" klicken (im Bild 2b)) und  dann links in der Navigation auf "Connect" (2c). Nun unter "Connect-URL" (2d) die Domain eintragen, von welcher die Seiten mit dem "Like-Button" dann abgerufen werden (bitte auf den Trailing-Slash achtgeben, sonst motzt Facebook).

That's it. Achtung: Das funktioniert dann nur auf der unter Connect-URL angegebenen Domain, auf Testsystemen klappt die Kommentar-Funktion dann nicht auf, also jedenfalls am Live-System ausprobieren...

Und wie man Statistiken für den "Like-Button" einrichtet, steht hier:

http://www.be24.at/blog/entry...

Bild vergrössern

Bild vergrössern

Tags

•  |  Web-Biz