Ein eigener “Gefällt mir”-Button auf der Seite ist schon praktisch. Facebook macht sich dran das Web zu erobern und erlaubt Webseitenbetreibern in wenigen Schritten den besagten Button in die eigene Webseite einzubauen.
Variante 1: mit iframe
<iframe src="http://www.facebook.com/plugins/like.php?href=http://domain.com&layout=standard&show-faces=true&width=500&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>
Variante 2: Facebooks JavaScript-SDK
Etwas komplizierter aber viel schöner ist es die JavaScript-SDK von facebook zu nutzen. Für diese muss man sich zwar bei facebook anmelden aber das Formular ist noch gerade so erträglich.
Eigene Seite bei facebook als Applikation registrieren
Das Forumlar unter http://developers.facebook.com/setup/ möchte von Euch nur den Namen der Seite, die URL zur Seite und Eure Sprache wissen. Mehr nicht und schon bekommt ihr nicht nur Eure App ID sondern auch gleich den Code, den ihr braucht, um das facebook JavaScript-SDK einzubinden.
facebook JavaScript-SDK einbinden
<div id="fb-root"></div><script>window.fbAsyncInit = function() {FB.init({appId: 'APP ID', status: true, cookie: true, xfbml: true});};(function() {var e = document.createElement('script');e.type = 'text/javascript';e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script>
Jetzt haben wir Zugriff auf einige Methoden, die facebook uns zur Verfügung stellt. Um einen “Like”-Button in die Seite zu integrieren brauchen wir zunächst ein XFBML-Element, welches ihr an der gewünschten Stelle in Eure HTML-Datei einfügt. Eure Domain müsst Ihr entweder manuell eintragen oder mit dem CMS Eurer Wahl dynamisch einfügen:
<fb:like href="http://domain.com/" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
Für WordPress sieht das dann so aus:
<fb:like href="<?php echo urlencode(get_permalink($post->ID)); ?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
Meiner Meinung nach viel schöner als ein iframe und, wenn man sich das facebook JavaScript-SDK mal ansieht, auch viel mächtiger.
23.04.2010 / 07:04 Uhr
[...] Blog http://ugotit.de habe ich nun ein Tutorial geschrieben, wie man mit wenigen Schritten einen “Gefällt mir”-Button auf der eigenen Seite integrieren kann und gleichzeitig sauberen Code [...]
23.04.2010 / 11:04 Uhr
cool!
soll der ganze code am ende des einzelnen artikels kommen? (single.php)
soll ich in dem code unten noch was ersetzen ausser APP_ID?
window.fbAsyncInit = function() {
FB.init({appId: ‘APP_ID’, status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement(‘script’);
e.type = ‘text/javascript’;
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
<fb:like href="ID)); ?>” layout=”standard” show_faces=”true” width=”450″ action=”like” colorscheme=”light” />
23.04.2010 / 20:04 Uhr
Also die Einbettung des JavaScripts (inkl. des divs) habe ich in die footer.php gesetzt. Das XFBML-Element steht in der single.php unter dem Artikel.
24.04.2010 / 09:04 Uhr
Das funzt leider nicht besonders. Öffne mal mit einem anderen Browser. Da steht dann wieder “gib als erster an…”
24.04.2010 / 09:04 Uhr
Komisch. Also könnte entweder daran liegen, dass facebook heute wohl ein paar Probleme hatte oder daran das man nicht eingeloggt ist im anderen Browser. Werde das mal weiter beobachten
24.04.2010 / 09:04 Uhr
Hier gibts das Ganze nochmal als Plugin; funzt aber ebenso wenig:
http://blog.bottomlessinc.com/2010/04/creating-a-wordpress-plugin-add-the-new-facebook-like-button-to-your-posts/
26.04.2010 / 10:04 Uhr
1. Dass da “Gib als Erster an… (blablabla)” steht, obwohl schon “gefallen” wurde, liegt daran, dass es nur funktioniert, wenn man auf FB eingeloggt ist.
2. Du legst doch eigentlich immer so viel Wert auf valide Webseiten…
3. Was geht mir das FB-Geraffel auf den Sack…
26.04.2010 / 11:04 Uhr
[...] diesen ach so wichtigen “Gefällt mir”-Button in sein Blog zimmern? So schreibt Daniel: Facebook macht sich dran das Web zu erobern und erlaubt Webseitenbetreibern in wenigen Schritten [...]
26.04.2010 / 18:04 Uhr
Ich kriege permanent den Fehler “The page at URL could not be reached.” wobei URL eben eine funktionierende URL zu der entsprechenden Website ist.
Jemand ne Idee?
Connect URL ist richtig eingestellt.
26.04.2010 / 19:04 Uhr
Da müsstest Du etwas konkreter werden. Wo kann man sich das denn mal ansehen?
28.04.2010 / 17:04 Uhr
Die Counter zählen seit einigen Tagen nicht mehr hoch, auf die Pinwand geposted wird aber dennoch.
Und es ist egal, ob ich eingeloggt bin oder nicht.
Hat irgendwer ne Erklärung dazu parat?
28.04.2010 / 19:04 Uhr
Das wird irgendwie mit facebook zusammenhängen. Wüsste jetzt nicht was Du daran ändern kannst.
01.05.2010 / 21:05 Uhr
Also irgendwie ist es mit der SDK Variante trotzdem ein i-frame (siehe dein Quellcode) ?
01.05.2010 / 21:05 Uhr
Steht ja auch nicht anders im Post. Man muss nur keinen iframe selber einbinden und bekommt mit dem SDK noch zahlreiche weitere Möglichkeiten.
01.05.2010 / 21:05 Uhr
danke für die schnelle Antwort!
Tut mir leid, hab das dann wohl etwas falsch verstanden.
Furchtbar, wenn man auf der Suche nach “x” ist, vergisst man doch immer wieder sehr schnell auch das “y” zu lesen hehe
trotzdem großes danke!
02.05.2010 / 12:05 Uhr
Gerne doch. Die Dokumentation der SDK ist auch echt gut und ermöglicht in naher Zukunft bestimmt auch noch mehr Möglichkeiten.
06.05.2010 / 11:05 Uhr
mit dem ie wird bei dir kein button angezeigt!
08.05.2010 / 11:05 Uhr
Welche Version denn?