Wenn ihr Anwendungen oder Facebook-Fanpage-Tabs im Look and Feel von Facebook gestalten wollt, steht euch seit kurzem das Framework "Fbootstrapp" zur Verfügung. In Anlehnung an das vor einiger Zeit veröffentlichte Framework "Twitter Bootstrap" bietet Fbootstrapp CSS-Stile für Raster, Typografie, Medieninhalte, Formulare, Navigationselemente und Modal Boxes. Auch JavaScripte sind im Paket enthalten um eine zusätzliche Ebene für Interaktionen hinzuzufügen.

• ckrack.github.com/fbootstrapp

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor ein paar Tagen bin ich darauf aufmerksam gemacht worden, dass bei allen neu erstellten Facebook-Anwendungen der Link zur Anwendungsseite verschwunden ist. In meinen Augen kann es sich nur um einen kürzlich entstandenen Fehler handeln, braucht man die Anwendungsseite doch unbedingt um einen individuellen Facebook-iframe-Tab zur eigenen Fanpage hinzuzufügen. Bei bereits erstellten Anwendungen wird der Link übrigens nach wie vor korrekt angezeigt.
Damit ihr nicht verzweifelt suchen müsst, zeige ich euch wie ihr neue Tabs dennoch zur Fanpage hinzufügen könnt.

Facebook Anwendungsseite umgehen

Der Trick ist folgender: ihr umgeht die Anwendungsseite und ruft direkt die URL auf mit der iframe-Tabs zur Fanpage hinzugefügt werden.

Ihr müsst lediglich eure individuelle APP-ID unter developers.facebook.com/apps in Erfahrung bringen und wissen unter welchem Pfad ihr die Inhalte des Tabs auf dem Server abgelegt habt. Bedenkt, dass bei allen Tabs mittlerweile https Pflicht ist.

https://www.facebook.com/dialog/pagetab?app_id=[APP-ID]&display=popup&next=[URL-ZUM-INHALT-DES-TABS]

Kopiert folgende URL in die Adresszeile eures Browsers und tauscht die folgenden Bereiche aus:

[APP-ID]

Euere individuelle ID für diese Anwendung. Ihr findet die ID wenn ihr die Anwendung auswählt oder bearbeitet.

[URL-ZUM-INHALT-DES-TABS]

Die URL unter der ihr den Inhalt des iframe-Tabs abgelegt habt. Beispiel: https://facebook.deinedomain.de/tab1.php

Claudio hat ein Tool erstellt um den Link zu generieren. Es funktioniert super und vereinfacht die Angelegenheit deutlich! fb.claudioschwarz.com

Nachdem ihr die Eingabe bestätigt habt, solltet ihr folgende Seite sehen:

Wählt hier die gewünschte Fanpage aus und klickt anschließend unten rechts im Browser auf "Add Tab".

Sollte es sich bei dem hier beschriebenen Problem nicht um einen Bug handeln, bin ich natürlich für jede Info dankbar!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wie lange im Voraus angekündigt, hat Facebook Anfang Oktober die Unterstützung für nicht-gesicherte Anwendungen und Fanpage-Tabs beendet. Da ich seither viele Anfragen zu diesem Thema erhalten habe, möchte ich mit diesem Beitrag gerne erklären wie ihr gewährleistet, dass eure Fanpage-Tabs "sicher durchstöbert" werden können.
Ich gehe in diesem Artikel auf die Neuerungen in Bezug auf die HTTPS-Verbindung ein und möchte nicht von Grund auf die Einrichtung von Fanpage-Tabs (iframe-Tabs) erklären. Wie das funktioniert könnt ihr hier nachlesen.

Warum HTTPS?

Individuelle iframe-Tab-Inhalte werden auf dem eigenen Webspace gespeichert und nur über einen iframe in Facebook hineingeladen. Die Inhalte liegen also bei euch und nicht bei Facebook und genau hier besteht eine mögliche Sicherheitslücke.
Facebook erlaubt daher nur noch iframe-Tab Inhalte die über "sicheres durchstöbern" (HTTPS) verfügen. Ist das nicht der Fall, sieht der Besucher anstelle des Fanpage-Tabs folgenden Inhalt.

Eingeloggte Admins sehen übrigens häufig weiße Seiten anstelle der Fehlermeldung. Ihr solltet eure eigene Fanpage daher mit einem eingeloggten, fremden Account besuchen.

Was benötigt ihr um sichere Tabs zu erhalten?

Eine HTTPS-Verbindung erreicht ihr indem ihr einen bestimmten Bereich auf eurem Server (einen Ordner, eine Domain, eine Subdomain oder gemieteten Webspace) mit einem Sicherheitszertifikat (SSL-Zertifikat) ausstattet. Ein solches Zertifikat müsst ihr bei eurem Provider kaufen.
Es existieren Zertifikate verschiedener Sicherheitsstufen die teilweise auch Versicherungen beinhalten. Für Facebook reicht aber ein simples Zertifikat.
Je nachdem welches Zertifikat ihr erworben habt, wird mehr oder weniger umfangreich geprüft ob ihr und eure Seite den Anforderungen genügen. Anschließend wird das Zertifikat ausgestellt und muss installiert werden. Wie das jeweils funktioniert erfahrt ihr von eurem Provider.

iframe-Tab anpassen

Öffnet die App-Einstellungen von Facebook unter https://developers.facebook.com/apps und bearbeitet die entsprechende Anwendung. Ihr solltet nun einen Screen sehen der folgende Inhalte bietet. Facebook ändert diesen Bereich sehr häufig - es kann daher sein, dass der Bereich bald wieder etwas anders aussieht.

Die rot unterstrichenen Bereiche sollten bei euch noch unausgefüllt sein. Gebt hier die jeweiligen Pfade (inkl. https://) eurer sicheren Inhalte an. Anschließend speichert ihr die App. Das war es auch schon.

Unsichere Inhalte innerhalb von sicheren Bereichen vermeiden

Ihr könnt innerhalb der App-Einstellungen entscheiden, ob ihr die identischen Inhalte (z.B. eine index.php) sowohl die die normale (http) als auch für die gesicherte (https) Verbindung nutzen wollt, oder ob ihr unterschiedliche Varianten zur Verfügung stellt. Der Screenshot oben zeigt z.B. eine Variante wo jeweils auf die identischen Dateien verlinkt wird.
Wichtig ist, dass nicht nur der Ordner in dem ihr eure Inhalte abgelegt habt gesichert ist, sondern dass auch Verlinkungen die aus diesem Bereich herausführen über eine sichere Verbindung verfügen. Ansonsten wird im Browser ein Warnung angezeigt. Mehr zu diesen Warnungen findet ihr u.a. hier. Facebook ignoriert diese Warnung allerdings (noch).

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einiger Zeit habe ich euch den Online-Dienst Buffer vorgestellt, mit dem ihr eure Tweets buffern - also zeitverzögert veröffentlichen könnt. Der Vorteil eines solchen Dienstes liegt auf der Hand: Ihr schreibt eure Tweets in einem bestimmten Zeitfenster und Buffer veröffentlicht sie wenn ihr etwas völlig anderes tut oder die meisten eurer Follower online sind.
Ein solches Tool macht allerdings nicht nur für Twitter, sondern auch für Google+ und Facebook Sinn: Nun hat die Beta-Phase für den Facebook-Buffer begonnen.

Facebook-Buffer bisher mit übersichtlichen Funktionen

Der Facebook-Buffer befindet sich bisher in einer - ich vermute sehr frühen - Testphase. Nachdem ihr der Buffer-App den Zugriff auf euer Facebook-Profil gestattet habt, könnt ihr Statusmitteilungen veröffentlichen. Diese Nachrichten werden dann von Buffer in euerem Profil veröffentlicht. Viel mehr funktioniert bisher allerdings noch nicht.

Must-Have-Features

Einige Features muss die Facebook-App unbedingt erhalten um im täglichen Workflow wirklich eine Arbeitserleichterung zu sein. Was das angeht bin ich allerdings sehr zuversichtlich, die Twitter-Version wurde auch regelmäßig erweitert.

• Es muss möglich sein eine Fanpage zu wählen auf die der Beitrag gebuffert werden soll
• Es muss möglich sein einen eigenen URL-Shortener wie goo.gl zu verwenden.
• Es muss möglich sein das Beitragsbild zu wählen
• Natürlich müssen alle Funktionen der Twitter-Anwendung übernommen werden
• ...

Was für Funktionen fehlen euch noch? Bzw. was für Vorstellungen und Anforderungen stellt ihr an eine solche App?

Wenn ihr Buffer für Facebook testen wollt, nutzt folgenden Link:

• Buffer für Facebook

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf?

Facebook-API im Footer eingebunden?

Eine häufige Ursache ist die Einbindung der Facebook-JavaScript-API im Footer de Website. In den letzten Jahren haben wir eigentlich gelernt, bestimmte Scripte am Ende der Seite einzubinden um den visuellen Seitenaufbau nicht auszubremsen. Der Internet Explorer 7/8 mag das allerdings nicht und zeigt den Facebook-Like-Button nicht an.
Um dieses Problem zu beheben müsst ihr die Facebook-API vor dem Like-Button einbinden.

dieser Code:

<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

Muss also vor diesem Code im Dokument eingebunden werden:

<fb:like href="<?php echo get_permalink(); ?>" show_faces="false" font="lucida grande" width="450" layout="button_count" action="like" send="true"></fb:like>

Bitte beachtet, dass beide Snippets je nach Bedarf noch individualisiert werden müssen. Mehr darüber erfahrt ihr hier.

Ob es sinnvoll ist die Scripte aus dem Footer zu entfernen, nur um den »gefällt mir«-Button auch im IE zu sehen muss natürlich jeder für sich selbst entscheiden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In letzter Zeit erhalte ich häufig Anfragen zu diesem Thema und möchte daher kurz erklären, worin dieses Problem begründet ist. Die Situation ist folgende: Facebook zeigt ausgeloggten Usern nicht die Fanpage, sondern nur ein stark reduziertes, öffentliches Profil. Warum ist das so?

Alterbeschränkungen können die Fanpage blockieren

Eie Fanpage ist - im Gegensatz zu einem persönlichen Profil - immer öffentlich. In den Einstellungen der Facebook-Fanpage (Info bearbeiten → Genehmigungen verwalten) könnt ihr allerdings eine Altergruppe für die Inhalte der Seite festlegen. Wenn hier ein anderer Wert als "Alle (13+)" festgelegt wurde, so sehen ausgeloggte Besucher ein öffentliches Profil.

Das ist ja auch nur logisch - nicht angemeldete Besucher könnten zu jung für die abgebildeten Inhalte sein und werden so geschützt.

Bildquelle: facebook.com/business/pages/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die WordPress-Benutzerprofile bieten die Möglichkeit verschiedene Meta-Informationen zu einem Benutzer anzugeben und anschließend mittels Template-Tag im Theme darzustellen. Allerdings sind insbesondere die Angaben der Social Media/IM-Dienste völlig veraltet: Jabber, AIM und Yahoo IM brauche ich nun wirklich nicht mehr. Dafür fehlen aktuelle Eingabefelder für Google+, Facebook und Twitter.
Mit ein paar Zeilen Code könnt ihr euer Profil um die fehlenden Angaben ergänzen und die überflüssigen Eingabefelder entfernen.

functions.php anpassen

Der folgende Code muss in die functions.php kopiert werden. Ich habe die Bereiche entsprechend kommentiert.

// Zusätzliche Felder im Benutzerprofil
function contactInfo($user_contactmethods) {

	// Google+, Facebook, Twitter hinzufügen
	$user_contactmethods['googleplus'] = 'GooglePlus';
	$user_contactmethods['facebook'] = 'Facebook';
	$user_contactmethods['twitter'] = 'Twitter';

	// Yahoo, Jabber, AOL entfernen
	unset($user_contactmethods['yim']);
	unset($user_contactmethods['jabber']);
	unset($user_contactmethods['aim']);

	return $user_contactmethods;
}

add_filter('user_contactmethods','contactInfo');

Innerhalb von WordPress sieht das Benutzerprofil dann in etwa so aus:

Werte im Theme ausgeben

Um die Werte im Theme auszugeben verwendet ihr folgenden Code. Das Beispiel zeigt die allgemeine Ausgabe des Google+-Profils.

<?php the_author_meta('googleplus');?>

Wenn ihr mit mehrere Autoren an einer Seite arbeitet kann es vorkommen, dass nicht alle Benutzer alle Profile angeben können oder wollen. Um den entsprechenden Wert nur dann auszugeben, wenn das Feld im Backend auch ausgefüllt wurde reicht folgender Code. Das Beispiel zeigt ebenfalls die Ausgabe von Google+.

<?php if( get_the_author_meta('googleplus') ) { ?>
   <a href="<?php the_author_meta('googleplus');?>">Google+</a>
<?php } ?>

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook bietet die Möglichkeit für eine Fanpage oder ein privates Profil eine so genannte Vanity-URL einzurichten. Aus einer unübersichtlichen und für Suchmaschinen nicht sonderlich wertvollen URL wie facebook.com/profile.php?id=123456789101112 wird dadurch eine brauchbarere Adresse wie facebook.com/kulturbanause.de.
Bei Google+ existiert diese Möglichkeit im Moment leider noch nicht. Wollt ihr einen Link zu eurem Google+ Profil veröffentlichen, so müsst ihr die komplette Benutzer-ID ausschreiben: https://plus.google.com/u/0/106537592401126010838.

Auch wenn Google+ erst ein paar Tage alt ist, so zeichnen sich bereits zwei Trends ab, die dieses Problem lösen.

Vanity-URL über einen externen URL-Shortener (Drittanbieter)

Ein erster Trend der sich bereits abzeichnet, ist die Nutzung eines URL-Shorteners. Natürlich könnte man dafür Googles hauseigenen Dienst goo.gl nutzen, aber auch hier entstehen optisch unschöne Adressen. Ein Drittanbieter hat dieses Problem schnell erkannt und ist mit dem Dienst gplus.to an den Start gegangen. Hier kann ein Benutzername festgelegt werden, der anschließend nach folgendem System in die Adresse integriert wird: gplus.to/nickname

Die neue URL für mein Profil sieht demnach so aus: gplus.to/kulturbanause

• gplus.to

Google+ Profile über ../+ verlinken

Ein weiterer Trend ist die Verlinkung des Google+ Profils über die eigene Webadresse. Hierbei wird der Standard-URL ein /+ angehängt und diese Adresse anschließend über einen 301-Redirect auf das Google+ Profil umgeleitet. Ihr findet mein Google-Profil also über kulturbanause.de/+.

Wenn ihr ein Profil auf diese Art verlinken möchtet, so genügt es folgenden Code in die .htaccess-Datei eurer Website einzufügen. Denkt daran die ID des Beispiels durch eure eigene Benutzer-ID zu ersetzen.

redirect 301 /+ https://plus.google.com/u/0/106537592401126010838

Der Große Vorteil dieser Vorgehensweise ist, dass man nicht den Nickname des Benutzers kennen muss. Man tipp einfach /+ hinter die Adresse einer Website oder eines Blogs und kann so erfahren wer hinter der Seite steht.
Eine umfangreiche Liste an Websites die dieses System bereits einsetzen findet ihr auf eisy.eu/trend-google-plus-profile-als-verlinken.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Arbeit im Social Web frisst eine Menge Zeit. Blog-Beiträge schreiben, Facebook-Fans verwalten, Tweets veröffentlichen, Artikel weiterempfehlen, auf Kommentare, Likes, Retweets sowie direkte Nachrichten reagieren und alles bitte zügig, aber regelmäßig.
Wer nicht auf eine Social Media Abteilung zurück greifen kann und sich parallel um sein Hauptgeschäft kümmern muss, läuft Gefahr früher oder später die Anforderungen nicht mehr leisten zu können.
Zum Glück lassen sich viele Arbeitsabläufe automatisieren. Mit Chancen und Risiken.

Was ist Dlvr.it?

Der Online-Dienst Dlvr.it nutzt die Inhalte eines oder mehrerer RSS-Feeds und füttert mit diesen Information weitere Portale wie Facebook, Twitter, Google Buzz oder Tumblr. Wenn ihr also beispielsweise einen WordPress-Blog führt, so könnt ihr den dort angebotenen Feed nutzen, um sowohl auf Facebook, als auch auf Twitter Statusnachrichten zu euren neusten Blog-Posts zu veröffentlichen. Das spart auf der einen Seite zwar massig Zeit, kann sich allerdings negativ auf die Qualität und vor allem die Individualität der Social Media Inhalte auswirken.

Ihr könnt unzählige Feed-Quellen an unzählige Dienste senden und somit einen Großteil eurer Arbeit automatisieren. Da auch die Inhalte einer Facebook-Fanpage als RSS-Feed angeboten werden, eröffnen sich hier sehr interessante Möglichkeiten der Verknüpfung. Man sollte bei all den zur Verfügung stehenden Optionen nur darauf achten, keinen Loop zu konstruieren, in welchem die Beiträge immer im Kreis geschickt werden.

Extrem detaillierte Einstellungsmöglichkeiten

Das interessante an Dlvr.it sind die sehr umfangreichen Einstellungsmöglichkeiten. Die Inhalte lassen sich mit eine Pre- oder Postfix versehen, können Hashtags enthalten oder bestimmte Wörter werden automatisch durch andere Wörter ersetzt.
Bei der Aufbereitung der Inhalte lässt Dlvr.it ebenfalls wenige Wünsche offen. Es kann sehr detailliert eingestellt werden, welche Feed-Informationen für Statusmitteilungen zur Verfügung stehen. Schlagworte können beispielsweise innerhalb des Tweets in Hashtags umgewandelt werden.

Auch bei der Facebook-Integration bietet Dlvr.it tolle Möglichkeiten. Welches Profil soll benutzt werden? Welches Bild? Soll der Beitrag als Notiz, Link-Tipp oder als Statusnachricht veröffentlicht werden? Oder möchtet ihr die Informationen lieber gleich in einer bestimmten Gruppe veröffentlichen?

Goo.gl als URL-Shortener nutzen

Dlvr.it bietet einen hauseigenen URL-Verkürzer an und veröffentlicht die Inhalte auch unter diesen URLs. Wenn ihr lieber einen anderen Dienst verwenden möchte, beispielsweise Goo.gl, so schaut euch mal folgenden Blog-Post von Dlvr.it an. Ich persönlich finde Goo.gl oder Bit.ly einfach etwas seriöser.

• dlvr.it now serving goo.gl short links

Fazit

Ich muss zugeben, dass mich Dlvr.it auf ganzer Linie überzeugt hat. Die Anwendung funktioniert, ist übersichtlich und bietet umfangreiche Einstellungsmöglichkeiten.
Der größte Nachteil ist der fehlende individuelle Charakter der Statusmitteilungen. In wiefern Facebook-Fans und Follower so etwas abstrafen, kann wohl nur durch Ausprobieren herausgefunden werden. Am effektivsten könnte die gesunde Mischung aus individuellen und automatisch generierten Inhalten sein.

• Dlvr.it

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook ist bekannt dafür Unmengen an Daten und Verlinkungen zu sammeln, jedoch nur sehr eingeschränkt und unübersichtlich Daten wieder preiszugeben oder sich in der Sammelwut einschränken zu lassen. Unter anderem ist es nicht möglich einen Link aus der Navigation einer Facebook-Fanpage auf die eigene Website zu setzen. Zumindest nicht ohne Hack.
Mit einer Zeile JavaScript und einem individuellen iFrame-Tab lässt sich der Besucher nämlich trotzdem weiterleiten.

iFrame-Tab erstellen und weiterleiten

Zunächst müsst ihr einen iframe-Tab zu eurer Facebook-Fanpage hinzufügen. Wie das geht, habe ich hier bereits geschrieben.
Die HTML- oder PHP-Datei, die innerhalb des iframe-Tabs geladen wird, füttert ihr anschließend mit folgendem Code. Als Ziel-URL gebt ihr eure Domain an.

<html>
<body>
<script type="text/javascript" language="javascript">
top.location.href = 'http://kulturbanause.de';
</script>
</body>
</html>

Fügt die iframe-Tab-Anwendung wie gewohnt zu eurer Fanpage hinzu und testet die Funktion mit einem Benutzeraccount der keine Admin-Rechte für diese Fanpage hat. Der Besucher sollte nun kurzer Zeit auf die Ziel-Website weitergeleitet werden.

Ob Facebook diese Methode abstraft weiß ich nicht. Verboten (laut AGB) ist die Methode nicht. Der Einbau eines solchen Links ist jedoch trotzdem mit gewissen Risiken verbunden, da Facebook bereits in der Vergangenheit willkürlich und unwiderruflich Seiten gesperrt hat.

via: allfacebook

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebooks Open-Graph-Schnittstelle ist eine tolle Möglichkeit um durch die Social Plugins, wie beispielsweise dem Like-Button, eine Vielzahl an Meta-Informationen an Facebook zu übermitteln. Wie ihr eure Website an den Graph anschließen könnt habe ich bereits in einem frühen Artikel beschrieben. Doch leider ist der Quellcode, den Facebook zur Integration des Open-Graphs zur Verfügung stellt, nicht HTML valide. Mit folgendem PHP-Snippet löst ihr dieses Problem.

Facebooks Zugriffe auf die Website abfangen

Die Lösung ist eigentlich ganz einfach: zunächst wird abgefragt ob Facebook auf die Website zugreift und das Ergebnis in einer Funktion abgespeichert. Anschließend wird der Quellcode zur Integration des Open-Graph-Protocols nur noch dann ausgegeben, wenn Facebook nach den Daten sucht.

Die nachfolgende Funktion könnt ihr in die functions.php kopieren. Alternativ kann der Code auch mit in den head eurer Website geschrieben werden.

<?php
function is_facebook(){
	if(!(stristr($_SERVER["HTTP_USER_AGENT"],'facebook') === FALSE))
	return true;
}
?>

Im head der Website wird anschließend dieses Snippet eingebunden. Der Code für den Open-Graph muss noch eingebunden werden. Wie das funktioniert, habe ich bereits in einem älteren Artikel zusammengefasst.

<?php if(is_facebook()){?>

Hier wird der Quellcode für den Open-Graph geschrieben. 

<?php } ?>

Dieses Snippet habe ich auf earthpeople.se gefunden. Vielen Dank!

Update: Google+ unterstützt ebenfalls das Open Graph Protocol

Google+ unterstützt nun ebenfalls das Open Graph Protocol. Wenn ihr das oben genannte Snippet verwendet, so versteckt ihr die Infos zwar vor dem Validator - aber auch vor Google+.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die iframe-Tabs von Facebook haben eine Begrenzung von maximal 800 Pixeln Höhe. Sobald der Inhalt der Seite, die ihr per iframe-Tab integriert, höher als diese 800 Pixel ist, schneidet Facebook den Inhalt ab und bindet einen Scrollbalken ein. Es entsteht also für gewöhnlich eine sehr benutzerunfreundliche Seite mit zwei verschiedenen Scrollbalken: Einem im iframe und einem im Browserfenster.
Mit folgendem Code-Snippet könnt ihr den Scroller entfernen und Facebook zwingen die volle Höhe der Seite anzuzeigen.

Scrollbalken deaktivieren

Alles was ihr benötigt um den Scroller auszublenden, ist folgendes Code-Snippet und die Application-ID eures iframe-Tabs. Die App-ID findet Ihr unter folgender Adresse: facebook.com/developers/apps.php

Kopiert folgendes Snippet in Eure HTML- bzw. PHP- Seite direkt hinter den öffnenden body-Tag:

<div id="fb-root">
<script src="http://connect.facebook.net/de_DE/all.js"></script>
<script>
FB.init({
appId : 'Hier gehört Eure App-ID hin',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow(100);
</script>
</div>

Vergesst nicht, die App-ID eures Tabs einzutragen. Anschließend könnt Ihr die Datei hochladen. Der Scrollbar sollte nun verschwunden sein.

Update:

Facebook hat den Code zur Entfernung von Scrollbalken zum 1. Januar 2012 verändert. Der oben abgebildete Code enthält jedoch bereits die Neuerungen. Details zu diesem Update könnt ihr auf AllFacebook nachlesen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Aus aktuellem Anlass möchte ich euch gerne einen winzigen Tipp zum Thema Facebook bzw. Frames mit auf den Weg geben. Wenn Ihr auf Eurer Facebook-Fanpage verschiedene iFrame-Tabs verwendet und Verlinkungen zwischen diesen Tab erstellen wollt, so öffnen sich die Ziel-Seiten immer innerhalb des iFrames was zu sehr unschönen Verschachtelungen führt. Um den Effekt zu verhindern müsst Ihr lediglich das Attribut target="_top" in den Link einbauen. Anschließend öffnet sich die verlinkte Seite, wie gewünscht, im obersten Frame.

<a href="#" target="_top">Linktext</a>

In Zeitalter von CSS ist die Funktionsweise von Frames und iframes offenbar etwas in Vergessenheit geraten. Immerhin wurde mit Frames gearbeitet bevor wir Tabellen zum Layout-Aufbau benutzt haben. Und selbst die Tabellen sind aus heutiger Sicht Internet-Mittelalter.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook hat ziemlich genau ein Jahr nach der Einführung des Like-Buttons (Gefällt mir) das Sortiment der Social-Plugins um einen neuen Button erweitert. Mit dem Send-Button können Website-Besucher Beiträge nun gezielt an bestimmte Freunde senden. Facebook erfährt so noch mehr über die individuellen Beziehungen der Mitglieder.
Wie Ihr den Send-Button verwenden könnt, bzw. den Like-Button um die neuen Funktionen erweitert erkläre ich in diesem Beitrag.

Den Facebook Send-Button "normal" in die Website einbinden

Wie auch beim Like-Button steht auf developers.facebook.com/docs/reference/plugins/send ein Tool zur Verfügung mit dem Ihr den Send-Button generieren könnt. Ihr müsst lediglich die URL die ihr "senden" möchtet eintragen und eine Schriftart festlegen. Anschließend erhaltet ihr folgendes Snippet:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:send href="deine-url.xyz" font="arial"></fb:send>

Solltet Ihr bereits ein anderes Facebook-Social-Plugin wie die Like-Box oder den Like-Button eingebunden haben, so nutzt ihr bereits die Facebook-JavaScript-API. In diesem Fall reicht es den Button ohne JavaScript einzubinden.

<fb:send href="deine-url.xyz" font="arial"></fb:send>

Den Gefällt-Mir-Button um die Senden-Funktion erweitern

Wenn Ihr bereits den Like-Button (Gefällt-Mir-Button) auf Eurer Seite verwendet, so könnt ihr ihn ganz einfach um die "send"-Funktion erweitern.

Dazu müsst ihr in den bestehenden Code des Like-Buttons folgendes Attribut einfügen.

send=true

Anschließend stellt Facebook beide Buttons nebeneinander dar. Es wäre sicherlich schöner gewesen die Buttons irgendwie zu kombinieren - aber vielleicht kommt das ja noch.

Der Code für einen Like-Button inkl. Send-Funktion sieht dann beispielsweise so aus:

  <fb:like href="deine-url.xyz" show_faces="false" width="450" layout="button_count" action="like" send="true"></fb:like>

Den Like und Send-Button in WordPress verwenden

Wenn Ihr den Button in WordPress verwenden möchtet, so müsst Ihr den Permalink als URL angeben. Der Code inkl. Send-Button sähe dann beispielsweise so aus:

  <fb:like href="<?php echo get_permalink(); ?>" show_faces="false" font="lucida grande" width="450" layout="button_count" action="like" send="true"></fb:like>

Der Button scheint Probleme mit einem Permalink in einer lokalen Serverumgebung wie MAMP zu verursachen. Bei mir wurde der Button erst online angezeigt.

Sprache festlegen

Wenn Ihr Probleme mit der Sprache des bzw. der Facebook-Plugins haben solltet, so schaut nach ob Ihr die Facebook JavaScript-API richtig eingebunden habt. Für gewöhnlich wird nämlich die englische Variante eingebunden. Um die Buttons auf Deutsch anzuzeigen müsst ihr das nachfolgende Snippet verwenden.

<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

Bekanntes Problem im Internet Explorer 7/8

Im Internet Explorer 7 bzw. 8 wird der Button häufig nicht angezeigt. Sollte das bei euch der Fall sein, so achtet darauf, dass ihr die Facebook-JavaScript-API vor dem Like-Button eingebunden habt. Also nicht im Footer. Mehr dazu findet ihr in diesem Artikel.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im Galileo Verlag ist mit „Follow Me – Erfolgreiches Social Media Marketing mit Facebook, Twitter und Co.“ ein weiteres Buch zum Thema Social Media Marketing erschienen. Das Autorenpaar Anne Grabs und Karim-Patrick Bannour erklärt auf knapp 450 Seiten wie erfolgreiche Kommunikation in Social Web auszusehen hat.
Ich habe das Buch gelesen und möchte Euch in diesem Artikel gerne meine Eindrücke dazu mitteilen.

Fachliteratur zum Thema Social Media Marketing gibt es ja mittlerweile wie Sand am Meer und aufgrund der hohen Entwicklungsgeschwindigkeit in dieser Branche sehe ich bei einem Buch zu diesem Thema immer die Gefahr, dass Inhalte sehr schnell veraltet sind.
Ich selbst nutze daher in erster Linie Blogs um mich zu diesem Thema auf dem Laufenden zu halten. Soviel erst einmal zu meinen persönlichen Vorlieben. Ob meine Bedenken bei diesem Buch berechtigt sind, dazu komme ich später noch einmal.

Zum Inhalt

„Follow Me“ beginnt mit den Grundlagen der Thematik und klärt zunächst über die zur Verfügung stehenden Tools, geeignete Arten der Kommunikation und mögliche Social Media Strategien auf. Anschließend werden verschiedene Wege zur Auswertung und Beobachtung von Social Media Aktivitäten vorgestellt.

Im mittleren Teil des Buches werden die vielen verschieden Social-Media-Kanäle behandelt. Angefangen bei Blogs und Blog-Plattformen über Twitter, Facebook, Studi VZ und Xing bis hin zu LinkedIn und Last FM werden alle relevanten Dienste beschrieben. Abhängig vom Stellenwert der Plattform wird vom Registrierungsprozess bis zum ersten Beitrag recht ausführlich auf die zur Verfügung stehenden Optionen und Kommunikationsmöglichkeiten eingegangen. Darüber hinaus widmen sich die Autoren auch den diversen Foto- und Video-Plattformen sowie den Social Bookmarking Diensten und den Bewertungsportalen.

Im letzten Teil des Buches werden dann die Themen Social eCommerce und das mobile Social Web behandelt. Auch hier werden unzählige bekannte Themen aufgegriffen und knapp aber verständlich erklärt. Den Abschluss des ca. 440 Seiten umfassenden Buches bilden die Themen Crowdsourcing und Foren.

Meine Einschätzung

„Follow Me richtet sich meiner Meinung nach in erster Linie an Einsteiger und eventuell auch noch an Fortgeschrittene. Es werden alle relevanten und wichtigen Themenbereiche rund um Social Media Marketing angesprochen, so dass man sich schnell einen umfassenden Überblick über all die Tools, Dienste und Buzzwords verschaffen kann. Eine selbstständige Recherche dieser Informationen dürfte sehr lange dauern und wäre dennoch sicherlich nicht so lückenlos. Ich persönlich werde das Buch mit Sicherheit das ein oder andere mal als Nachschlagewerk zur Rate ziehen – insbesondere dann, wenn es darum geht bestimmte Aspekte oder Strategien, verständlich und überzeugend, gegenüber Kunden zu argumentieren oder zu erklären.

Als sehr erfrischend und kurzweilig empfand ich den Schreibstil. Das Buch liest sich an vielen Stellen wie ein Blog und ist gespickt mit modernen und szenetypischen Anglizismen und Formulierungen. Ein User wird beispielsweise auch als solcher bezeichnet und nicht wie so häufig stur eingedeutscht. So sollte es meiner Meinung nach bei einem Buch zu diesem Thema auch sein.
Ebenfalls sehr gut gefallen haben mir die Fallbeispiele bekannter Unternehmen, sowie die vielen wichtigen Tipps zum Umgang mit Kritik im Social Web.

Was mir nicht gefallen hat ist die Länge des Buches. Meiner Ansicht nach gibt es einige Stellen wo man es hätte kürzen können. Auch wenn ich aus eigener Erfahrung weiß, dass ein Buch ein Thema möglichst vollständig behandeln sollte, so brauche ich nun wirklich keine Anleitung zum Registrieren eines Twitter-Profils. Ich hätte mir anstelle solcher Passagen lieber einige technische Lösungsansätze gewünscht. An vielen Stellen geht mir „Follow Me" nicht genug in die Tiefe.

Fazit

Wenn Ihr an technischen Lösungen wie beispielsweise der Programmierung von iFrame-Tabs in Facebook oder der Integration des Twitter-RSS in Euer WordPress-Blog interessiert seid, so ist dieses Buch wahrscheinlich nichts für Euch. Zu Beginn dieser Rezension hatte ich auch Bedenken geäußert, dass ein Buch zum Thema Social Media schnell veraltet sein könnte. Natürlich veraltet jedes Fachbuch irgendwann - bei "Follow Me" halte ich dieses Risiko jedoch für verhältnismäßig gering, denn es sind üblicherweise die technischen Details die sich regelmäßig ändern.

Wenn Ihr in der PR- oder Marketing-Abteilung einer Firma arbeitet und wissen wollt wie ihr eure Fans und Follower so ansprecht, dass ein Beitrag möglichst oft weiterempfohlen wird, oder euch fragt warum euer Unternehmen sich zielstrebig auf einen erneuten Shitstorm zubewegt, dann kann ich dieses Buch ruhigen Gewissens empfehlen.
Auch wenn Ihr ein Nachschlagewerk zum Thema sucht oder euch einfach nur umfassend über das aktuelle Social Web informieren möchtet ist dieses Buch mit Sicherheit seinen Preis wert.

Meine Wertung: 4/5

• "Follow Me" bei Amazon
• "Follow Me" bei Galileo Press

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Bei den mittlerweile veralteten FBML-Tabs von Facebook war alles noch so einfach. Ein kleines FBML-Snippet genügte und schon konnte man Inhalte spezifisch für Fans und Nicht-Fans ausgeben. Der große Nachteil war allerdings, dass die Inhalte nur ausgeblendet wurden und daher aufwändig mit CSS versteckt werden mussten. Fortgeschrittene Besucher konnten darüber hinaus im Source-Code die ausgeblendeten Inhalte trotzdem finden. Für Gewinnspiele oder Gutscheine war diese Technik daher wenig geeignet.
Mit den von Facebook neu eingeführten iFrame-Tabs haben Developer nun bessere Möglichkeiten die Besucher anzusprechen und zum jeweiligen Fanpage-Ziel zu leiten. Diese Technik nennt sich Fan-Gating.
In diesem Artikel zeige ich Euch wie einfach Ihr Inhalte entsprechend des Fan-Status ausgeben könnt.

Was sind die Vorraussetzungen?

Um das hier gezeigte Beispiel umsetzen zu können müsst Ihr bereits einen iFrame-Tab eingerichtet haben. Wie das geht habe ich bereits in einem früheren Artikel beschrieben.

• Facebook: Fan-Page mit iFrame-Tabs erweitern

Darüber hinaus muss der Server auf dem die Inhalte des iFrame-Tabs abgelegt wurden über PHP5 verfügen.

Dateien vorbereiten

Ihr benötigt für dieses Beispiel später drei verschiedene PHP-Dateien. Eine index.php, eine facebook.php und eine base_facebook.php.
Die index.php stellt die Inhalte Eures iFrame-Tabs dar, die facebook.php sowie base_facebook.php laden wird von Facebook herunter. Diese Dateien sind Bestandteil des Facebook Software Developer Kits (SDK) und geben Informationen über den Besucher in einer Variable aus. Diese Dateien müssen von Euch nicht verändert werden. Soviel zum Hintergrund.

Facebook SDK herunterladen

Ladet euch zunächst unter https://github.com/facebook/php-sdk/zipball/master das Zip-Archiv von Facebook herunter. Innerhalb dieses Archivs findet Ihr die Dateien facebook.php und base_facebook.php.

index.php einrichten

Erstellt nun eine Datei namens index.php und fügt folgenden Code ein. Anschließend könnt Ihr alle drei Dateien in das entsprechende Verzeichnis auf dem Server hochladen.

<?php
 require 'facebook.php';
 $app_id = "DEINE APP ID";
 $app_secret = "DEINE SECRET APP ID";
 $facebook = new Facebook(array(
 'appId' => $app_id,
 'secret' => $app_secret,
 'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$page_fan = $signed_request["page"]["liked"];
$user_country = $signed_request["user"]["country"];
$user_locale= $signed_request["user"]["locale"];

if ($page_fan) {
 echo "Diesen Inhalt siehst du nur weil du ein Fan bist. Danke! ";
}

else {
 echo "Bitte klicke auf 'gefällt mir' um den hier versteckten Inhalt anzuzeigen. ";
}
?>

Achtet darauf, dass alle drei Dateien im gleichen Verzeichnis liegen und die Einstellungen innerhalb Eurer Facebook-App korrekt sind. Solltet Ihr zuvor also beispielsweise eine index.html verwendet haben so muss diese Angabe jetzt natürlich angepasst werden. Die App-Einstellungen findet Ihr unter: facebook.com/developers/apps.php

In der zweiten Zeile wird die zuvor heruntergeladene facebook.php benötigt. In Zeile drei und vier dieses Beispiels müsst Ihr Eure spezifischen APP-IDs verwenden. Beide Angaben findet Ihr unter dem oben genannten Link.

In den Zeilen 12-16 seht Ihr welche Daten abgefragt werden können. Neben dem Fan-Status ist dies beispielsweise auch das Land oder die Seiten-ID.
In diesem Beispiel verwenden wir die Variable $page_fan und geben in den Zeilen 18-24 entsprechend die Inhalte aus.

Beispiel

Ein funktionierendes Beispiel des hier gezeigten Snippets findet Ihr auf meiner Facebook-Fanpage.

• facebook.com/kulturbanause.de/

via: hyperarts.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit den neuen iFrame-Tabs von Facebook haben Webdesigner jetzt die Möglichkeit noch einfacher individuellen Code zu Fan-Pages hinzuzufügen. Und kaum sind die neuen Seiten veröffentlicht gibt es auch schon ein entsprechendes WordPress-Plugin dazu.
Mit dem WordPress-Plugin "Facebook Tab Manager" könnt Ihr den WordPress-Editor und das WordPress-Backend verwenden um die Inhalte für Euer Facebook-iFrame-Tab zu verwalten.
Nach der Plugin-Installation könnt Ihr im WP-Backend Facebook-Tabs so verwalten wie dies auch mit normalen Seiten und Artikeln geht. Der Vorteil ist, dass Ihr die Facebook-Inhalte schön strukturieren könnt und, dass innerhalb des Editors noch weitere Einstellungen zur Verfügung stehen die für Facebook-iFrame-Tabs nötig sind.

Innerhalb des Editors könnt Ihr sowohl alle Facebook-Inhalte komfortabel verfassen und editieren als auch den zur Gestaltung des iFrame-Tabs nötigen CSS-Code schreiben. Auch WordPress-Filter können eingesetzt werden und individuell aktiviert bzw. deaktiviert werden um Fehldarstellungen - z.B. durch Plugins - zu vermeiden.

Um das Plugin nutzen zu können solltet Ihr mit der Integration von iFrame-Apps in Facebook vertraut sein. Wie das geht habt ich in einem vorherigen Beitrag bereits erklärt.

Was haltet Ihr von diesem Plugin? Würdet Ihr es selbst einsetzen oder haltet Ihr es für überflüssig? Würdet Ihr das Plugin für Kunden-Websites mit Facebook-Anbindung verwenden um den Kunden die Arbeit zu erleichtern?

• Facebook-Tab-Manager für WordPress

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit der Einführung der neuen Fanpages hat Facebook auch die schon lange angekündigten iFrame Tabs veröffentlicht. Mit Einführung dieser Tabs werden die bisher gebräuchlichen FBML-Tabs überflüssig und in Kürze nichtmehr unterstützt. Insbesondere wenn Ihr neue Seiten hinzufügen wollt müsst Ihr zukünftig iFrame-Tabs verwenden.
Ich möchte Euch kurz erklären was Ihr benötigt um die iFrame-Tabs nutzen zu können, wie Ihr einen neuen Tab erstellt, und wo die Vor- und Nachteile der neuen Tabs liegen.

Voraussetzungen für iFrame-Tabs

Bisher war es so, dass Ihr für die Benutzung von FBML-Tabs lediglich eine bereits existierende Anwendung zu Eurer Facebook-Seite hinzufügen musstet. Anschließend ermöglichte es Euch diese Anwendung Quellcode in die Facebook-Seite zu schreiben und somit individuelle Inhalte darzustellen.
Bei iFrame-Tabs ist das Ganze etwas anders: Ihr müsst zunächst für jede zusätzliche Unterseite (also jeden Tab) eine neue, eigene Facebook-Anwendung erstellen. Diese Anwendung zieht sich dann Quellcode von externem Webspace und stellt diesen mittels iFrame dar. Im letzten Schritt müsst Ihr die Anwendung Eurer Fan-Page hinzufügen.
Die Vorraussetzungen für die Einrichtung eigener Fanpage-Tabs sind damit etwas höher geworden: Um eine Anwendung erstellen zu können müsst Ihr Euch zunächst als Developer verifizieren. Dafür könnt Ihr Eure Kreditkarte oder Euer Handy benutzen.

• Handy: facebook.com/confirmphone.php
• Kreditkarte: secure.facebook.com/cards.php

Darüber hinaus benötigt Ihr ab sofort natürlich auch eigenen Webspace auf den Ihr den Code Eurer Fan-Page-Unterseite hochladen könnt.

Wenn all diese Vorraussetzungen erfüllt sind ist das Erstellen eines iFrame-Tabs keine große Sache mehr. Wir wollen uns das mal im Detail Schritt für Schritt anschauen.

Neue Anwendungen erstellen

Öffnet zunächst den Entwickler-Bereich von Facebook (facebook.com/developers) und klickt oben rechts auf "Erstelle eine neue Anwendung".

Im nachfolgenden Screen vergebt Ihr einen beliebigen Namen (kann nachträglich geändert werden), bestätigt die AGB und klickt auf "Anwendung erstellen".

Nach einer eventuellen Sicherheitsabfrage werdet Ihr zu den Anwendungs-Einstellungen weitergeleitet. In den Anwendungs-Optionen habt Ihr nun umfangreiche Möglichkeiten Angaben zu Eurer neuen Anwendung zu machen und Einstellungen festzulegen. Ich beschränke mich jetzt nur auf die Optionen die nötig sind um einen iFrame Tab zu erstellen.

Einstellungen "Website"

In den Website-Einstellungen müsst Ihr die Adresse zu Eurem eigenen Webspace eintragen. Hierbei muss ein Ordner angegeben werden (mit / am Ende!), keine einzelne Datei.

Einstellungen "Facebook-Einbindung"

In den Settings zu den "Facebook-Einbindungen" müsst Ihr ebenfalls einige Angaben machen. Im Abschnitt "Canvas" gebt Ihr sowohl die Canvasseite, als auch die Canvas-URL an.
Bei der Canvasseite könnt Ihr einen beliebigen Namen vergeben. Unter dieser Adresse ist die Facebook-Anwendung dann verfügbar.
Die Canvas-URL muss Euer Webspace sein. Hier tragt Ihr demnach den identischen Pfad ein wie zuvor in den Website-Einstellungen.

Im Abschnitt "Page Tabs" müssen ebenfalls Angaben gemacht werden. Tragt hier zunächst die Bezeichnung des Tabs ein. Dieser Name wird später in der Navigation angezeigt. Achtet darauf, dass als Typ "iFrame" ausgewählt ist und vergebt zuletzt die "URL des Reiters". Hierbei muss jetzt die Datei (üblicherweise index.html oder index.php) angegeben werden die auf Eurem Webspace liegt und den Code des späteren Tabs beinhaltet.

Ihr könnt jetzt alle Optionen speichern und werdet zum Bildschirm "Meine Anwendungen" weitergeleitet.

Externe Daten hochladen und bereitstellen

Ihr habt jetzt eine eigene Anwendung erstellt und Euren externen Webspace hinterlegt. Falls noch nicht geschehen müsst Ihr jetzt natürlich den externen Inhalt bereitstellen. Hierfür habt Ihr alle Möglichkeiten die beim coden einer normalen Website auch zur Verfügung stehen. Also Multimedia, jQuery, PHP, Tracking-Tools etc. Viele der neuen Möglichkeiten waren mit den bisherigen FBML-Tabs nicht realisierbar.
Erstellt eine neue HTML/PHP-Datei, fügt Inhalt ein und ladet diese Datei unter dem zuvor angegebenen Dateinamen in das zuvor angegebene Verzeichnis hoch.
Achtung! Aktuell sind die iFrame-Tabs auf eine Höhe von 800 Pixeln begrenzt.

Anwendung der eigenen Seite hinzufügen

Wenn Ihr Euch im Dialog "Meine Anwendungen" (facebook.com/developers/apps.php) befindet, so klickt nun auf "Anwendungs-Profilseite".

Ihr gelangt auf eine weitere Seite über die Ihr Eure neue Anwendung bewerben könntet. Hier stehen ähnliche Möglichkeiten zur Verfügung wie dies auch bei privaten Profilen und FanPages der Fall ist. Klickt auf "Zur Anwendung" um Euren iFrame-Tab-Inhalt zu testen.
Über den Link "Zu meiner Seite hinzufügen" fügt Ihr diesen Tab nun Eurer Fan-Page zu.

Anschließend erscheint der Tab unter dem zuvor angegebenen Namen in der linken Navigationsleiste. In den Einstellungen zu Eurer Seite könnt Ihr zudem festlegen, dass Besucher als Startseite einen iFrame-Tab sehen. Auch das Icon des neuen Tabs lässt sich über die Anwendungs-Einstellungen individualisieren.

Das war's auch schon. Diese Prozedur müsst Ihr nun ab sofort für jede zusätzliche Unterseite der Fan-Page durchführen. Ihr habt Ergänzungen oder Anmerkungen zu diesem Artikel? Dann schreibt einfach einen Kommentar.
Was haltet Ihr von den neuen iFrame Tabs? Überwiegen die Vorteile und die Freiheiten beim Coding oder findet Ihr die neuen Tabs zu kompliziert, lästig oder gar überflüssig?

Update: Sichere Verbindungen sind nun Pflicht

Facebook erlaubt seit Oktober 2011 nur noch sichere Tabs. Was das zu bedeuten hat und wie ihr einen Tab mit einem Sicherheitszertifikat ausstattet erfahrt ihr hier: So geht’s: Sicheres durchstöbern (https) für Facebook-Fanpages gewährleisten

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ohne jegliche Ankündigung hat Facebook heute Nacht die neuen Fan-Pages aktiviert. Es ist wohl das umfangreichste Update aller Zeiten. Die Änderungen betreffen fast alle Bereiche der Seite und haben wohl Auswirkungen auf die Art der Benutzung, das Fanpage-Design und das Marketing. Gleichzeitig kann jetzt eine bessere Trennung zwischen privater und geschäftlicher/nicht-privater Facebook-Nutzung stattfinden.
Es sind noch nicht alle Features erforscht und erwartungsgemäß läuft auch noch nicht alles ganz rund. Ich möchte Euch in diesem schnellen Artikel einmal die wichtigsten neuen Features vorstellen - immer mit dem direkten Praxisbezug was geändert werden muss. Ich gehe davon aus, dass fast alle bisherigen Artikel von mir zu Facebook seit heute veraltet sind. Wenn Ihr Ergänzungen habt freue ich mich über jeden Kommentar der dieses Thema zusätzlich beleuchtet! So - und jetzt die Änderungen im Schnelldurchgang.

Trennung von privatem und Admin-Account

Wie erwartet könnt Ihr Facebook ab sofort mit einem privaten Account oder dem Admin-Account Eurer Fan-Pages nutzen. Dazu müsst Ihr das Profil umschalten. Oben rechts auf "Konto" klicken dann "Facebook als Seite nutzen" auswählen und im anschließenden Modal Screen die gewünschte Seite auswählen.

Ihr habt somit jetzt die Möglichkeit im Namen Eurer Fan-Page zu agieren - also zu liken, zu kommentieren etc. Gleichzeitig könnt Ihr mit Eurem privaten Account jetzt auf Eurer eigenen Fan-Page kommentieren. Gerade die Möglichkeit im Namen einer Page Aktionen auf anderen Seiten auszuführen dürfte zu einer aggressiven SPAM-Welle führen. Ich bin gespannt was hier auf uns zukommt und wie Facebook das in den Griff bekommen will.
Besonders interessant ist übrigens auch noch ein Punkt in den Einstellungen. Unter "Info bearbeiten > Deine Einstellungen" findet Ihr folgende Option:

Kommentiere und poste Beiträge auf deiner Seite immer unter dem Namen kulturbanause, auch wenn du Facebook als Jonas Hellwig verwendest.
Hinweis: Du verwendest Facebook derzeit unter dem Namen kulturbanause. Um Facebook als Jonas Hellwig zu verwenden, klicke auf „Konto“ oben auf einer beliebigen Seite.

Benachrichtigungen und Activity-Stream für Facebook-Seiten

Ab sofort werdet Ihr als Fan-Page-Betreiber über Aktivitäten auf der Seite informiert. Damit sind viele externe Dienste wie Hyper Alarm jetzt überflüssig.

Die Info erfolgt genau wie die eines normalen Profils als kleines rotes Icon oben links. Es werden die neuen "Fans" sowie Kommentare und Likes angezeigt. Unter "Info bearbeiten > Deine Einstellungen" findet Ihr zusätzlich folgende Option:

Benachrichtigungen an E-Mail-Adresse schicken, wenn Nutzer Inhalte oder Kommentare auf deiner Seite posten.

Besonders spannend ist auch, dass eine Fan-Page jetzt eine Startseite hat (nur für den Admin sichtbar) die alle Aktivitäten deiner "Freunde" zeigt. Als Fan-Page sieht man hier alle Beiträge von anderen Seiten sofern man diese zu den Favoriten hinzugefügt hat. Mit diesem - unerwarteten - Feature lässt sich der Informationsfluss noch besser zwischen privat und geschäftlich trennen. Leider wird dieses Feature aber auch dazu führen, dass Facebook noch mehr Marktmacht bekommt und einen weiten Schritt in Richtung RSS-Feed-Reader geht. Gerade diese Trennung war bisher nämlich sehr störend. Als private Person sehe ich jetzt also was meine Freunde und Lieblings-Bands etc. schreiben - als Admin alles was meine Fans und das "Geschäftsleben" betrifft. Ich bleibe trotzdem bei meinem geliebten Google Reader. Facebook ist mir unheimlich.

Neues FBML-Tabs/Seiten

Facebook hat auch das Design der Fan-Pages überarbeitet. Hier stehen uns leider ebenfalls einige Änderungen ins Haus.
Zunächst einmal sind die Tabs verschwunden und nach links in die Seitenleiste gerutscht. Hier sehen wir jetzt die Seiten untereinander - jeweils mit Icon. Mehr als ärgerlich (aus Designer-Sicht) ist, dass die individuellen Tabs die wir mit FBML erzeugt haben jetzt auch mit dem Icon der FBML-Anwendung dort angezeigt werden. Das sieht jetzt wirklich nicht schön aus.

Photo-Stream

Als weitere Änderung sehen wir jetzt auch bei Fan-Pages eine Foto-Stream oben im Profil. Das dürfte uns als Designer natürlich vollkommen neue Möglichkeiten eröffnen! Ich verlinke hier einfach mal auf ein paar Beispiele: coretandea.blogspot.com/2010/12/memperkeren-profil-facebook-baru

Auf die Schnelle lässt sich folgendes sagen: Schaut einfach mal flott auf Eurer Seite nach was Ihr oben für Bilder angezeigt bekommt und ändert hier die Reihenfolge ggf. ab. Ein neues Design kann man immer noch später implementieren - wenn überhaupt.

Bei einer meiner Fan-Pages wurden zum Beispiel gerade jetzt die folgenden Fotos vom Umbau des Gebäudes gezeigt - hier sollten wir einfach die Reihenfolge anpassen damit wir vorerst etwas schönes zeigen.

Neues Profilbild,

Es hat sich zu meinem größten Missvergnügen auch die Breite des Profilbildes geändert. Hier haben wir jetzt anstatt 200 Pixeln nur noch 180 Pixel in der Breite zur Verfügung. Über die Höhe kann ich noch keine Aussage treffen - wichtig ist, dass die Seiten jetzt unter dem Logo angezeigt werden und somit eventuell aus dem Viewport rutschen wenn das Profilbild zu lang und die Monitorauflösung zu gering ist.

Neue Breite für den Content??

Auch die Breite des Inhalts einer FBML-Seite hat sich vielleicht geändert. Ebenfalls eine Änderung die mehr als ärgerlich wäre - vor allem da Facebook es wohl nicht für nötig hält hier im Vorfeld schon ein paar Infos zu streuen. Die Breite des Inhalts hat sich von 510 Pixeln auf 493 ?!?! Pixel geändert. Soweit zumindest meine Messung anhand eines schnellen Screenshots einer meiner Fan-Pages. In Bezug auf die Gestaltung einer FBML-Seite hätte das große Auswirkungen - vor allem wenn Ihr mit HTML und CSS Spalten erzeugt habt.
Das "Feature" war bei mir nur ganz kurz zu sehen und ist jetzt wieder weg. Wenn Ihr hier weitere Infos habt ... her damit! :)

Ich möchte Euch an einem Screenshot gerne trotzdem noch den Vorher/Nachher-Vergleich zeigen. Wie gesagt - ich weiß nicht ob das final ist.

Aber es ist ja Freitag

Wenn die Änderung des Fan-Page-Layouts tatsächlich kommen sollte so haben wir ein arbeitsreiches Wochenende vor uns - aber es ist ja Freitag... Ich persönlich warte mit den Korrekturen jetzt erst einmal ab. Ich kann mir aber gut vorstellen wie ärgerlich der Freitagmorgen doch für so manch einen Fan-Page-Admin werden kann.
Was sagt Ihr zur Informationspolitik von Facebook und vor allem zum Update? Gut? Schlecht? Zu viel? Zu wenig?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Fan-Pages von Facebook haben viele Nachteile. Ein besonders ärgerlicher ist, dass der Administrator der Fan-Page keine Benachrichtigungen bekommt wenn ein "Fan" auf der Seite einen Post kommentiert oder einen Beitrag auf der Pinnwand verfasst. Als Admin ist man also gezwungen regelmäßig nachzuschauen - ältere Artikel bleiben da wohl oder übel auf der Strecke.
Der Web-Service Hyper Alerts schafft hier Abhilfe und ermöglicht zeitgesteuerte E-Mail-Notifications.

Hyper Alerts Account einrichten

Zunächst benötigt Ihr einen Hyper Alerts Account. Geht also auf die Website und erstellt ein Benutzerprofil. Das geht glücklicherweise sehr schnell.

• Hyper Alerts

Benachrichtigungen aktivieren

Nun habt Ihr zwei Möglichkeiten die Benachrichtigungen zu aktivieren. Entweder Ihr gebt die URL Eurer Fan-Page an oder Ihr aktiviert eine App auf Eurem Facebook-Benutzer-Profil. Für die zweite Option müsst Ihr natürlich in Facebook noch eingeloggt sein damit es auch aus HyperAlerts heraus praktisch funktioniert.

Sobald die Adresse der Fan-Page bekannt ist müsst Ihr festlegen wie Ihr benachrichtigt werden wollt. Ihr habt die Wahl zwischen einer stündliche, täglichen, wöchentlichen oder monatlichen Information. Es gibt auch noch die Option einer sofortigen Benachrichtigung.

Für die sofortige Option ist allerdings die Facebook-App verpflichtend weshalb ich diese Funktion nicht getestet habe. Wenn Ihr die Funktion nutzt so schreibt doch bitte einen Kommentar ob die Benachrichtigungen auch sofort eintreffen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im Juni werde ich im Rahmen der medien[plan]tage zwei Slots zum Thema "Webdesign mit Photoshop" und "Selfmarketing im Web" belegen.

medien[plan]tage ist ein Veranstaltungskonzept der Müller Ditzen AG, das hochwertige Vorträge und Seminare zu den Themen Medienproduktion und Marketing bietet.

Die Veranstaltungen finden in Bremen statt. Es handelt sich um ein ganztägiges Seminar und um eine Abendveranstaltung.

Vortrag: Erfolgreiches Selfmarketing im Web: Online-Power für Kreative
Wilhelm Wagenfeld Haus, Bremen
Dienstag, 21. Juni von 18:00 bis 21:00
Information und Anmeldung

Seminar: Effizientes Webdesign in Photoshop
Haus der Wissenschaft, Bremen
Mittwoch, 22. Juni von 09:30 bis 17:30
Information und Anmeldung

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Manchmal kann es sinnvoll sein Inhalte auf Facebook per Zufall anzeigen zu lassen. So habt Ihr vielleicht ein Fan-Page-Layout mit drei Teaser-Boxen, wollt aber eigentlich vier verschiedene Bereiche Eurer Website bewerben. In einem solchen Fall könntet Ihr alle oder zumindest einen der Teaser rotieren lassen.

Besonders schön ist, dass Ihr über das weigth-Attribut festlegen könnt wie die Gewichtung bei der späteren Anzeige sein soll. Elemente die häufiger angezeigt werden sollen bekommen folglich ein höheres Gewicht.

<fb:random>
 <fb:random-option weight="1">Dieser Text erscheint halb so häufig wie der in Zeile 2</fb:random-option>
 <fb:random-option weight="2">Dieser Text erscheint doppelt so oft wie der in Zeile 1.</fb:random-option>
</fb:random>

Das oben gezeigte Snippet muss innerhalb eines FBM-Tabs eingefügt werden. Wie Ihr FBML-Tabs erstellt könnt Ihr hier nachlesen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn Ihr innerhalb Eurer Fanpage Inhalte nur für Fans anzeigen wollt so könnt Ihr das ganz einfach mit folgendem FBML-Snippet erreichen. Ein Anwendungsbeispiel ist vielleicht der Download eines exklusiven Gutscheins für Fans oder ähnliches.

<fb:visible-to-connection>
Dieser Inhalt ist nur für Fans sichtbar
</fb:visible-to-connection>

Um den Code innerhalb von Facebook verwenden zu können müsst Ihr zuvor die Anwendung FBML installieren. Wie das geht steht hier.

Alternativen Inhalt für "Nicht-Fans"

Wenn Ihr das oben gezeigte Snippet verwendet, so sehen "Nicht-Fans" eine leere Fläche in den Abmessungen des für sie versteckten Inhalts. Das ist natürlich nicht so schön. Um das Problem zu umgehen könnt Ihr für diese Besucher einen anderen Inhalt einblenden. Zum Beispiel so:

<fb:visible-to-connection>
 Dieser Inhalt ist nur für Fans sichtbar
  <fb:else>
  Dieser Inhalt ist nur für Nicht-Fans sichtbar
  </fb:else>
</fb:visible-to-connection>

Ihr könnt innerhalb der Else-Anweisung auch Inline-CSS schreiben und mit einem negativen margin den Container verstecken.

Besonders interessant ist diese Funktion an Bereichen im Layout die besonders prominent sind. Zum Beispiel die Stelle direkt unterhalb der Überschrift. Neuen Besuchern könnt Ihr hier eine "Werde bitte Fan"-Mitteilung einblenden. Bestehende Fans erfreuen sich dann vielleicht mehr an "Danke, dass du Fan geworden bist". So lässt sich der einzelne User noch individueller ansprechen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Es gibt in Facebook diverse Möglichkeiten um Informationen zu verbreiten. Eine davon ist der Teilen-Button. Kickt man auf diesen Button so werden bestimmte, zuvor definierte, Meta-Informationen auf die eigene Pinnwand übertragen. Darüber hinaus kann natürlich zusätzlich eine individuelle Statusmeldung verfasst werden.

Wenn Ihr das alles etwas individueller gestalten wollt, so nutzt einfach folgendes FBML-Snippet. Der Code sollte selbsterklärend sein.

<fb:share-button class="meta">
 <meta name="medium" content="mult"/>
 <meta name="title" content="name-der-fanpage"/>
 <meta name="description" content="beschreibungstext"/>
 <link rel="image_src" href="absoluter-pfad-zum-bild" />
 <link rel="target_url" href="absolute-ziel-url"/>
</fb:share-button>

Um den Code innerhalb von Facebook verwenden zu können müsst Ihr zuvor die Anwendung FBML installieren. Wie das geht steht hier.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Um mehr Fans für Eure Facebook-Fan-Page zu generieren kann es sich anbieten ein "Invite to App"-Element in die Fan-Page einzubauen. Mit diesem Element kann ein Besucher seine Freunde auswählen und sie direkt einladen. Es kann eine persönliche Nachricht verfasst werden und es ist möglich externe Kontakte per E-Mail einzuladen.

Eigentlich ist das Element zum Einsatz in Facebook-Apps gedacht. Aus diesem Grund müsst Ihr zunächst einen FBML-Tab erstellen. Wie das geht könnt Ihr in diesem Artikel nachlesen. Alles was wir jetzt besprechen geschieht innerhalb des FBML-Tabs.

Multi-Friend-Selector

Es existiert eine "große" Variante des Elements und eine zusammengefasste. Dieser Code erzeuge die normale Ansicht. Die Breite wird über die Anzahl der Spalten bestimmt, die Höhe über die Anzahl der Zeilen (Achtung! 3 Zeilen sind mindestens erforderlich).

<fb:request-form method="GET"
 invite="true"
 type="kulturbanause Fan-Page"
 content="Hi, ich möchte Dir gerne kulturbanause vorstellen.
 <fb:req-choice url='http://www.facebook.com/kulturbanause.de' label='kulturbanause besuchen!' />
">

<fb:multi-friend-selector
 actiontext="Empfehle uns deinen Freunden! Vielen Dank!"
 rows="3"
 cols="3"
 showborder="true"
/>

</fb:request-form>

Eine vollständige Erklärung aller Attribute findet Ihr auf developers.facebook.com/docs/reference/fbml/multi-friend-selector

Multi-Friend-Selector (Condensed)

Diese Variante ist platzsparender als die oben erwähnte. Die Breite lässt sich per CSS steuern (Klasse, oder Inline).

<fb:request-form method="GET"
 invite="true"
 type="kulturbanause Fan-Page"
 content="Hi, ich möchte Dir gerne kulturbanause vorstellen.
 <fb:req-choice url='http://www.facebook.com/kulturbanause.de' label='kulturbanause besuchen!' />
">

<fb:multi-friend-selector
 condensed="true"
 style="width: 520px;"
 actiontext="Empfehle uns deinen Freunden! Vielen Dank!"
 showborder="true"
/>

</fb:request-form>

Eine vollständige Liste aller Attribute findet Ihr hier: developers.facebook.com/docs/reference/fbml/multi-friend-selector_(condensed)

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.