Ein Facebook Like Button kann in zwei verschiedenen Arten in eine Website eingebunden werden. Zum einen kann man die Iframe-Version benutzen und zum anderen den XFBML Tag des Like Buttons integrieren. Die Codes für beide Versionen kann man sich auf der Seite der Facebook Dokumentation generieren.  Somit kann man auch ohne größere technischen Kenntnisse den Facebook Like Button in seine Website einbinden. Einfach den Code generieren und an der gewünschten Stelle des Layouts in sein Template einfügen.

Hier möcht ich nun kurz auf die Vor- und Nachteile der verschienden Versionen eingehen.

Facebook Like Button Iframe-Version

Bei der Iframe Version wird ein normales Iframe HTML-Tag in die Website eingebunden.

Vorteile:

• Einfacher Einbau
• funktioniert “fast immer”

Nachteile:

• Zugriff auf die JS Events der Facebook SDK nicht möglich
• längere Ladezeiten
• nicht trackbar mit Google Analytics

Facebook Like Button XFBML-Version

Bei der XFML Version wird das XFBML-Tag <fb:like> in die Website eingebunden und das Javascript rendert an dieser Stelle den Facebook Like Button. Der größte Vorteil ist, dass der Like Button erst geladen wird, sobald die restliche Seite da ist.

Vorteile

• schnellere Ladezeit
• Möglichkeit externes Javascript von Facebook asynchron zu laden
• “Gefällt mir’” und “Gefällt mir nicht mehr”-Klicks mit Google Analytics trackbar
• kombinierbar mit anderen Widgets, das Javascript muss aber nur einmal eingebunden werden

Nachteile:

• nicht valides HTML/XHTML
• funktioniert durch anderes (fehlerhaftes) Javascript oft nicht

Linktipps:

• Facebook Dokumentation zum Like Button
• Ladezeiten des Facebook Like Buttons

Ein Facebook Like Button ist ja schon mittlerweile ein Muss auf jeder Website. Gerade in Kombination mit den OpenGraph Meta-Tags kann der Like-Button eine wahre Bombe sein um den Traffic auf einer Seite anzukurbeln. Facebook Insights veranschaulicht die gesamten “Likes” einer Website in netten Liniendiagrammen, vorausgesetzt man hat seine Facebook User ID dem Meta-Tag fb:admin hinzugefügt. Ich bevorzuge jedoch alle Daten in Google Analytics zu sammeln, anstatt immer zwischen zwei Statistik Tools zu switchen.

Das Tracking des Like-Buttons ist simpler als ich es mir vorstellte. Einzige Voraussetzung ist, dass man die XFBML anstatt der Iframe-Version verwendet. Die Javascript SDK API stellt hier zwei Events bereit, die zum Tracking genutzt werden können. Beide Events greifen übrigens nicht nur auf die Like-Buttons sondern auch auf die Page-Widgets.

FB.init({xfbml: true});
FB.Event.subscribe('edge.create', function(response) {
_gaq.push(['_trackEvent', 'Social Media', 'Facebook', 'Like', response.replace('http://', '')]);
}
});
FB.Event.unsubscribe('edge.create', function(response) {
_gaq.push(['_trackEvent', 'Social Media', 'Facebook', 'Unlike', response.replace('http://', '')]);
}
});

Linktipps:

• FB Javascript SDK
• FB Event Handling
• Open Graph
• Google Analytics Event Tracking

Scriptaculous, die meiner Meinung nach zweitbeste Javascript Library überhaupt (Platz 1: Prototype), bietet unter anderem viele nette und geniale Effekte, um eine Website interaktiv zu gestalten. Thomas Fuchs, Entwickler von scriptaculous, schrieb die Library bereits im Jahre 2005. Ich selbst benutze sie auch oft und möchte hier meine Favoriten vorstellen:

Effect.Appear - Effect.Fade

Mithilfe von opacity Elemente ein- und ausblenden

Perfekt geeignet um bei einem Ajax Request das Loading-Icon ein- und auszublenden

• Demo, Beispiele & Dokumentation

Effect.BlindDown – Effect.BlindUp

Mithilfe von top und bottom Elemente auf- und zuklappen

Immer passend wenn man übersichtshalber Content verstecken will und ihn aufs onclick Event ersichtlich lassen werden.

• Demo, Beispiele & Dokumentation

Effect.Move

Elemente in der x- und/oder y-Achse verschieben

Genialer Effekt um beispielweise eine Scrollgallery zu realisieren

• Demo, Beispiele & Dokumentation

Effect.ScrollTo

Verschönerter Anker-Effekt

Effekt um zu einem Element zu scrollen. I’m lovin it

• Demo, Beispiele & Dokumentation