facebookmarketing.de

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:

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:

<!-- FBML LINK -->
<a href="#" clicktoshowdialog="test_dialog">Beispiellink zum Dialogfenster</a>
<!-- END FBML DIALOG LINK -->
<!-- FBML DIALO -->
<fb:dialog id="test_dialog">
<fb:dialog-title>INSER YOUR DIALOG TITLE</fb:dialog-title>
<fb:dialog-content>
INSERT YOUR HTML CONTENT
<fb:dialog-button type="submit" value="Close" close_dialog=true />
</fb:dialog-content>
</fb:dialog>
<!-- END FBML DIALOG -->

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:

<!-- TEXT LINK -->
<style type="text/css">
.un-links a {
display: inline-block;
padding: 4px;
outline: 0;
color: #3a599d;
}
.un-links a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
</style>
<div class="un-links">
<a href="http://www.unplugged-network.at" target="_blank">un website</a><br />
<a href="http://www.facebookmarketing.de" target="_blank">fbmarketing website</a><br /> <a
href="http://www.facebook.com" target="_blank">facebook</a>
</div>
<!-- END TEXT LINK -->

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.

<a href="#">
<!-- IMAGE LINK -->
<style type="text/css">
.img_button {
display: block;
height: 23px; width: 59px;
border: none;
background-image: url('http://yourdomain/like_button.png');
background-position: 0px 0;
}
.img_button:hover { background-position: 0px -23px; }
</style>
<a href="http://www.unplugged-network.at" target="_blank" class="img_button"> </a>
<!-- END IMAGE LINK -->  
</a>

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:

 
<!-- IMAGE THUMBNAIL -->
<style type="text/css">
ul#thumbs,
ul#thumbs li{
margin:0; padding:0; list-style:none;
}
ul#thumbs li{
float:left; margin-right:5px; border:1px solid #999; padding:2px;
}
ul#thumbs a{
display:block; float:left; width:100px; height:100px; 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%;
}
</style>
<ul id="thumbs">
<li><a href="#"><img src="http://yourdomain.com/thumnail.png" /></a></li>
<li><a href="#"><img src="http://yourdomain.com/thumnail1.png" /></a></li>
<li><a href="#"><img src="http://yourdomain.com/thumnail2.png" /></a></li>
</ul>
<!-- END IMAGE THUMBNAIL -->

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:

 
<!-- GLOSSY HEADLINE -->
<style type="text/css">
/* gradient IE6 png hack */
.glossy h1 {
font: bold 320%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 30px 0 50px;
color: #464646;
}
.glossy h1 span {
background: url(http://www.unplugged-network.at/fb/pimp_my_fbml/gradient-white.png)
repeat-x;
position: absolute;
display: block;
width: 100%;
height: 32px;
}
 
.glossy2 h1 {
font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 30px 0 50px;
color: #464646;
letter-spacing: -2px;
}
.glossy2 h1 span {
background: url(http://www.unplugged-network.at/fb/pimp_my_fbml/gradient-glossy.png)
repeat-x;
position: absolute;
display: block;
width: 100%;
height: 18px;
}
.glossy2 a {
color: #000;
text-decoration: none;
}
.glossy2 a:visited {
color: #000;
}
.glossy2 a:hover {
color: #555;
}
</style>
<div class="glossy">
<h1><span></span>Headline Test 1</h1>
</div>
<div class="glossy2">
<h1><a href="#"><span></span>Headline Test LINK</a></h1>
</div>
<!-- END GLOSSY HEADLINE -->

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:

 
<!-- BLOCK -->
<style type="text/css">
#block ul {
list-style-type: none;
width: 400px;
}
#block li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#block li a {
color: #3a599d;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;text-decoration: none;
}
* html #block li a {
width: 400px;
}
#block li a:hover {
background: #F2F2F2;
}
#block a em {
color: #333; display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#block a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
</style>
<div id="block">
<ul>
<li><a href="http://www.unplugged-network.at" target="_blank" title="Text">unplugged network
website
<br/>
<span>XX.YY.ZZZZ</span>
<em>Website description or link description</em>
</a></li>
<li><a href="http://www.google.com" target="_blank" title="Text">google international
<br/>
<span>XX.YY.ZZZZ</span>
<em>Website description or link description</em>
</a></li>
</ul>
</div>
<!-- END BLOCK -->

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:

<!-- BLOCK QUOTE -->
<style type="text/css">
blockquote {
background: transparent url(http://yourdomain.com/quoleft.png) left top no-repeat;
font-style: italic;
}
blockquote div {
padding: 0 48px;
background: transparent url(http://yourdomain.com/quoright.png) right bottom no-repeat;
}
</style>
<blockquote>
<div>
INSERT YOUR CONTENT
</div>
</blockquote>
<!-- END BLOCK QUOTE -->

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:

 
 
<!-- VIDEO SLIDESHOW -->
<style type="text/css">
.videobackground {
width:661px;
height:241px;
clear:both;
padding-top: 41px;
padding-left: 33px;
background: url(http://www.unplugged-network.at/fb/pimp_my_fbml/videobackground3.png);
background-repeat: no-repeat;
}
.videoinframe {
width:495px;
height:160px;
overflow: auto;
}
.videorow {
width:1648px;
height:138px;
clear:both;
margin-bottom:5px;
padding-left: 5px;
padding-top: 2px;
background: url(http://www.unplugged-network.at/fb/pimp_my_fbml/video_background7.png);
background-repeat: repeat-x;
}
.video1 {
float:left;
width:160px;
}
.videos { float:left; width:160px; margin-left:5px;}
.clear { font-size: 1px; line-height: 1px; height: -1%; clear:both; }
</style>
<div class="videobackground">
<div class="videoinframe">
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc="http://www.youtube.com/v/Yjv_2gv_Fr8&amp;hl=en_US&amp;fs=1&autoplay=1"
waitforclick='false'
wmode='transparent'
imgsrc='http://www.unplugged-network.at/fb/pimp_my_fbml/vidscreen01.png' width='150' height='110' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/qOMj4NS3fgM&amp;hl=en_US&amp;fs=1&autoplay=1'
imgsrc='http://www.unplugged-network.at/fb/pimp_my_fbml/vidscreen02.png' width='150' height='110' />
</div>
<p class="clear"></p>
</div>
</div>
</div>
<!-- END VIDEO SLIDESHOW -->

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:

<!-- BLOCK ISFRIEND -->
<fb:fbml version="1.1">
<fb:visible-to-connection>
INSERT YOUR CONTENT
</fb:visible-to-connection>
</fb:fbml>
<!-- END ISFRIEND -->

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:

<!-- RANDOM -->
<fb:random>
<fb:random-option><img src="http://yourdomain.com/thumnail.png" /></fb:random-option>
<fb:random-option><img src="http://yourdomain.com l/thumnail1.png" /></fb:random-option>
<fb:random-option><img src="http://yourdomain.com/thumnail2.png" /></fb:random-option>
<fb:random-option>Demo Text1</fb:random-option>
<fb:random-option>Demo Text2</fb:random-option>
<fb:random-option>Demo Text3</fb:random-option>
</fb:random>
<!-- END RANDOM-->

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:

<!-- INVITATION -->
<div style="padding: 0px;">
<fb:request-form method="get" action="index.php" content="Become a Fan of unplugged
network!<fb:req-choice url='http://www.facebook.com/unplugged.network' label='YES' />"
type="page" invite="true">
<div class="clearfix" style="padding-bottom: 10px;">
<fb:multi-friend-selector condensed="true" style="width: 100%;" showborder="false"
actiontext="Invite friends to unplugged-network, the code company in the alps" />
</div>
<fb:request-form-submit />
</fb:request-form>
</div>
<!-- END INVITATION --></a>

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-Mail – Facebook – XING – http://www.unplugged-network.at