Nach wie vor ist die Static-FBML Anwendung der beliebteste Weg einen Landing Tab zu erstellen. Bereits einfache HTML Kenntnisse genügen hier. Geht man einen Schritt weiter so kann man mit FBML sogar unterschiedliche Landing Tabs für Fans und Nicht-Fans erzeugen.

Hinweis auf den Like Button

Dabei besteht der Mehrwert für den Betreiber einer Facebook Page häufig darin, dass er die Nicht-Fans dazu motivieren kann Fan zu werden. Dies geschieht zumeist mit einem Hinweis auf den Like Button oberhalb des Tabs.

Die folgende Methode erlaubt es einen funktionierenden Like Button für die Fanpage direkt in einem Static FBML Tab einzubauen. Aber Achtung: Dieses Vorgehen verstößt gegen Facebook Richtlinien und erfolgt deshalb auf eigene Gefahr.

1. Facebook selbst bietet keine Version des Like-Buttons für Static-FBML an. Also muss der Button von einem anderen Element kommen. Wir greifen hier auf das Comments Modul zurück und bauen die folgenden Zeilen ein:
   <fb:comments xid=”EINDEUTIGE_ID” canpost=”true” candelete=”false” returnurl=”http://www.facebook.com/YOURVANITY”>
   </fb:comments>
   XID und URL müssen entsprechend angepasst werden.
   (weiterlesen …)

Gastbeitrag von Martin Hairer

CSS ist heute das A und O um Static FBML Reiter hübsch zu gestalten. In etlichen Beispielen wie z. B. “Pimp my StaticFBML” wird das CSS als InsideCSS dargestellt.
Microsoft Internet Explorer 6/7 und auch die Version 8 unterstützen kein Inside CSS in StaticFBML. Was nun? Die Internet Explorer-User ignorieren? Nein, natürlich nicht, der FBML Reiter soll ja für alle nutzbar sein. Die Lösung lautet „External CSS“. Aber auch hier gilt es noch, das ein oder andere zu beachten.

Zwei Dinge sind notwendig:

1. Webspace für die CSS Datei.
2. Den Static FBML Reiter, in dem man das CSS verwenden möchte

Egal, ob du für das Hosting eine kostenpflichtige Webspace- oder eine Gratis-Variante wählst. Es kann problemlos auf Dienste wie Googlesites zurückgegriffen werden.

Schritt für Schritt

1. Erstelle die CSS Datei “style.css” und öffne sie in einem Editor.
2. Der Inhalte der CSS Datei kann wie folgt aussehen:

   @charset "UTF-8";
    
   #testID{
   width: 406px;
   height: 375px;
   }
   .testTAG {
   width: 406px;
   height: 375px;
   }

   Einfach dein aktuelles CSS rein kopieren.

3. Bereitstellung der CSS Datei am Webspace (z. B. FTP upload)
4. Einbindung in den StaticFBML Reiter:

   E-Mail – <a href="http://www.facebook.com/mhairer" target="_new">Facebook</a> – <a href="https://www.xing.com/profile/Martin_Hairer" target="_new">XING</a> – <a href="http://www.unplugged-network.at" target="_new">http://www.unplugged-network.at</a>
    

Facebook Developer Roadmap

Wie wir gerade  auf Allfacebook.com gelesen haben wird Facebook sich in Zukunft von der eigenen Programmiersprache FBML verabschieden und in Zukunft iFrames erlauben. In der Meldung von Facebook liest sich das so:

We are also moving toward IFrames instead of FBML for both canvas applications and Page tabs. As a part of this process, we will be standardizing on a small set of core FBML tags that will work with both applications on Facebook and external Web pages via our JavaScript SDK, effectively eliminating the technical difference between developing an application on and off Facebook.com.

We will begin supporting IFrames for Page tabs in the next few months. Developers building canvas applications should start using IFrames immediately. By the end of this year, we will no longer allow new FBML applications to be created, so all new canvas applications and Page tabs will have to be based on IFrames and our JavaScript SDK. We will, however, continue to support existing implementations of the older authentication mechanism as well as FBML on Page tabs and applications.

Wenn wir die Meldung korrekt interpretieren heißt dies:

• Zum Jahresende werden keine neue FBML Tabs/Applications mehr möglich sein
• Die Tabs/Apps müssen in Zukunft auf iFrames und der JavaScript SDK basieren
• Die iFrames Funktion wird in den nächsten Monaten wieder freigeschaltet
• Facebook minimiert die FBML Funktionalität auf ein Minimalset an FBML Core Tags
• Alte FBML Tabs/Apps werden weiterhin unterstützt

Diese Ankündigung ist besonders für zwei Nutzer- und Entwicklergruppen interessant:

1. Plattform Developer – Die “richtigen” Facebook Programmierer dürften sich über die Meldung freuen, waren doch iFrames in Kombination mit der JavaScript SDK sowieso die beliebtere Alternative auf der Plattform. Mit der Möglichkeit iFrames auch in Page Tabs zu nutzen dürften Programmierer Zeit und Kosten sparen.
2. Page Admins – Sie nutzen sehr gern die Static FBML App um eigene Tabs zu gestalten. Diese Methode ist für eigene Tabs sowohl einfach als auch effektiv. Welche Auswirkungen hier auf Page Admins zukommen müssen wir erst noch recherchieren. Ob die Static-FBML App in Zukunft wegfällt wissen wir nicht genau, wenn ja dürfte dies für einigen Unmut sorgen. Allerdings müsste Facebook hier für eine entsprechende Alternative sorgen. Dennoch dürften sich auch diese Zielgruppe über iFrames freuen, da sie über die JavaScript SDK auch auf neue Varibalen, wie etwa den Nutzernamen zugreifen können.

Wie ihr seht ist das Thema bei uns auch noch nicht ganz geklärt. Wir werden bestimmt noch das ein oder andere Mal im Detail darüber berichten.

Facebook Pages

Ein Blick in unserer Statistiken zeigt, unsere Leser sind wild auf FBML Tabs und glaubt man so manchen Experten so ist es ein Muss diese auf der eigenen Facebook Page zu nutzen. Aber wie nützlich sind die eigenen Facebook Tabs denn nun wirklich?

Kurze Antwort: Sehr nützlich – aber auch nur, wenn sie richtig genutzt werden und einen konkreten Sinn erfüllen. In wirklich vielen Fällen sehen wir diesen Sinn allerdings nicht. Oft wird versucht die “alten” Ansätze und Methoden vom Webauftritt in Facebook zu pressen weil Facebook als neues Kommunikationsmedium nicht verstanden wird. Was man dann oft vorfindet sind Welcome Tabs die aus einem Call-To-Action in Form eines Bildes bestehen, langweilige statische Inhaltsseiten die das Unternehmen nochmals darstelen oder Produktvorstellungen die schon auf der klassischen Webseite keine Beachtung gefunden hatten. Viel zu selten findet man dort interaktive Elemente, Inhalte die für die Facebook Zielgruppe aufbereitet wurden oder dynamische und aktuelle Informationen. Wirklich schade ist das vor allem deshalb, weil die Zeit die in Custom Tabs investiert wurde besser in eine gute Strategie geflossen wäre welche auf die vorhandenen Funktionen von Facebook aufbaut. Oft wird vergessen das native Tabs wie Photos, Videos oder Events einiges mehr an Potential bieten als viele Custom Tabs. In nativen Tabs können Nutzer interagieren und erzeugen so Viralität. Die Punkte treten dabei nicht nur bei kleinen unerfahrenen Unternehmen auf sondern durchaus auch bei großen Konzernen die das Thema noch nicht ganz verstanden haben. Was muss als ein “nützliches” Tab unserer Meinung nach bieten: (weiterlesen …)

Vor einiger Zeit haben wir euch vorgestellt wie in Facebook FBML Tabs angelegt werden können. Der Beitrag gehört bis Heute zu den beliebtesten im Blog.  Unserer Gastautor Martin Hairer zeigt uns was noch so alles in FBML steckt und welche Tricks angewendet können.

Download:
Tutorial – Pimp my StaticFBML – 10 Tricks und Tipps für Static FBML Tabs
PDF, 3.5 MB (Share & Embed via Scribd)

Wer will kann den Beitrag auch direkt hier im Blog lesen:

19.10.2010 – ACHTUNG: Unsere Blogsoftware hat die Codes im Beitrag verschlampt, um die vollständigen Codes zu sehen müsst ihr das oben verlinkte PDF oder die Version auf Scribd benutzen.

Facebook FBML Programmierung

Static FBML Boxen/Reiter können mehr als die Meisten glauben. Für viele Anforderungen reicht eine Static FBML Landingpage aus. Nur wie wird die Landingpage jetzt auch noch hübsch und mit welchen Tricks kann die Page dann noch etwas mehr als die anderen? Das Webseitendesign 1 zu 1 in Facebook nachzubauen macht meist wenig Sinn. Zwar wäre der Wiedererkennungswert sehr hoch jedoch sind die wenigsten Webseitendesign´s für die max. Breit von 520px ausgelegt. Ein neues / oder abgestecktes Design muss her. Mit FBML Chaos und wenig HTML/CSS Kreativität sehen sich die meisten “Static FBML” Admins konfrontiert. Wir bringen etwas Licht ins dunkel. Eingeschränkte Möglichkeiten in Static FBML sollte keine Ausrede für schlechtes Design und schlechte Umsetzung sein. HTML und CSS können hier weiterhelfen. Zur Erweiterung können noch FBML Tags verwendet werden. HTML und CSS Grundkenntnisse reichen aus um eine „hübsche“ Landingpage zu basteln.

Dieses Beitrag baut auf das Tutorial „Eigene Tabs mit FBML auf Facebook Fan Pages gestalten“ auf. Begleitend haben wir die 10 Tipps und Tricks auch auf einer Demolandingpage erstellt. Diese findest du hier.

10 Tricks und Tipps für Static-FBML.

1. Dialogwindows
2. Links
3. Image Tumbnail Gallery
4. Glossytext
5. Listen als Block anzeigen
6. „Zitate“ im Text
7. VideoSlideshow
8. Freundschaft?
9. Rotation
10. Freunde einladen

1. Dialogwindows

(weiterlesen …)