Stellen Sie beim Verwenden der folgenden Codes sicher, dass Sie die Anführungszeichen korrekt und manuell setzen (nicht per copy&paste aus diesem Blogpost!) und ein / ans Ende der Blogpost-url setzen  (bzw. .html oder .php oder .htm am Ende der Website-URL. Wenn Sie zu einer index-Seite verlinken, verwenden Sie den kompletten Pfad wie z.B. http://www.schwindt-pr.com/index.html).

Anstelle des Namens des jeweligen Dienstes kann man natürlich auch die entsprechenden icons oder einen ausführlicheren Text einsetzen.

Hier nun also die Codes:

Twitter

<a href=”http://twitter.com/home?status=http://IHREURL” title=”Auf Twitter weitersagen”>Twitter</a>

Für Twitter sollte man die URL als einen zeitlich unbegrenzt gültigen Kurzlink (z.B. von tinyurl.com) einfügen.

Facebook

<a href=”http://www.facebook.com/share.php?u=http://IHREURL” title=”Auf Facebook weitersagen”>Facebook</a>

Delicious

<a href=”http://del.icio.us/post?url=http://IHREURL&amp;title=Text+zu+diesem+Link” title=”Auf  delicious bookmarken”>delicious</a>

Friendfeed

<a href=”http://friendfeed.com/?url=http://IHREURL&amp;title=Text zu Ihrem Link” title=”Auf Friendfeed weitersagen”>Friendfeed</a>

Stumbleupon

<a href=”http://www.stumbleupon.com/submit?url=http://IHREURL” title=”Auf Stumbleupon weitersagen”>Stumbleupon</a>

Digg

<a href=”http://digg.com/submit?url=http://IHREURL&amp;title=Text+zu+diesem+Link” title=”Digg this”>Digg</a>

Google Bookmarks

<a href=”http://www.google.com/bookmarks/mark?op=edit&bkmk=http://IHREURL” title=”Auf Google bookmarken”>Google</a>

Google Buzz

Siehe http://deblog.schwindt-pr.com/2010/02/13/sharebutton-fuer-google-buzz-codieren/

Myspace

<a href=”http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=http://IHREURL” title=”Auf Myspace weitersagen”>MySpace</a>

Reddit

<a href=”http://reddit.com/submit?url=http://IHREURL” title=”Auf Reddit weitersagen”>Reddit</a>

• Einbinden einer Suchleiste
• Chat
• Foto-Galerie (über Picasa oder FlickR)
• YouTube-Galerie (eigene, Favoriten oder Abos)
• Twitter-Stream
• Facebook-Fanseite
• Weitersagen
• individuellen Kurztext
• Einbinden von RSS

Die Leiste lässt sich farblich anpassen (vgl. Leiste auf christianstraube.com), die einzelnen Elemente lassen sich per drag&drop in die gewünschte Position bringen. In Wibiya bekommen Sie außerdem eine Statistik zur Nutzung Ihrer Leiste angezeigt.

UPDATE Februar 2011: inzwischen habe ich die Inhalte der Leiste mehrfach umstrukturiert. Bitte beachten Sie auch den Zusatz zur Wibiya Toolbar in meinem Impressum!

Für meine Leiste nutze ich (von links nach rechts): suche, Chat, Fotogalerie, Text, Facebook, Twitter, Weitersagen:

Mein Lieblings-Feature ist dabei das Einbinden der Facebook-Fanseite (s. Abb. oben), das es erlaubt, direkt von Ihrer Website aus auf Ihrer Fanseite zu posten. Auf diesem Wege kann man sogar selbst als Person auf meiner Fanseiten posten (was aus Facebook heraus für Seitenadmins ja nicht möglich ist):

Mit Wibiya lassen sich also selbst völlig statische Websites dialogfähig machen.

Wie finden Sie diesen Dienst?  Nutzen Sie ihn selbst und wenn ja, welche Erfahrungen haben Sie damit gemacht?

*

Die selbständige Webdesignerin Alexandra Steiner aus Wien ist einer der Netzwerkpartner von schwindt-pr. Kürzlich zeigte mir Alexandra folgenden Weg zur Einbindung eines eigenen CSS in einen FBML-Reiter auf Facebook. Ich bat sie daraufhin, diesen in einem Gastbeitrag kurz zu erläutern:

Nichts ist schlimmer, als ein unüberschaubarer Quelltext. Gerne hätte ich eine einfachere Variante genutzt, doch leider lassen sich in FBML-Reitern  weder iframes noch externe Stylesheets  über JavaScript einbinden. Die im folgenden erläuterte Vorgehenseweise scheint also die einzige Möglichkeit zu sein, statische Seiten mittels CSS und HTML darzustellen.

Mit dieser Möglichkeit bleibt der CSS-Teil schlank und unübersichtliche CSS-Deklaration für jedes einzelne Element sind nicht nötig. Somit bleibt der Quelltext übersichtlich und aufgeräumt.

Um den Quelltext innerhalb des FBML-divs zu entschlacken sollte man Folgendes tun:

<style>
<!–
Element {Eigenschaft:Wert; …}
–>
</style>

Danach folgt der übliche HTML-Part.
Innerhalb von <style> … </style> kann man nun problemlos Klassen, ids und Elemente deklarieren. Im HTML-Part werden wie gehabt die Klassen oder ids aufgerufen.
Hier ein kleines Beispiel:

<div>
<h1>FBML als praktische Werbeplattform</h1>
<p>Fbml ist die neue und unkomplizierte Art sein Unternehmen noch effizienter zu präsentieren.</p>
<p><a href=“#“>Werden Sie Fan!</a></p>
</div>

<style>
<!–
div {background:url(http://www.deinewebseite.at/images/bla.gif) top center #fff;}
h1 {color: green; font-size: 25px;}
p {color: red; font-size: 14px;}
a {color: black; text-decoraiton: underline;}
–>
</style>

Der Einfachheit halber sollte man den gesamten CSS-Teil am Ende des HTML-Teil stellen. Das hat den Vorteil, dass man sich keinen Wolf scrollen muss, um die Inhalte zu bearbeiten. Erfahrungsgemäß arbeitet man öfter an den Inhalten als an der CSS.

Empfehlenswert ist es, sowohl den HTML-Part als auch den CSS-Part extern vorzubereiten, also nicht direkt in die FBML-Box reinzuschreiben. Es ist einfach gemütlicher, beide Teile in einem HTML-Editor zu erstellen. Somit vermeidet man Fehlerquellen und muss nicht unnötig rumdoktern. Zumal das FBML-Formularfeld nicht sehr nutzerfreundlich gestaltet wurde.

Erwähnt sei auch, dass komplexe CSS-Strukturen nicht umsetzbar sind. Daher sollte man auf verschachtelte divs verzichten. Hier empfehle ich ausnahmsweise Tabellenkonstrukte – in der konventionellen Webseitengestaltung würde ich diese Technik nicht anwenden. Da ja Facebook an sich schon keinen Wert auf Validität und Barrierefreiheit legt, kann man auch alle beiden Augen zudrücken. Hier geht es wirklich nur um das optische Darstellen und nicht unmittelbar um Barrierefreiheit, Validität oder gar Benutzerfreundlichkeit… Facebook hat viele Möglichkeiten unterbunden, um zu tiefes Eingreifen in den Code zu verhindern. Ob das gut oder schlecht ist, sei mal dahingestellt.

*

Static FBML-Tutorial für individuelle Fanseiten-Reiter (pdf, 910kb)
von Annette Schwindt und Alexandra Steiner

Auf schwindt-pr.com habe ich die bislang verwendete iframe-Variante größtenteils durch die Skriptversion ersetzt (außer auf der eBook-Seite).

Verwenden Sie die Fanbox auf Ihrer Website oder Ihrem Blog?
Welche Erfahrungen haben Sie damit gemacht?

Fügen Sie folgende Zeilen im head-Bereich ihres Quelltextes hinzu:

<meta name=”title” content=“ÜBERSCHRIFT”>
<meta name=”description” content=“INHALTBESCHREIBUNG”>
<link rel=”image_src” href=“BILD-URL”>

(Wenn Sie den Code hier heraus kopieren, müssen Sie in Ihrem Editor die Anführungszeichen nochmal neu setzen, da sie sonst falsch formatiert sind!)

Achten Sie darauf, dass sie innerhalb der Überschrift bzw. der Inhaltbeschreibung keine weiteren Anführungszeichen verwenden( Sie können stattdessen ‘ verwenden). Das Bild sollte vorzugsweise quadratisch oder annähernd quadratisch sein.

Haben Sie Fragen zu dieser Vorgehensweise?
Dann hinterlassen Sie mir einfach einen Kommentar.

Angepasster Reiter auf meiner Facebook-Fanseite

Dank eines Tipps von Andrea Vascellari bin ich auf die Anwendung Static FBML auf Facebook entdeckt. Fügt man diese Anwendung seiner Fanseite hinzu, kann man damit einen neuen Reiter (Tab) auf seiner Fanseite kreieren, der sich per html individuell gestalten lässt.

Bearbeiten lässt sich der Reiter über das Fanseiten-Menü unter dem Profilbild “Seite bearbeiten”. Dann runterscrollen und den Abschnitt FBML suchen:

Über den blauen Stift am rechten oberen Ende dieses Abschnitts gelangt man zur Option “Bearbeiten”:

Über “Anwendungseinstellungen” kann man bestimmen, ob man ein FBML_Feld oder einen eigenen Reiter zu seiner Seite hinzufügen möchte.

Beim Klick auf “Bearbeiten” erscheint ein Formular, über das man den neuen Reiter mit einem Namen versehen kann (“Titel des Feldes”).

Übrigens: Sobald man diesen Titel gespeichert hat, erscheint dieser auch im o.g. FBML-Abschnitt unter “Seite bearbeiten”. Aber das nur am Rande.

Zurück zum Formular: Hier kann man nun im “FBML”-Feld die gewünschten hmtl-Befehle eingeben und über “Änderungen speichern” veröffentlichen.

Wichtig ist, dass man nur mit div und untergeordneten Elementen arbeitet (da Facebook selbst ja schon einen body, head etc. pro Seite benutzt). Skripte werden laut Anwendungsbeschreibung nicht akzeptiert.

Weitere FBML-Reiter lassen sich übrigens von einem Link unter dem genannten Formular hinzufügen. diese landen jedoch – je nach Anzahl bereits vorhandener Reiter) u.U. auf dem “Felder”-Reiter.

UPDATE: Schritt-für-Schritt-Anleitung zu diesem Thema

Wie finden Sie diese Anwendung? Und falls Sie sie schon verwenden, welche Erfahrungen haben Sie damit gemacht?

Maniátiko Olivenöl

Was lange währt, wird endlich gut. Die neue Website der Wessel GbR, die das griechische Olivenöl Maniátiko in Deutschland vertreibt, ging soeben online.

Im Moment ist die Website noch rein statisch, soll aber demnächst um ein Blog ergänzt werden (der ebenfalls von schwindt-pr eingerichtet wird).

Die Wessel GbR ist ein Familienbetrieb in Speyer/Deutschland, der griechischen Bauern aus der Mani hilft, ihr Olivenöl zu fairen Preisen zu vertreiben. Mehr dazu unter www.olivenoelwelt.de.

Christian Straube

Als weiteres Webdesign-Projekt von schwindt-pr ging kürzlich das Neudesign der Website des Gitarristen Christian Straube online:

Dabei wurde das Design an die demnächst erscheinende neue CD “Vagabond” von Christian Straube angepasst und der Stream seiner neuen Facebook-Fanseite (eingerichtet von schwindt-pr) eingebunden.

Wenn auch Sie Interesse an einer Zusammenarbeit mit schwindt-pr haben,
nehmen Sie Kontakt mit mir auf!