Facebook Like Button mit Kommentarfunktion

15. Juni 2010 · · Allgemein Ein Kommentar - Tags: , ,

Bisher im Netz noch nicht sehr oft vertreten ist der "Full Featured Like Button" oder Like Button mit Kommentarfunktion.
So sieht das Ganze dann aus:
facebook like with comments

Eingebaut wird der erweiterte Button wie folgt:

Schritt 1:
Zunächst benötigt man eine App-Id für die betreffende Seite. Diese kann man sich bei Facebook hier generieren: http://developers.facebook.com/setup/

Schritt 2:
Nun passt man den Kopf der Seite an, dass er in etwa so aussieht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
 xmlns:og='http://opengraphprotocol.org/schema/'
 xmlns:fb='http://www.facebook.com/2008/fbml'> 
<head profile="http://gmpg.org/xfn/11">

Wichtig ist hier der opengraph-Teil.

Schritt 3:
Jetzt muss noch ein kleines Javascript eingebaut werden. Am besten kurz vor dem eigentlichen Like Button.

<div id="fb-root"></div> 
<script type="text/javascript"> 
	window.fbAsyncInit = function() {
	FB.init({appId: "your_app_id", status: true, cookie: true,
	xfbml: true});
	};
	(function() {
		var e = document.createElement("script"); e.async = true;
		e.src = document.location.protocol +
		"//connect.facebook.net/en_US/all.js";
		document.getElementById("fb-root").appendChild(e);
	}());
</script>

Bitte darauf achten die in Schritt 1 generierte App-Id einzutragen.

Schritt 4:
Als letztes bauen wir den eigentlich Like-Button ein. Das geschieht z.B. mit folgendem Code:

<fb:like href="http://yoursite.com/" layout="standard" show_faces="false" width="300" action="like" colorscheme="light" font="" />

Weitere Informationen zum Einbau des Buttons gibt es hier: http://developers.facebook.com/docs/reference/plugins/like

Zum Schluss noch ein Hinweis für WordPress Nutzer:
Es gibt bereits ein Plugin welches die Kommentarfunktion unterstützt. Einfach das Plugin "Facebook Like Button" herunterladen und in den Einstellungen die App-Id für die entsprechende Seite eintragen.