Eine Einführung in FBJS: Eigene Javascript-Tabs auf Facebook Pages

Eine Einführung in FBJS: Eigene Javascript-Tabs auf Facebook Pages


Facebook FBJS

In unserem neusten Whitepaper stellt euch Mario Bartlack die Möglichkeiten von Facebook JavaScript (FBJS) vor. Er geht im Detail auf die Eigenheiten ein, spricht Möglichkeiten an und stellt einige Codebeispiel vor die ihr direkt nutzen könnt:

Download:
Einführung in FBJS: Eigene Javascript-Tabs auf Facebook Pages
PDF 3.5 MB (Share & Embed via Scripd)

hline

– Gastbeitrag von Mario Bartlack (bytepark GmbH) –

Der nachfolgende Beitrag ist eine Einführung in das Thema FBJS und beantwortet, was FBJS eigentlich ist, was man damit machen kann und was nicht. Zur Demonstration sind einige kurze Beispiele und natürlich auch Programmcode eingefügt. Die Einführung richtet sich als vor allem an diejenigen, die bereits Erfahrung mit Javascript sammeln konnten und ihre Fähigkeiten auch auf der Facebook-Plattform anwenden möchten.

FBJS (Facebook Javascript) ist Facebooks Antwort für Entwickler, die Javascript in ihren Facebook-Anwendungen nutzen wollen. Auch wenn einem nicht der komplette Satz an Javascript-Techniken zur Verfügung steht, bietet Facebook dennoch sehr vielfältige Bibliotheken für verschiedenste Aufgaben an. Es gibt Methoden für DOM-Manipulationen, Animationen, Event-Handling, Dialoge sowie AJAX-Funktionalitäten. Mit diesen Werkzeugen lassen sich einfachste „Hello-World“-Funktionen aber auch komplexe und interaktive Anwendungen entwickeln.

FBJS innerhalb eines Tabs läuft in einer Sandbox. Das bedeutet, das Javascript von Facebook vor der Ausgabe verändert wird, um sicherzustellen, dass keine vorhandenen Objekte von Facebook überschrieben werden. Es dürfen also nur die Variablen und Funktionen genutzt werden, die man selbst geschrieben hat und die auch von Facebook erlaubt sind.

So wird z.B.

var prop = „someProperty“;
function someMethod(param) {
}

umgeschrieben in

var a12345678_prop = „someProperty“;
function a12345678_someMethod(param) {
}

a12345678 steht hier stellvertretend für die App-ID. Damit wird quasi ein Namespace erzwungen, in dem euer Javascript ausgeführt wird.
hline

Einschränkungen

Den Möglichkeiten, die von Facebook bereitgestellt werden, stehen zum Teil erhebliche Einschränkungen gegenüber.

  • Grundsätzlich sind keine externen Skripte erlaubt
  • Es besteht kein Zugriff auf das globale window-Objekt
  • Die Alert-Funktion wurde entfernt, für Benachrichtigungen kann aber sehr leicht die Dialog-Klasse genutzt werden
  • Die Browser-Konsole funktioniert weiterhin
  • Automatisch ausgeführtes Javascript wird unterdrückt (zur Aktivierung ist erst eine einmalige Benutzeraktion (bspw. Mausklick) erforderlich, bevor der von euch geschriebene Javascript-Block ausgeführt wird)
  • Ebenso betroffen sind eventuell vorhandene Mouseover-/Mouseout-Events
  • Arrays müssen als Literal erstellt werden (sollte man sowieso generell so machen)
var arr = new Array(); //falsch
var arr = []; //richtig

Durch die o. g. Einschränkungen ist leider auch der Einsatz von Javascript-Bibliotheken wie jQuery, YUI, prototype etc. nicht möglich. Manch einer von euch wird sich an dieser Stelle vielleicht fragen: „Keine externen Bibliotheken? Muss ich jetzt etwa alles alleine schreiben? Das ist mir viel zu aufwendig.“

In der Tat sind mir diese Gedanken anfangs auch durch den Kopf geschossen. Glücklicherweise stellt Facebook ein Toolset zur Verfügung, mit dem man in die Lage versetzt wird, einen Großteil an allgemeinen und speziellen Aufgaben und Anforderungen zu lösen. Welche dies sind, stelle ich euch im folgenden Abschnitt vor.
hline

DOM-Manipulationen

Viele der regulären Methoden in Javascript für die Manipulation vom DOM funktionieren weiterhin (appendChild, insertBefore, removeChild, cloneNode). Einige Eigenschaften wie parentNode, nextSibling, src, href wurden aber durch entsprechende Getter/Setter ersetzt. Andere wiederum wurden ersatzlos gestrichen (bspw. innerHTML).

Hier ein paar Beispiele:

Javascript Getter Setter
className getClassName setClassName
style getStyle setStyle
href getHref setHref

CSS-Styles lassen sich sehr einfach über die setStyle-Methode ändern.

obj.setStyle({color: 'black', background: 'white'});
obj.setStyle('color', 'black');

Achtung! Styles müssen in CamelCase geschrieben werden. Ansonsten funktioniert die Zuweisung nicht.

obj.setStyle('background-color', 'black'); //geht nicht
obj.setStyle('backgroundColor', 'black'); // geht

Beachtet ebenfalls die Angabe von px bei z. B. Größenangaben. Dies sollte nicht vergessen werden.

obj.setStyle('width', '100'); //geht nicht
obj.setStyle('width', '100px'); // geht

Eine Änderung, die nicht auf den ersten Blick als solche zu erkennen ist, ist die Methode document.getElementById. Diese kann wie gewohnt verwendet werden, nur dass die Rückgabe ein von Facebook erzeugtes Objekt ist und nicht direkt das erwartete HTML-Objekt.

Es gibt noch eine Vielzahl mehr. Eine gute Übersicht über die einzelnen Methoden und
Eigenschaften findet ihr zusätzlich hier:
http://wiki.developers.facebook.com/index.php/FBJS#FBJS_DOM_Objects
hline

Events

Events können über die W3C-Methode addEventListener hinzugefügt werden. Dabei wird das Eventobjekt als Argument an den Eventhandler übergeben. Im Eventhandler hat man dann Zugriff auf die Eigenschaften target, type, pageX, pageY, ctrlKey, keyCode, metaKey, und shiftKey sowie auf die Methoden stopPropagation und preventDefault.

Das Hinzufügen von Eventlistener funktioniert so:

obj.addEventListener('mouseover',mouseOverHandler);
function mouseOverHandler(event) {
//do some crazy stuff here
}

hline

Animationen

Facebook stellt uns eine leistungsstarke und robuste Animationsbibliothek zur Verfügung. Mit geringem Aufwand kann man recht schnell komplexe CSS-Animationen erstellen.

Die Basissyntax sieht wie folgt aus:

Animation(object).to('property', 'value').go();

Möchte man mehrere Eigenschaften gleichzeitig animieren, verkettet man ganz einfach die Methoden dafür.

Highlight

Eine sehr interessante Möglichkeit für sequentielle Animationen bieten die Checkpoints.
Mit diesen kann man beliebig viele Animationen hintereinander ausführen lassen.
Kopiert das Skript einfach mal in eure Static-FBML-Box, klickt anschließend auf das Quadrat und schaut, was passiert.


Es gibt noch einige zusätzliche Funktionen wie by, from, hide, show und blind. Eigene easing-Funktionen sind ebenfalls möglich.

Für dieses Thema findet sich auch im Wiki eine gute Übersicht.
http://wiki.developers.facebook.com/index.php/FBJS/Animation
hline

Dialoge

Mit der Dialog-Klasse lassen sich sehr einfach Dialogfenster im Stil von Facebook anzeigen.
Eine Auswahl zwischen den beiden Typen Dialog.DIALOG_POP und Dialog. DIALOG_CONTEXTUAL ist möglich. Es gibt Eventhandler für onconfirm und oncancel. Titel, Inhalt und die Label der Buttons sind anpassbar.

Nachfolgend seht ihr zwei Beispiele mit den dazugehörigen Dialogfenstern.

Vanilla DIALOG_POP.

Dialog Popup

CONTEXTUAL_DIALOG with two buttons: Foo and Bar

Dialog Contextual

Weitere Beispiele (inklusive die o. g.) findet ihr hier:
http://wiki.developers.facebook.com/index.php/FBJS/Examples/Dialogs

Anscheinend gibt es mit dieser Klasse aber ein Problem im IE7. In der Bugbase sind Einträge vorhanden, die noch offen sind. Testet es jedenfalls vorher in allen relevanten Browsern um keine unliebsame Überraschungen zu vermeiden.
hline

AJAX

Facebook stellt eine leistungsstarke AJAX-Bibliothek zur Verfügung, deren Verwendung sehr einfach ist, wie das folgende Beispiel demonstriert:

var ajax = new Ajax();
ajax.responseType = Ajax.JSON; //Ajax.FBML, Ajax.RAW
ajax.ondone = function(data) {
//Rückgabe vom Server
}
ajax.onerror = function() {
//Fehler
}
var postParams = { "param1" : value1, "param2" : value2 };
var getParams = 'getparam=test';
ajax.post('http://example.com/testajax.php?'+getParams, postParams); 

Parameter, die man per GET übertragen möchte, hängt man einfach an die URL ran, Parameter, die man per POST übertragen möchte, als zusätzlichen Parameter in der Funktion post.

Weiterführende Informationen und Beispiele findet ihr hier:
http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax

Trotz der eingangs genannten Einschränkungen decken die Möglichkeiten, die von Facebook angeboten werden, dennoch einen sehr großen Teil von dem ab, was einem im täglichen Umgang mit Javascript über den Weg läuft. Sicher ist es so, dass man an manchen Stellen ein wenig der Komfort von den etablierten Javascript-Bibliotheken vermissen lässt. Allerdings tut dies der Entwicklung von Anwendungen mit FBJS keinen allzu großen Abbruch. Auf jeden Fall sollte man aber einen entsprechenden Editor benutzen, die Textarea auf Facebook eignet sich in keinster Weise dafür.

Damit Ihr euch ein Bild davon machen könnt, wie das letztlich alles aussieht, habe ich zwei einfache Beispiele vorbereitet, an denen ich die verschiedenen o. g. Punkte demonstrieren werde.
Die Skripte sind per Copy&Paste lauffähig. Einfach kopieren und in eure FBML-Box einfügen.
hline

Beispiel Tabbar

Hier haben wir eine einfache Tabbar. Bei Klick auf einen Tab bewegt sich der dazugehörige Inhalt in den Anzeigebereich. Wie ihr seht, ist der FBJS Teil in diesem Fall der kleinste Teil der Anwendung.



  • Inhalt 1
  • Inhalt 2
  • Inhalt 3
  • Inhalt 4
  • Inhalt 5
  • Inhalt 6
  • Inhalt 7

hline

Beispiel Formular

Hier habe ich ein einfaches Formular mit einer Auswahl an verschiedenen Formularelementen, welches die grundlegende Verarbeitung aufzeigt, erstellt. In diesem Beispiel verzichte ich vollständig auf die Formatierung über CSS. Hier zählt nur die Funktionalität. Dialog-Fenster sowie Ajax finden hier Verwendung. Eine sehr nützliche Helfermethode ist ‚serialize‘ für die Verarbeitung von Formularen, welche einem sehr viel Arbeit abnimmt.

Text
Checkbox 1
Checkbox 2
Radio 1
Radio 2

Das dazugehörige PHP-Skript sieht so aus:


Beachtet, dass Werte, die nicht im Formular angeklickt wurden (Checkboxen) auch nicht mit übertragen werden.

Ich hoffe, dass ich euch einen Überblick über FBJS verschaffen konnte und in Zukunft immer mehr Entwickler diese Technologie nutzen, um den Benutzer ein noch besseres Erlebnis auf Facebook bieten zu können. Vielen Dank für die Aufmerksamkeit.

Über den Autor:
Mario Bartlack
arbeitet für bytepark (www.bytepark.de) und ist RIA-Entwickler mit Fokus auf die Flash-Plattform. Privat ist er als Moderator auf Flashhilfe.de zu finden.

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone

Es gibt 12 Kommentare

Deinen hinzufügen
  1. 1
    web20typ_ – Meine Bookmarks vom 24.05. bis 26.05.

    […] facebookmarketing.de | Eine Einführung in FBJS: Eigene Javascript-Tabs auf Facebook Pages – Der nachfolgende Beitrag ist eine Einführung in das Thema FBJS und beantwortet, was FBJS eigentlich ist, was man damit machen kann und was nicht. Zur Demonstration sind einige kurze Beispiele und natürlich auch Programmcode eingefügt. Die Einführung richtet sich als vor allem an diejenigen, die bereits Erfahrung mit Javascript sammeln konnten und ihre Fähigkeiten auch auf der Facebook-Plattform anwenden möchten. facebook facebookconnect programming javascript pages […]

  2. 4
    Nera

    Für eine Facebook Fanpage habe ich einen individualisierten „Tab“ über die von Facebook generierten Tabs (wie Pinnwand, Info, Diskussionen etc) hinaus mittels FBML hinzugefügt. Es soll dort ein Informationstext eingefügt werden. Aufgrund seiner Länge müsste dieser jedoch formatiert werden, d.h. in Blocksatz und in einer etwa halb so schmalen Kolumne.
    Geht so etwas?
    Ich bin nicht sehr script-bewandert und würde mich über nicht allzu komplizierte Tipps und Hilfen jeglicher Art freuen!

  3. 6
    Nera

    Danke! Das hatte ich schon probiert. Wenn ich html codes eingebe, dann ist der gesamte Text auf der „Seite“ des hinzugefügten Tabs nicht mehr sichtbar. Man sieht quasi nur noch die Überschrift oben auf dem Tab.
    Deswegen war ich davon ausgegangen, dass man dort nicht mit html weiterkommt. Weitere Tipps dazu?
    Vielen Dank!

  4. 7
    Janet

    Ein gelungenes Tutorial! Hierzu habe ich nun noch eine Frage, die ihr mir vermutlich binnen Sekunden beantworten könnt. Welcher Befehl ist für die Links zuständig? Ich würde es gerne ändern, dass jeder Link in einem Tab mit Zeilenumbruch und Kasten dargestellt wird.
    Freue mich über eure Antwort und wünsche gutes Gelingen beim Umzug,

    LG Janet

  5. 8
    Thomas

    Gelungenes Tutorial. Können über das Formular auch infos des Benutzers übertragen werden? Ich meine zB der Username oder ID, dass man beispielsweise einen verknüpften namen zu dem Facebook User hätte?

  6. 9
    Iris He

    Hallo!
    ich binde meine inhalte als eigene app in den Tag der Fanpage ein. Egal was ich bei onclick reinschreibe, der Inhalt des Tabs wird immer neu geladen.
    Bsp:Vanilla DIALOG_POP.
    ->Die Textausgabe funktioniert, aber gleichzeitig lädt der Inhalt im Tab neu.
    ->wie kann ich das verhindern?
    ->mein onclick wird automatisch von fb ersetzt.
    Bsp: (new Image()).src = ‚/ajax/ct.php?app_id=111430092259470&action_type=3&post_form_id=15cfcbf6a8d38d16d7b60107726c6177&position=3&‘ + Math.random();goURI(„\/profile.php?fbhref=adventskalender.html%23&id=141432232573173&app_page=1&v=app_111430092259470“);fbjs_sandbox.instances.a111430092259470.bootstrap();return fbjs_dom.eventHandler.call([fbjs_dom.get_instance(this,111430092259470),function(a111430092259470_event) {new a111430092259470_Dialog().showMessage(‚Dialog‘, ‚Hello World.‘);return false;},111430092259470],new fbjs_event(event));return false;

  7. 10
    ivvon

    Servus an Alle!
    Habe eine Frage bzgl. FBML.
    Bei mir funktioniert es tadellos, der Reiter funkt. bei jedem Browser, ausser bei Google Chrome.
    Warum?
    Bitte um Hilfe
    lg

+ Hinterlasse einen Kommentar