• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Facebook Tab-Apps mit TYPO3 TYPO3camp 11
 

Facebook Tab-Apps mit TYPO3 TYPO3camp 11

on

  • 3,661 views

Create faacebook Tab-Apps with TYPO3, Session from TYPO3camp Munich.

Create faacebook Tab-Apps with TYPO3, Session from TYPO3camp Munich.

Statistics

Views

Total Views
3,661
Views on SlideShare
3,625
Embed Views
36

Actions

Likes
3
Downloads
33
Comments
0

3 Embeds 36

http://confluence.jakota.de 25
http://lanyrd.com 7
http://paper.li 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Facebook Tab-Apps mit TYPO3 TYPO3camp 11 Facebook Tab-Apps mit TYPO3 TYPO3camp 11 Presentation Transcript

    • Facebook Tab Appswith TYPO3Dirk Döring * sky-netconceptTYPO3camp11 munich
    • Whats App?facebook bietet dem User an, Inhalte fremder Seiten, zum Beispiel der eigenen Website auf seinerfacebook Unternehmensseite abzubilden. Dies kann nützlich sein, um Besucher der Seite zum likenzu animieren, zu Gewinnspielen zu animieren, etc. Der Content wird in einen iFrame (Canvas) geladenund 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-Tab2. Eine facebook Tab-App Dirk Döring * sky-netconcept
    • TYPO3 für facebook Page Tabs optimierenZunächst empfiehlt es sich eine eigene Seite im Seitenbaum von TYPO3 anzulegen. Wir verwendenhierfür eine subdomain (Bsp: facebook.domain.com), damit der Content auch sauber zugeordnetwerden kann.Die Seite selber entspricht einer Standard TYPO3-Seite und ist grundsätzlich an keinerlei Bedingungengeknüpft, man kann also seinen Gewohnheiten nachgehen. Allerdings gibt facebook ein paar Parametervor, 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 Dirk Döring * sky-netconcept
    • TYPO3 - HTML TemplateDas Template der Seite mit den facebook Tags. Relevant sind lediglich das erste DIV mit der ID fb-rootund die Angabe der width bei dem Content umschliessenden Element.Das übrige Vorgehen entspricht einer normalen Seite. Herbei ist es egal, woher der Content geliefertwird, man kann sich also auch z.Bsp. mit TemplaVoila behelfen, wenn dies den eigenen Vorliebenentspricht . Dirk Döring * sky-netconcept
    • TYPO3 - TYPOScript-Paramterfacebook benötigt für den Resize des Canvas ein Script und eine appID, die in der Seite übergebenwerden muss.Soll die eigene Website mehrere Apps beinhalten macht es Sinn die appID variabel zu übergeben. Inunserem Fall übergeben wir die ID einfach in den Constants der Seite. Dirk Döring * sky-netconcept
    • TYPO3 - BackendSo sieht unsere Seite jetzt im Backend aus. Dirk Döring * sky-netconcept
    • TYPO3 - FrontendUnd so im Frontend mit etwas CSS ;) Dirk Döring * sky-netconcept
    • facebook - App erstellenUm eine App zu erstellen benötigt man einen gültigen Account und muss gleichzeitig Admin einerSeite sein. Hierfür verlangt facebook entweder eine Kreditkarten- oder Handynummer um sich zuverifizieren. 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 Tutorialhttp://developers.facebook.com/docs/appsonfacebook/tutorial/#canvasPage Tab Tutorialhttp://developers.facebook.com/docs/appsonfacebook/pagetabs/ Dirk Döring * sky-netconcept
    • facebook - App erstellen - Allgemeine InformationenDie Felder sind weitestgehend selbsterklärend und haben seit der neuen Version einen netten Hilfetext,der eine genauere Aussage über die einzutragenden Inhalte trifft. Dirk Döring * sky-netconcept
    • facebook - App erstellen - weitere Felder < ab 1.10 Pflicht < ab 1.10 Pflicht Dirk Döring * sky-netconcept
    • facebook - App einbindenSind alle Felder ausgefüllt und ist die App gespeichert, klickt man in der Editierungsansicht in der linkenSpalte auf »View App Profile Page« und man gelangt zur App-eigenen Facebook Seite. Hier klickt manwiederum links unten auf »zu meiner Seite hinzufügen« und wählt die Seite aus, der man es hinzufügenmöchte. Fertig :) Dirk Döring * sky-netconcept
    • SonstigesEs 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öringdd@sky-netconcept.de Dirk Döring * sky-netconcept