Pimp my StaticFBML – 10 Tipps und Tricks für Static FBML Tabs

Pimp my StaticFBML – 10 Tipps und Tricks für Static FBML Tabs


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:

hline

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.

hline

Facebook FBML Programmierung

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


Möchte man seine Produkte mit Produktinfos auf Landinpages versehen, wird die Seite meist sehr lang und unübersichtlich. Das Verlinken zu den Produktinfos auf der Homepage wird oft nicht angenommen. Das gleiche Problem stellt sich natürlich auch bei Detailinformationen zu Personen, Hotelzimmer, Skigebiete etc. Der FBML Tag DIALOG eignet sich bestens für diese Aufgabe.

Es können Bilder, Texte, Tabellen, Links etc. in ein Dialogfenster gepackt werden. Auf der begleitenden Demolandingpage haben wir fast alle Beispiele in ein Dialogfenster gepackt. Hier ein Beispiel:

FBML Dialog Tag

Wie es funktioniert:

Beispiellink zum Dialogfenster
INSER YOUR DIALOG TITLE
INSERT YOUR HTML CONTENT

Es wird ein Link zum aufrufen des Dialogs benötigt und der Dialog selbst. Natürlich können noch weitere Buttons mit dem Tag < fb:dialog-button > hinzugefügt werden. Der „close_dialog“ Parameter wird zum schließen und zurückkehren auf die Hauptseite benötigt.

2. Links

Benötigen wir Hyperlinks ? Wollen wir Hyperlinks? Interne oder Externen Hyperlinks? Wieviele davon? In Bezug auf Verlinkungen stellen sich viele Fragen. Jedoch unabhängig von den Antworten ist eines klar. Der Benutzer muss den Hyperlink erkennen. Egal ob es Bild/Button oder Text Link sein soll. Der Benutzer muss erkennen das hier etwas passiert. Leider findet man viel zu oft reine „area, map“ Tags in Bilder die man meist nur durch Zufall findet. Um dies zu verbessern ist weder FBML noch FBJS oder Javascript notwendig. Lediglich HTML und CSS.

Die Aktion fehlt meist. Hier zwei einfach Beispiele wie sie einen Text- oder Bildlink erstellen können und Ihn der Benutzer auch als solchen interpretieren kann:

FBML Links

Wie es funktioniert:

Zuerst wird via CSS der onMouseover Effekt erstellt und die Farbe vergeben. Da wir im Beispiel mehrere Links definieren hab ich mich für dein DIV Tag entschieden, damit ich nicht jeden die CSS class definieren muss. Alternativ kann man jeden Hyperlink um den Parameter class=“un-links“ erweitern.


 

Damit ich nicht zuviele Dateien (und somit Chaos) auf meinen Webserver bekommen, hab ich die „Normal“ und „onMouseOver“ Bilder in ein Bild zusammengefügt. Ich lasse in der „normal“ Ansicht nur die obere Hälfte anzeigen und in der onMouseOver Ansicht lediglich die untere Hälfte. Wieder wird dies im CSS definiert und mit dem class Parameter im HTML Link angehängt. So sieht die „like_button.png“ Datei aus:

FBML Like Button

3. Image Tumbnail Gallery.

Gerade in der Produktvorstellung (Hotelzimmer, Schuhe etc.) kommen Bilder gern zum Einsatz, um mit einer kleinen Gallery einen coolen Effekt zu erzielen können Thumbnails zum Einsatz kommen.

FBML Image Gallery

Wie es funktioniert:

CSS ist auch hier wieder das Zauberwort. Ich lasse 100px X 100px Thumbnails mit einen Versatz vom -20px von Oben und -50px von Links anzeigen. Thumbnail Größe und Versatz können natürlich frei gewählt werden. Im HTML verwende ich eine Liste dafür. Der Listen geben ich die CSS id „thumbs“. Als Listenelemente lasse ich die Bilder anzeigen.

4. Glossytext

Apple macht es vor und wir alle nach. Ganz so schlimm ist es natürlich nicht, dennoch erweisen sich Glossyeffekte, gerade in Überschriften, großer Beliebtheit. Natürlich können wir jetzt jede Überschrift mit Gimp oder Photoshop bearbeiten und als Bild speichern, jedoch wird man dadurch sehr statisch und Änderungen werden sehr langsam bis gar nicht gemacht. Hier ein Bespiel wie du einen GlossyHeadline /GlossyHeadlineLink Effekt auf Ihren Text in HTML anwenden können:

FBML Glossy Effekt

Wie es funktioniert:

Headline Test 1

Wir legen ein Bild (z.b. Weiß auf Transparent) direkt über den Text und erzeugen somit eine GlossyEffekt (class glossy). Die Stärke des Effekt hängt von dem Verlauf im Bild ab und kann natürlich nach belieben geändert werden. Als Link mit onMouseOver Effekt haben wir das etwas stärker gemacht (class glossy2) und lassen zusätzlich noch eine Farbveränderung zu. Das ganze wird einen DIV Tag zugeordnet (nicht einem link). Der Text muss zwischen einen SPAN Tag stehen damit der Glossyeffekt auch angewendet wird.

5. Listen als Block anzeigen

Gerade in Produktübersichten oder der ähnlichen werden gerne Listen verwendet. Jedoch kann es vorkommen, dass ein Listenelement nicht nur einem Wort oder Zeile besteht. Damit der Benutzer den Zusammenhang erkennt sollte man die Listenelemente in eine Gruppe zusammenfügen. Hier ein Beispiel:

FBML Listen

Wie es funktioniert:

Die Liste hab ich einfach in eine DIV Tag eingeschlossen der mit der CSS class „block“ versehen ist. Durch den verwendeten Rahmen (Border) wird eine klare Trennung der Einträge erzeugt und durch den onMouseOver Effekt bekommt die Sache wieder etwas Leben. Es muss natürlich nicht auf externe oder interne Seiten verlinkt werden. Verlinke auf ‘#’ dann bekommst du den Link Effekt aber der Benutzer wird nicht auf eine andere Seite gebracht. Rahmen, Hintergrundfarbe, Schrifttyp und Schriftfarbe können natürlich angepasst werden.

6. „Zitate“ im Text

Eine wunderbare Möglichkeit bietet HTML um Zitate in einem Text zu integrieren. Blockquote schreibt sich dieser Tag. Hier ein kleines Beispiel wie man Blockquote hübsch einsetzen kann wenn man Sie mit Bildern kombiniert:

FBML Zitate

Wie es funktioniert:

INSERT YOUR CONTENT

Es wird der Blockquote Tag wie gewohnt aufgerufen und ein DIV geöffnet. Somit wird zu Beginn und am Ende ein Bild eurer Wahl angezeigt. Natürlich dürfen es auch schönere Bilder als die meinen sein.

7. VideoSlideshow

Die Integration von Videos (Bsp. Youtube) in die Landingpage ist nicht nur sinnvoll sondern technisch auch sehr einfach zu realisieren. Der FBML Tag fb:swf und fb:flv sind und wurden ja schon oft vorgestellt und besprochen deswegen gehe ich auf die zwei Tags nicht näher ein. Hier zeige ich ein Beispiel, wie es nicht nur schön aussieht sondern wie man eine Slideshow daraus machen kann.

FBML Video Slideshow

Wie es funktioniert:

Es wird ein DIV Tag definiert der den gesamten Hintergrund abbildet. Darin wird ein DIV Tag geöffnet der die Funktion eines Iframes übernimmt (Iframes sind in StaticFBML nicht zulässig) und darin wir wird die Videozeile geöffnet (hier werden die Videos nebeneinander angezeigt) und der passenden Hintergrund für die Videos darstellt. Jetzt fehlen nur noch die DIV Tags für die Videos selbst. Ich unterscheide zwischen ersten Video und allen nachkommenden. Es kann die Position des ersten Videos (CSS Class video1) definiert werden. Alle anderen Videos ordnen sich dahinter an (CSS Class videos).

8. Freundschaft?

Du möchtest deine Fans anders ansprechen als all die Benutzer die noch zu deinen Freunden werden könnten? Der FBML Tag fb:visible-to-connection sorgt dafür. Hier ein Beispiel:

FBML - Inhalte nur Fans anzeigen

Wie es funktioniert:

INSERT YOUR CONTENT

Hierfür reicht der „visible-to-connection“ Tag vollkommen aus. Als Content kann natürlich alles verwendet werden. Egal ob Slidshow, Gallery oder Dialogwindow.

9. Rotation?

Rotationen lassen Pages viel interaktiver wirken. Der Benutzer sieht bei jedem Besuch etwas anderes. Optimal für Sprüche oder Emotionsfotos. Ein Beispiel findest du auf unserer Demo Page.

Wie es funktioniert:




Demo Text1
Demo Text2
Demo Text3

Man kann beliebig viele random-options wählen. Egal ob es Texte, Bilder, Videos etc sind. Natürlich können Text und z.b. Bilder gemischt werden.

10. Freunde einladen

Dies gehört zu einen den wichtigsten Tools von Facebook. Freunde laden Freunde ein. Facebook stellt auch einen schlichten FBML Tag dafür zur Verfügung. Hier ein Beispiel:

FBML Freunde einladen

Wie es funktioniert:

Der Parameter condensed=“true“ lässt die Freundeseinladung in einer schlichten Box anzeigen. So lässt sich die Box leicht in das Pagedesign einbauen. Maximal 8 Freunde gleichzeitig können eingeladen werden. Die Text können natürlich angepasst werden.

Es muss nicht immer eine App sein

Wie du an den 10 Tips und Tricks gesehen hast, muss es nicht immer eine Facebook Application sein. Mit einen Static-FBML Tab kann vieles abgedeckt werden. Gutes Design, gut erkennbare Markenelemente, kleine Spielereien, liebe zum Detail und kleine Animationen/Aktionen bewirken Wunder. Um die Tipps und Trick sinnvoll einzusetzen sind nur geringe HTML und CSS
Kenntnisse notwendig. Ein weiterer Vorteil findet sich in den Sicherheitseinstellungen für den Benutzer wieder. Er muss nichts akzeptieren oder genehmigen. Static-FBML ist perfekt für den Firmenauftritt in Facebook.

Über den Autor:
Martin Hairer, Gründer und Entwickler der Firma unplugged network mit Schwerpunkt Socialmedia.- und Entertainmententwicklung hat sich auf die Anbindung und Umsetzung von Sonderlösungen spezialisiert. Spiele und Apps am Iphone/Ipad mit Facebookanbindung für Werbekampagnen und die Tourismusbranche gehören zu seinen Kernkompetenzen.
E-MailFacebookXINGhttp://www.unplugged-network.at

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

Es gibt 52 Kommentare

Deinen hinzufügen
  1. 1
    Martin Labuschin

    Ein paar Fehler haben sich eingeschlichen:

    * „Static-FBML“ und „StaticFBML“ ist falsch. Es heißt „Static FBML“.
    * Des weiteren müsste es „10 Tipps und Tricks“ lauten und nicht „10 Trick und Tips“.

  2. 4
    Billy

    Die Möglichkeit des Bild-Links finde ich eine super Idee. Allerdings ist es aus meiner Sicht nicht ganz optimal, seine eigene HP als URL zu hinterlegen. Gibt es hier nicht die Möglichkeit, die Like-URL zu hinterlegen?
    Also quasi den Like-Button von FB zu imitieren?! Der User kennt den Button nur so und wäre verwirrt auf eine externe Seite zu gelangen…

  3. 5
    Alex

    Danke für das schöne Tutorial. Eine kleine Anmerkung habe ich. Das Beispiel mit dem Einbinden der Like-Button-Grafik finde ich etwas unglücklich gewählt. Jemand, der sich nicht so gut auskennt, könnte auf die Idee kommen, daß das auch die Funktionalität des Like-Buttons einbaut. Dies ist nicht der Fall. Ein Like-Button ist meinen Tests nach in einer Static-FBML-Seite nicht möglich. Oder doch?

  4. 6
    Martin Hairer

    Die ButtonGrafik stellt lediglich ein Beispiel dar und hat keine zusätzliche Funktionalität. Der Like-Button war lediglich der erste der mir untergekommen ist *gg*.

    Ja ein einbinden des Tag´s in StaticFBML ist nichtmöglich, auch Iframe´s sind nicht erlaubt. Jedoch gibt es kleine Tricks mit dem die Einbindung dennoch klappt. Dies würde aber den Umfang dieses Tutorials überschreiten.

  5. 7
    Annette Schwindt

    Schönes Follow-Up zu meinem Gastbeitrag damals. Den ein oder anderen Tipp werde ich sicher auch mal umsetzen. V.a. das Dialog-Fenster finde ich interessant!

  6. 9
    Julian

    Richtig guter Beitrag. Ist gebookmarkt und wird sicherlich des öffteren benutz werden. Die Rotation und Dialogwindow umsetzung sind meine Favoriten. Damit kann man mit ersterem ein interessanteres Tab gestallten und mit dem zweiten kann man Details gut unterbringen. Spitzen Zusammenfassung!

  7. 11
    Flo

    Super Beitrag, vielen Dank!
    Wie kann man denn unter die VideoSlideShow noch jeweils einen Kommentar bzw. den Namen des Videos einfügen?

  8. 12
    Martin Hairer

    @flo: Kommentare kannst du mittels ” Tag hinzufügen.
    z.B.:
    . So bekommst du einen “likebutton” und die Möglichkeit zu kommentieren.
    XID ist die eindeutige ID für dieser Kommentare. Es werden 5 Post angezeigt.

    Beispiel 2:

    Die gleiche Möglichkeit nur ohne den “Like-Button”. Also ohne Bezug auf eine bestimmte URL. Du kannst unter jedes Video (jedes video mit einer eignen XID) so etwas einbauen.

  9. 16
    Annika

    Super Beitrag. Leider funktionieren viele Sachen nur im Firefox und werden im IE nicht richtig ausgegeben. Ich hab leider zu wenig Ahnung von CSS und kann so auch keine Verbesserungen posten :-) Aber so ist die Verwendung natürlich nicht optimal.

  10. 18
    Flo

    @Martin
    Vielen Dank, werd ich dann gleich mal versuchen umzusetzen. Allerdings ist heute ein Problem aufgetreten: Der Code zur VideoSlideShow scheint nicht mehr zu funktionieren. Wo gestern noch eine SlideShow war, stehen heute – bei unverändertem Code – die Videos untereinander. Hat Facebook da mal wieder an einer Schraube gedreht?

    Viele Grüße
    Flo

  11. 20
    Martin Hairer

    @Annika: nein, natürlich funktionieren die Sachen auch in IE. IE geht nur anders mit CSS um.
    @Flo: Deine Slideshow wird wahrscheinlich nur im IE nicht richtig angezeigt. Gleich wie bei Annika verarbeitet der IE die Static-FBML Seite etwas anders als die anderen Browser (genauer gesagt die CSS Interpretation).

    In den Beispielen haben wir HTML und CSS Code zusammen angezeigt. IE kann das CSS direkt im Static-FBML nicht lesen. Bitte speichert eure CSS Code´s in eine *.css Datei und verweist im Static-FBML auf diese Datei. So kann auch der IE das CSS lesen und es wird alles richtig angezeigt:
    In unserer Demoseite sieht das wie folgt aus:
    <link href="http://www.unplugged-network.at/fb/pimp_my_fbml/UN_Style.css&quot; rel="stylesheet" type="text/css" />

    Dies ist nur für den Microsoft Interne Exporer (all Versionen) notwendig. Alle anderen Browser können CSS direkt im Static-FBML lesen.

  12. 22
    getimo

    Mich würde interessieren, wie ihr die CSS-Klassen eingebunden habt. Oder habt ihr alles inline gestyled? Im Quelltext eurer Landing Page konnte ich sowas nämlich nicht finden.

  13. 24
    Martin

    super Beitrag! dazu noch eine Frage: ich stoße immer wieder auf Seiten, die einen unterschiedlichen Inhalt auf einem FBML-Reiter in Abhängigkeit von einem User-Attribut ausgeben.
    Beispiel: Fans bekommen einen anderen Inhalt angezeigt als Nicht-Fans oder User bekommen den Inhalt in ihrer Sprache angezeigt.
    Wie kann man das umsetzen?

  14. 26
    Sebrina D.

    Hallo!

    Ich habe mit diesem tollen Code die “Freunde einladen” Box meiner Seite hinzugefügt. Leider hab ich ein Problem mit dem Ergebnis. Im Einladungstext erscheint immer “FBML 5”. Siehe:

    Sabrina hat dir eine Einladung zu Static FBML 5 gesendet:

    Lade deine Freunde zur XXX ein!

    Wie bekomm ich dieses Static FBML 5 da raus? Habe schon alles probiert, im Code ist das nicht enthalten? Meine FBML Box heisst auch nicht FBML 5, sondern Freunde einladen.

    Kann mir jemand sagen, woher er das anzieht?

    Viele Grüße und DANKE
    Sabrina

  15. 27
    Martin Hairer

    @sabrina: das kannst du nicht ändern. Hier wird automatisch der Application Name verwendet. Du verwendest die Application FBML und der Initialname von dem FBML Reiter war FBML 5. Das kannst du nur in einer Application ändern aber nicht im StaticFBML Reiter.

  16. 29
    Sebrina D.

    Auch wenn es nicht ganz zum Thema passt, kann mir jmd. sagen, wie ich mit FBML einen richtigen Zeilenumbuch hinbekomme (erwzungenen Zeilenumbruch)?

    und funktioniert bei mir nicht richtig… :(

  17. 31
    Meine Bookmarks vom 30.07. bis 17.08. | web20typ_

    […] facebookmarketing.de | Pimp my StaticFBML – 10 Tipps und Tricks für Static FBML Tabs – 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. facebook fbml tutorial howto fanpage knowledge tipps […]

  18. 32
    Kirsten

    Hallo,

    ich erstelle gerade für meinen Arbeitgeber (Verlag) eine Fanpage und möchte eine Kommentar sowie eine like funktion innerhalb eines Stilblogs auf einem Static FBML integrieren. Geht das? Ich versuche schon seit Stunden herauszufinden wie es gehen könnte…. Könnt Ihr mir helfen :)?

    Viele Grüße!
    Kirsten

  19. 33
    Sascha

    @Kerstin: Versuche ich auch gerade herauszufinden, aber soweit ich es bisher recherchieren konnte, ist es nicht möglich, einen Gefällt mir-Button per iframe oder einzufügen…. :-(

  20. 35
    Martin Hairer

    @Kirsten @Sascha: Kommentar einfügen ist ein ganz einfach Sache mit fbml. der Tag lautet: “fb:comments”. Das einfügen eines iframes in FBML Reiter ist aktuell nicht möglich. aber zeig mal was du genau machen willst, vielleicht kann man es umgehen.

  21. 36
    Sascha

    @Martin: Danke Dir für den Hinweis. Leider kann ich Dir nicht direkt zeigen, was ich will, es Dir aber beschreiben: Ich soll mehrere Reiter für eine Firmenseite schreiben und auf jedem Reiter gibt es mehrere Teaser. In den meisten Teasern gibt es einen Gefällt mir- sowie einen Share-Button. Was ich bisher herausfinden konnte (trotz der total schlechten und kaum funktionierenden Doku von Facebook, die sich mehrmals selbst widerspricht…): Static FBML-Seiten kommen für mich nicht in Frage, da dort nur die -Tags funktionieren, der -Tag jedoch unbekannt ist und einen Fehler erzeugt. IFrames sind dort ebenfalls nicht möglich, weshalb ich den “Like”-Button in Static FBML überhaupt nicht einfügen kann. Nächster Ansatz: Für jeden Reiter eine eigene App. 1. Problem: Ich kann nicht mehr als eine App erstellen, da ich nach der 1. jetzt jedesmal die Meldung bekomme, ich müsse erst mein Konto per Handy oder Kreditkarte authentifizieren. Kreditkarte kommt nicht in die Tüte und Handy funktioniert nicht, hab bis heute keine SMS mit Bestätigungscode erhalten. -.- 2. Problem: Auf der Canvas-Seite der Applikation (apps.facebook.com/app_name/) funktionieren beide Buttons, im Reiter auf der Firmenseite jedoch nicht, bzw der Share-Button nur ohne Meta-Tags, was aber auch nicht in Frage kommt, der Like-Button funktioniert dort gar nicht. Weder als iFrame noch als FBML-Tag. Nun weiß ich einfach nicht weiter, da z.b. Levi’s (der Jeanshersteller) auf einem seiner Reiter (http://www.facebook.com/Levis?v=app_110665725655672) beide Buttons drin hat. Der Share-Button sogar mit meta-Tags, was man ja in der Statusleiste sehen kann. Wie die aber den Like-Button hinbekommen bleibtm ir schleierhaft. Ich weiß einfach net mehr weiter…. Ich hoffe, Du konntest mein Problem verstehen!

    Gruß

  22. 38
    Katrin

    Hi Martin,
    ich habe jetzt einen Code für die Bildergallerie erstellt und in der Testkonsole funktioniert er bestens; nur auf FB selbst leider nicht, kannst du helfen?

    #thumbs{
    background-color: #000;
    width: 520px;
    }

    ul#thumbs,
    ul#thumbs li{
    background-color: #000;
    margin-left:auto; margin-right: auto; padding:0; list-style:none;
    }
    ul#thumbs li{
    float:left; margin-left:6px; margin-right:6px; margin-bottom: 3px; border:1px solid #999; padding:2px;
    }
    ul#thumbs a{
    display:block; float:left; width:155px; height:200px; line-height:100px;
    overflow:hidden; position:relative; z-index:1;
    }
    ul#thumbs a img{
    float:left; position:absolute; top:-20px; left:-50px;
    }
    ul#thumbs a:hover{
    overflow:visible; z-index:1000; border:none;
    }
    ul#thumbs a:hover img{
    border:1px solid #999; background:#fff; padding:
    2px;
    }
    ul#thumbs:after,
    li#thumbs:after{
    content:”.”; display:block; height:0; clear:both; visibility:hidden;
    }
    ul#thumbs,
    li#thumbs{
    display:block;
    }
    ul#thumbs,
    li#thumbs{
    min-height:1%;
    }
    * html ul#thumbs,
    * html li#thumbs{
    height:1%;
    }

    #thumbs2{
    background-color: #000;
    width: 520px;
    }

    ul#thumbs2,
    ul#thumbs2 li{
    background-color: #000;
    margin-left:auto; margin-right: auto; padding:0; list-style:none;
    }
    ul#thumbs2 li{
    float:left; margin-left:6px; margin-right:6px; margin-bottom: 3px; border:1px solid #999; padding:2px;
    }
    ul#thumbs2 a{
    display:block; float:left; width:241px; height:150px; line-height:100px;
    overflow:hidden; position:relative; z-index:1;
    }
    ul#thumbs2 a img{
    float:left; position:absolute; top:-20px; left:-50px;
    }
    ul#thumbs2 a:hover{
    overflow:visible; z-index:1000; border:none;
    }
    ul#thumbs2 a:hover img{
    border:1px solid #999; background:#fff; padding:
    2px;
    }
    ul#thumbs2:after,
    li#thumbs2:after{
    content:”.”; display:block; height:0; clear:both; visibility:hidden;
    }
    ul#thumbs2,
    li#thumbs2{
    display:block;
    }
    ul#thumbs2,
    li#thumbs2{
    min-height:1%;
    }
    * html ul#thumbs2,
    * html li#thumbs2{
    height:1%;
    }







  23. 39
    Katrin

    Sorry, da wurde jetzt die Hälfte verschluckt. Hier nochmal:

    #thumbs{
    background-color: #000;
    width: 520px;
    }

    ul#thumbs,
    ul#thumbs li{
    background-color: #000;
    margin-left:auto; margin-right: auto; padding:0; list-style:none;
    }
    ul#thumbs li{
    float:left; margin-left:6px; margin-right:6px; margin-bottom: 3px; border:1px solid #999; padding:2px;
    }
    ul#thumbs a{
    display:block; float:left; width:155px; height:200px; line-height:100px;
    overflow:hidden; position:relative; z-index:1;
    }
    ul#thumbs a img{
    float:left; position:absolute; top:-20px; left:-50px;
    }
    ul#thumbs a:hover{
    overflow:visible; z-index:1000; border:none;
    }
    ul#thumbs a:hover img{
    border:1px solid #999; background:#fff; padding:
    2px;
    }
    ul#thumbs:after,
    li#thumbs:after{
    content:”.”; display:block; height:0; clear:both; visibility:hidden;
    }
    ul#thumbs,
    li#thumbs{
    display:block;
    }
    ul#thumbs,
    li#thumbs{
    min-height:1%;
    }
    * html ul#thumbs,
    * html li#thumbs{
    height:1%;
    }

    #thumbs2{
    background-color: #000;
    width: 520px;
    }

    ul#thumbs2,
    ul#thumbs2 li{
    background-color: #000;
    margin-left:auto; margin-right: auto; padding:0; list-style:none;
    }
    ul#thumbs2 li{
    float:left; margin-left:6px; margin-right:6px; margin-bottom: 3px; border:1px solid #999; padding:2px;
    }
    ul#thumbs2 a{
    display:block; float:left; width:241px; height:150px; line-height:100px;
    overflow:hidden; position:relative; z-index:1;
    }
    ul#thumbs2 a img{
    float:left; position:absolute; top:-20px; left:-50px;
    }
    ul#thumbs2 a:hover{
    overflow:visible; z-index:1000; border:none;
    }
    ul#thumbs2 a:hover img{
    border:1px solid #999; background:#fff; padding:
    2px;
    }
    ul#thumbs2:after,
    li#thumbs2:after{
    content:”.”; display:block; height:0; clear:both; visibility:hidden;
    }
    ul#thumbs2,
    li#thumbs2{
    display:block;
    }
    ul#thumbs2,
    li#thumbs2{
    min-height:1%;
    }
    * html ul#thumbs2,
    * html li#thumbs2{
    height:1%;
    }







    Vielen Dank schonmal,
    Katrin

  24. 40
    Gabriel

    <fb:request-form method="get" action="index.php" content="Become a Fan of unplugged
    network!”
    type=”page” invite=”true”>

    Hallo, zuerst mal herzlichen Dank für diese super Seite. Ich konnte schon ein paar Sachen für unsere Firmen Fanpage integrieren. Beim Tool Freunde einladen, habe ich jedoch ein Problem. Ich habe den untenstehenden Html Code in die Fmbl Box eingeführt. Wenn man dann die Freunde ausgewählt und die Einladung abgeschickt hat kommt die Nachricht “Die von dir angeforderte Seite konnte nicht gefunden werden” Kann mir jemand helfen? Danke

  25. 41
    Saskia

    Hallo zusammen,
    ich hätte mal eine Frage: Wie kann man verschiedene Fanpages miteinander verlinken? Ein Beispiel wäre “Groupon”. Die haben eine Haupt-Fanpage und mehrere Fanpage-Unterseiten. Vielen Dank im voraus für eure Antworten!

  26. 44
    tjg

    2. Versuch:

    zu “8. Freundschaft?”

    welchen Befehl hätte gerne FB um zwei Grafiken auszutauschen sobald ich Fan werde?!

    Mein Ding klappt nicht:

  27. 48
    Georg

    Wie löst eigentlich Otto ( http://www.facebook.com/Otto ) den Welcometab als Nichtfan? Sobald man Fan wird erscheint eine andere Seite. Das kann man sicher mit dem visible-to-connection Tag lösen. Wie jedoch lässt man das ursprüngliche Bild weg? Gibt es einen hidden-to-connection Tag?

  28. 50
    leonard

    Super Tutorial, vielen Dank!
    Weiß jemand, wie man die Dialogwindows (Tipp 1) vergrößern kann? Ich möchte nur einzelne Thumbs Bilder per Window vergrößern und stoße dabei an die Grenze von 420px (breit) aber hätte sie sehr gerne größer dargestellt. Leider ragen sie dann aus dem Window, was blöd ausschaut.
    Mein Code:

    meintitel

    Vielen Dank für jeden TIPPPPPP

  29. 51
    Jan

    Vielen Dank für die tollen Tipps!

    Wenn die “Image Thumbnail Gallery” direkt in die FBML Seite eingebunden wird, wird das linke Bild bei Mouseover links immer abgeschnitten.

    Gibt es eine Möglichkeit, dass die in der Liste angezeigten Bilder nicht links am Rand kleben, sondern von diesem einen Abstand haben oder einfach zentriert dargestellt werden?

  30. 52
    Die Sarah

    Seit März gibt es leider nicht mehr die Möglichkeit Static FBML bei Facebook einzubinden. Aber dafür Static Iframe. Habe auch schone eine Landing Page damit erstellt und war ziemlich begeistert. Leichte Anwendung und auch für einen Laien wie mich, leicht

+ Hinterlasse einen Kommentar