Authentische Selbstdarstellung

XFBML

FBML auf externen Webseiten

image.jpg

© PC Magazin

Das FBML-Element rendert eine Registernavigation im Facebook-Design.

FBML kann auf externen Webseiten als XFBML (Cross-FBML, wird teilweise auch als (X)FBML bezeichnet) verwendet werden. Während native Facebook-Applikationen, also von Facebook gehostete Websites, direkt von Facebook geparst werden, ist dies bei externen Websites natürlich nicht möglich. Facebook stellt jedoch eine JavaScript-Bibliothek zur Verfügung, die auch einen (X)FBML-Parser enthält.

Wenn Sie die Facebook Markup Language auf externen Webseiten verwenden möchten, sind daher drei Dinge zu beachten. Erstens, Sie müssen den FBML-Namespace bekannt machen. Dazu ergänzen Sie das einleitende <html>-Tag wie folgt: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">.

Außerdem müssen Sie die JavaScript-Bibliothek all.js per <script>-Tag einbinden und diese mit einem Aufruf der Methode FB.init() initialisieren. Der Methode übergeben Sie ein JSON-Array mit der Anwendungs-ID und den Initialisierungswerten status: true, cookie: true und xfbml: true.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId: ,<Anwendungs-ID>',status: true, cookie: true, xfbml: true});</script>

Diesen Code platzieren Sie irgendwo im Body-Bereich Ihrer Webseite, z.B. ganz unten, unmittelbar vor dem </body>-Endetag. Für <Anwendungs-ID> setzen Sie die Anwendungs-ID Ihrer Applikation - ohne die spitzen Klammern - ein.

Wenn Sie sehr viele Inhalte, wie Grafiken und Videos, auf Ihrer Webseite integriert haben, können Sie auch sicherstellen, dass das JavaScript SDK asynchron geladen wird. Der Code ist allerdings etwas umfangreicher. Kopieren Sie diesen gegebenenfalls von der Seite http://developers.facebook.com/docs/reference/javascript .

<div id="fb-root"></div><script>
window.fbAsyncInit = function() {
FB.init({appId: ,<Anwendungs-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>
image.jpg

© PC Magazin

Eigenes Facebook-Forum: Mit dem Element fb:board ist alles erledigt.

Auf externen Seiten können Sie HTML-Elemente ohne Weiteres mit FBML-Tags mischen. Mit FBML können Sie jetzt auch Widgets verwenden, die per IFrame nicht zur Verfügung stehen. Sehr beliebt ist z.B. das Kommentarfeld, das Sie idealerweise unterhalb eines bestimmten Artikels, Videos, Fotos oder - bezogen auf den kompletten Inhalt einer Webseite - ganz unten auf der Webseite platzieren.

Auf diese Weise können Ihre Besucher mitteilen, ob und warum ihnen die Seite oder ein bestimmter Inhalt gefallen hat oder nicht und auch Fragen bzgl. des Inhalts stellen. Diese beantworten Sie dann per E-Mail oder ebenfalls in Form eines Kommentars.

Die Besucher schreiben ihren Kommentar direkt auf der Seite in die Kommentarbox und senden ihn mit der Schaltfläche Post - mit der Option, den Kommentar zusätzlich in ihrem Profil (also auf der Facebook-Profilseite des Besuchers) zu veröffentlichen. Außerdem platziert Facebook über der Kommentarbox einen Like-Button, mit dem bei Facebook angemeldete Besucher Ihre Inhalte als Gefällt markieren können - für nicht bei Facebook angemeldete Besucher erscheint der Anmeldedialog.

Zum Like-Button siehe den Beitrag der letzten PC-Magazin-Ausgabe ab Seite 122 und auf der Heft-DVD. Die so erhaltenen Kommentare erscheinen sofort auf der Seite unterhalb des Kommentarfeldes. Ausschließlich Sie als Administrator der Seite haben die Möglichkeit, einzelne Kommentare zu löschen, dem Kommentator eine E-Mail-Nachricht zukommen zu lassen oder diesen zu blockieren.

Andere Besucher bekommen die entsprechenden Verknüpfungen (Delete, Message, Block) gar nicht zu sehen. Der FBML-Code, den Sie für ein Kommentarfeld benötigen, beschränkt sich gewöhnlich auf nur eine Zeile: <fb:comments></fb:comments>. Wie beim Forum gibt es die Attribute canpost, candelete, xid (für <fb:comments> optional) und numposts. Der Defaultwert für numposts ist 10, das heißt, standardmäßig erscheinen unterhalb des Kommentarfeldes bis zu zehn Kommentare.

Applikationsprofil

Wie jeder Facebook-User verfügt auch jede Facebook-Applikation über eine Profilseite. Diese erreichen Sie über die Verknüpfung Application Profile Page. Sie können hier z.B. einsehen, wer die Anwendung verwendet und wem sie gefallen hat oder Informationen über Ihre Person bereitstellen. Andere können Sie als Entwickler kontaktieren, Ihre Anwendung also mit dem Eintrag Gefällt mir markieren oder sie ihren Freunden empfehlen.

Mehr zum Thema

intenet, webdesign, Titanium, Appcelerator, Webtechnologien,iPhone, iPad, objective-c
Apfel für die Hosentasche

Titanium von Appcelerator ermöglicht die Erstellung von mobilen Anwendungen auf Basis von etablierten Webtechnologien - auch für iPhone und iPad.
internet, webdesign, microsoft, webmatrix beta 3, editor, php, html, css, javascript, sql server
Auf dem Prüfstand

Mit WebMatrix entwickelt Microsoft einen Web-Baukasten, der neben einem Webserver Editoren für PHP, HTML, CSS und JavaScript sowie den SQL Server…
combit List & Label 16
Testbericht

Der Reportgenerator List & Label 16 erlaubt neben dem lokalen auch das Web Reporting. Das Produkt bietet einen leistungsfähigen, integrierten…
würfel, spieltisch
Anflug der 3D-Welten

Die Java 3D-API liefert eine Schnittstelle, um 3D-Objekte zu gestalten, diese im 3D-Raum zu bewegen und mit entsprechenden Texturen zu versehen.…
welt, pc,
Meisterwerkstatt

Microsoft sorgt für eine gelungene Überraschung: Die kostenlose Software Webmatrix entpuppt sich als ein leistungsstarkes und leicht zu bedienendes…