Facebook Tab-Apps mit TYPO3 TYPO3camp 11

Facebook Tab Apps
with TYPO3
Dirk Döring * sky-netconcept
TYPO3camp11 munich

Whats App?
facebook bietet dem User an, Inhalte fremder Seiten, zum Beispiel der eigenen Website auf seiner
facebook Unternehmensseite abzubilden. Dies kann nützlich sein, um Besucher der Seite zum liken
zu animieren, zu Gewinnspielen zu animieren, etc. Der Content wird in einen iFrame (Canvas) geladen
und als eigene Applikation unter dem Profilbild dargestellt, sogenannte Page Tabs.

Um den Inhalt einer TYPO3 Seite auf Facebook darzustellen, werden zwei Dinge benötigt:

1. Eine TYPO3 Seite mit Frontenausgabe optimiert für facebook Apps, in diesem Fall als Page-Tab
2. Eine facebook Tab-App


TYPO3 für facebook Page Tabs optimieren
Zunächst empfiehlt es sich eine eigene Seite im Seitenbaum von TYPO3 anzulegen. Wir verwenden
hierfür eine subdomain (Bsp: facebook.domain.com), damit der Content auch sauber zugeordnet
werden kann.

Die Seite selber entspricht einer Standard TYPO3-Seite und ist grundsätzlich an keinerlei Bedingungen
geknüpft, man kann also seinen Gewohnheiten nachgehen. Allerdings gibt facebook ein paar Parameter
vor, damit die App erstens überhaupt funktioniert und zweitens auch sauber dargestellt wird.

• Doctype sollte HTML5 sein
• Breite des Content darf 520px nicht überschreiten
• Der <body> muss mit einem div mit der ID “fb-root” beginnen
• Damit der iFrame die Seitenlänge aufgreift, benötigt man ein wenig JavaScript
• um Scrollbalken zu vermeiden muss der <body> auf overflow:hidden stehen


TYPO3 - HTML Template
Das Template der Seite mit den facebook Tags. Relevant sind lediglich das erste DIV mit der ID fb-root
und die Angabe der width bei dem Content umschliessenden Element.

Das übrige Vorgehen entspricht einer normalen Seite. Herbei ist es egal, woher der Content geliefert
wird, man kann sich also auch z.Bsp. mit TemplaVoila behelfen, wenn dies den eigenen Vorlieben
entspricht .


TYPO3 - TYPOScript-Paramter
facebook benötigt für den Resize des Canvas ein Script und eine appID, die in der Seite übergeben
werden muss.

Soll die eigene Website mehrere Apps beinhalten macht es Sinn die appID variabel zu übergeben. In
unserem Fall übergeben wir die ID einfach in den Constants der Seite.


TYPO3 - Backend
So sieht unsere Seite jetzt im Backend aus.


TYPO3 - Frontend
Und so im Frontend mit etwas CSS ;)


facebook - App erstellen
Um eine App zu erstellen benötigt man einen gültigen Account und muss gleichzeitig Admin einer
Seite sein. Hierfür verlangt facebook entweder eine Kreditkarten- oder Handynummer um sich zu
verifizieren. Hat man eine Seite angelegt gelangt man über die facebook Suche nach «Entwickler»
zur facebook-Developer-Anwendung und klickt dort rechts oben auf Anwendungen.

Canvas App Tutorial
http://developers.facebook.com/docs/appsonfacebook/tutorial/#canvas
Page Tab Tutorial
http://developers.facebook.com/docs/appsonfacebook/pagetabs/


facebook - App erstellen - Allgemeine Informationen
Die Felder sind weitestgehend selbsterklärend und haben seit der neuen Version einen netten Hilfetext,
der eine genauere Aussage über die einzutragenden Inhalte trifft.


facebook - App erstellen - weitere Felder

< ab 1.10 Pflicht

< ab 1.10 Pflicht


facebook - App einbinden
Sind alle Felder ausgefüllt und ist die App gespeichert, klickt man in der Editierungsansicht in der linken
Spalte auf »View App Profile Page« und man gelangt zur App-eigenen Facebook Seite. Hier klickt man
wiederum links unten auf »zu meiner Seite hinzufügen« und wählt die Seite aus, der man es hinzufügen
möchte. Fertig :)


Sonstiges
Es gibt weit mehr Einstellungen, die man vornehmen kann um z.Bsp. den Like-Button abzufragen.
Für den Einstieg sollte die Session genügen, um seine erste App mit TYPO3 auf facebook zu bringen.

Viel Spass dabei!

Dirk Döring
dd@sky-netconcept.de


Facebook Tab-Apps mit TYPO3 TYPO3camp 11

Recommended

Recommended

More Related Content

Similar to Facebook Tab-Apps mit TYPO3 TYPO3camp 11

Similar to Facebook Tab-Apps mit TYPO3 TYPO3camp 11 (17)

Facebook Tab-Apps mit TYPO3 TYPO3camp 11