Heute mal ein kleiner Schnipsel zum Thema Facebookintegration auf Deiner Seite. Dabei soll die Facebook SDK benutzt werden.
(Es gibt auch die Möglichkeit einen Iframe zu verwenden der ist allerdings zu statisch und wird nicht immer angezeigt. Außerdem werden nicht alle Widgets unterstüzt)
Um die Facebook SDK und somit auch XFBML nutzen zu können braucht man eine APP-ID, die meisten scheitern genau an dieser Stelle. Also auf gehts…
Vorbereitung
Wie bekomme ich eine APP-ID für meine Seite :
Du gehst auf folgende URL: http://developers.facebook.com/setup/
Hier musst Du nun den Namen Deiner Seite und die URL Deiner Homepage eintragen.
Auf der nächsten Seite findest Du nun Deine persönliche App-ID und eine secret App-ID (die soll uns hier nicht weiter interessieren).
Einbau der SDK
1. Doctype anpassen
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:fb="http://www.facebook.com/2008/fbml">
2. Die eigentliche SDK einbinden
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '#DEINE 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>
Glückwunsch Du kannst Jetzt auf Deiner Seite XFBML verwenden.
Widgets einbauen
Als Beispiel werde ich hier das Kommentarfeld einbauen. Der Code hierfür ist sehr Sinpel:
<fb:comments xid=”1100101″ width=”500″></fb:comments>
Das wars auch schon die xid kann einen beliebigen Wert haben. Falls Du mehrere Kommentarfelder auf einer Seite verwenden möchtest mußt Du bei jedem Tag eine neue xid vergeben. Die Erläuterung der Parameterswidth spare ich mir.
Und so sieht das ganze aus wenn es fertig ist :