kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Facebook


Externe Links in die Facebook-Fanpage einbinden

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.

Beitrag zu Ende lesen

Facebooks Open-Graph-Protocol HTML5 valide einbinden

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.

Beitrag zu Ende lesen

Scrollbalken in Facebook-iFrame-Tabs deaktivieren

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.

Beitrag zu Ende lesen

Facebook iframe-Tabs untereinander verlinken

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.

Beitrag zu Ende lesen

Facebook: So nutzt ihr den neuen Send-Button

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.

Beitrag zu Ende lesen

Fan-Gating für Facebook iFrame-Tabs: Inhalte nur für Fans (Fan-Gate, Like-Gate)

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.

Beitrag zu Ende lesen

WordPress-Editor für Facebook-iFrame-Tabs nutzen

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.

Beitrag zu Ende lesen