FlickR-Fototab für Facebookseiten erstellen

Leider stellt der Fotodienst FlickR keine wirklich schöne Lösung für fertige Facebook-Seitentabs zur Verfügung. Deshalb habe ich für den Tab auf unserer Seite des Social Media Clubs Bonn einen eigenen iframe-Tab gebaut.

Wie iframe-Tabs an sich erstellt werden, habe ich ja bereits in diesem Tutorial ausführlich erklärt: http://spr.li/iframe (pdf).Diese iframe-Tabs sind ja nichts weiter als auf Tabformat angepasste HTML-Seiten, die Sie extern auf Ihrem Webspace online gestellt haben und in Facebook via eigener Anwendung als Tab einbetten –  sofern man die nötigen HTML-Kenntnisse, einen developer-Zugang in Facebook und https-fähigen Webspace zur Verfügung hat.

Wie Sie jetzt noch die FlickR-Fotos anders als über das nicht sehr ansprechende Standardmodul darin unterbringen, zeige ich hier:

→ weiterlesen

Endgültiges Ende für Static-FBML-Tabs am 5.Dezember 2012

fbml icon

Erinnern Sie sich noch an Static FBML, die alte Methode zum Erstellen von eigenen Facebook-Seiten-Tabs? Neue erstellen kann man damit ja schon länger nicht mehr, aber alte Tabs wurden bislang noch angezeigt. Das wird sich am 5.Dezember 2012 ändern, denn dann werden alle solchen Tabs von Facebook gelöscht.

Falls Sie also noch alte Tabs dieser Art auf Ihrer Facebook-Seite benutzen, sollten Sie rechtzeitig auf neue iframe-Tabs umstellen.

Wie das geht, habe ich hier im Blog bereits erklärt. (Das Tutorial können Sie sich unter http://spr.li/iframe kostenlos herunterladen oder via Scribd einsehen.) Wichtig: Für diese Umsetzung sind Webdesign-Kenntnisse, eigener Webspace und ein Developer-Account in Facebook nötig.

Falls Sie diese Voraussetzungen nicht erfüllen, können Sie zum Beispiel auf folgende vorhandenen Apps zurückgreifen:

 

Facebook: Neues Script für lange iframe-Tabs erforderlich

Facebook hat wieder mal was geändert und so funktioniert der bisherige Workaround zum Entfernen des Scrollbalkens und vollständigen Anzeigen von iframe-Tabs auf Facebook-Seiten jetzt leider nicht mehr. Den Scrollbalken entfernt es zwar weiterhin, aber der Reiter wird abgeschnitten angezeigt.

Ich gab die Frage an meine Leser weiter und erhielt sogleich folgende Lösung von Danny Trapp:

  • der body-tag wird künftig ohne overflow:hidden verwendet
  • man füge statt des alten fb-root scripts folgendes ein:

<div id=“fb-root“></div>
<script type=“text/javascript“>
window.fbAsyncInit = function() {
FB.init({
appId: ‚APP-ID‚,
status: true,
cookie: false,
xfbml: true
});
FB.Canvas.setSize({ width: 810, height: xxxxx });
};
(function() {
var e = document.createElement(’script‘);
e.async = true;
e.src = document.location.protocol +
‚//connect.facebook.net/de_DE/all.js‘;
document.getElementById(‚fb-root‘).appendChild(e);
}());
</script>

  • Bei APP-ID setzen Sie wie gewohnt die ID Ihrer eigenen App ein, mit der Sie Ihre page(s) in Facebook einbinden.
  • Mit der Pixelangabe der Höhe muss man ggf. etwas experimentieren, bis man den richtigen Wert hat.
  • Wichtig ist auch, dass man in den App-Settings im Developer-Bereich auf 810px Weite umschaltet (falls nicht ohnehin schon geschehen).

 Herzlichen Dank, Danny!

Das komplette (und hiermit aktualisierte) Tutorial zum Einbinden von eigenen Inhalten in Seitentabs bei Facebook finden Sie hier:

http://spr.li/iframe

oder auf Scribd:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

Facebook-Seiten: Mehr Platz für individuelle Reiter

apps.jpg

UPDATE: alle Beiträge zu diesem Thema und mehr finden Sie jetzt zusammengefasst unter http://www.schwindt-pr.com/downloads/fbseiten_chronik.pdf

Mit der kommenden Layoutänderung für Facebook-Seiten hat man nun wohl auch mehr Platz für seine individuellen Reiter (iframe-Tabs). Diese werden zunächst als Kästen im Kopfbereich dargestellt. Beim Aufrufen sehen die alten 520px breiten im neuen Layout noch etwas verloren aus:

Viel weiße Seite um die alten Reiter

Die neue Maximalbreite ist wohl 810px. Ob es eine maximale Höhe gibt, weiß ich noch nicht. Sobald ich etwas über die genauen Maße erfahre, werde ich das hier im Artikel nachtragen.

UPDATE: Ja, die max. Breite ist 810px. das muss man aber erst in den App-Einstellungen ändern, bevor man seine externen Inhalte entsprechend hochladen kann:

Danach kann man den angepassten Reiter hochladen:

Neues Prozedere zum Hinzufügen von Apps für iframe-Tabs zu Seiten

Da es offenbar mit einem Posting auf der Facebook-Seite und auf Twitter allein nicht bei allen angekommen ist, auch hier nochmal der Hinweis, dass sich das Prozedere zum Hinzufügen eigener Apps für iframe-Tabs zu Seiten geändert hat. Wie immer bei solchen Änderungen haben die einen schon die neue Variante, andere noch die alte…

Die alte Variante sah vor, dass man sich nach dem Erstellen der App zur automatisch erstellten Profilseite derselben durchklickte und dort „Zu meiner Seite hinzufügen“ wählte. Manche haben diesen Link noch und alles funktioniert wie gehabt, andere haben zewar den Link noch, das hinzufügen klappt aber nicht mehr…

Daher habe ich mein Tutorial zum Erstellen und Hinzufügen vin iframe-Tabs zu Facebook-Seiten aktualisiert. Das Tutorial kann auch als pdf-Dokument oder auf Scribd heruntergeladen werden.

Das neue Prozedere scheint aber noch in der Betaphase zu sein, daher sollte man auf Fehlfunktionen gefasst sein. Aber das kennen wir ja schon…

 

Facebook: iframeTabs – eigene Anwendung oder…?

Gerade wurde gemeldet, dass ab 1.Oktober 2011 alle über eigene Anwendung erstellten iframeTabs eine https-Version haben müssen. Wer die im iframeTab eingebundenen externen Inhalte auf einem Webspace hat, der https einschließt, kann dem gelassen entgegensehen. Wer dies aber nicht hat, könnte in die Bredouille kommen…

Lösung A: eigenen Webspace mit https-Version aufrüsten

Lösung B: gesonderten Webspace, der https einschließt, für iframeTab hosten lassen.

Lösung C: statt eigener Anwendung Drittanwendung benutzen.

Welche alternativen Drittanwendungen haben Sie schon ausprobiert und was können diese?

Facebook: Neues zu iframe-Tabs und https

Es gibt wieder was Neues in Sachen iframe-Tabs und https. Wer einen iframe-Tab ohne https-Version angelegt hat, bekam ja zuerst eine Fehlermeldung beim Versuch, den Tab über eine sichere Verbindung (https) aufzurufen. Dann wurde das Anzeigen solcher frame-Tabs für https-Nutzer ganz deaktiviert. Inzwischen ist es so, dass die https-losen frame-Tabs für https-Nutzer wieder im Menü der Fanseite angezigt werden und man beim Versuch, sie anzuzeigen folgende Meldung erhält:

Zu einer regulären Verbindung (http) wechseln? Es tut uns leid, aber wir können diesen Inhalt nicht anzeigen, während Du Facebook über eine sichere Verbindung (https) benutzt. Möchtest du vorübergehend auf eine unsichere Verbindung wechseln, um diese Anwendung zu benutzen? Nach deinem nächsten Login besteht wieder eine sichere Verbindung.

Damit wird man als Nutzer einer sicheren Verbindung immerhin darauf hingewiesen, dass es noch andere Tabs gibt und hat die Wahl, ob man zu http wechseln möchte, oder nicht.

Seitenbetreiber hingegen sehen folgende Meldung:

Please update yoursecure url. To make sure useres can view your app over a secure browser connection (https), please visit the developer console to update your Secure Canvas URL.

Das nützt Seitenbetreibern, die keine https-Version zu ihrer Website haben, auf deren Server die iframe-Inhalte liegen, alerdings auch nicht mehr als vorher. Aber immerhin werden sie so auf die Möglichkeit hingewiesen, eine sichere Verbindung in ihre App eintragen zu können.

Facebook: Wenn der iframe-Tab Probleme macht – UPDATED

Das iframe-Tab-Tutorial zum Einbinden individueller Inhalte in Facebook-Fanseiten erfreut sich großer Resonanz. Leider gibt es aber beim ein oder anderen Anzeigeprobleme. Daher hier noch ein Nachtrag zum Tutorial:

Method POST not allowed

Problem 1: Die externen Inhalte werden im iframe-Tab nicht angezeigt, stattdessen erscheint eine Fehlermeldung wie: „Method Not Allowed The requested method POST is not allowed for the URL“

Lösung: Benennen Sie die einzubindenden Seiten von .html um in .php (auch Verlinkungen innerhalb des Tabs ändern, falls vorhanden!). Dann sollte alles normal angezeigt weden.

Scrollbalken

Problem 2: Die einzubindende Seite ist höher als 800px, so dass Facebook Scrollbalken in den Tab einfügt, was unschön aussieht.

UPDATE2 (August 2012): Die unten gezeigte Lösung funktioniert nicht mehr. Lesen Sie die neue Lösung HIER nach.

 

Lösung: Setzen Sie <body style=“overflow:hidden“>

und fügen Sie folgendes Script am Anfang des body ein:

<div id=“fb-root“>
<script src=“http://connect.facebook.net/en_US/all.js„></script>

<script type=“text/javascript“>
FB.init({
appId : ‚IHRE APP-ID‚,
status : true,
cookie : true,
xfbml : true,
oauth: true
});
FB.Canvas.setAutoResize(true, 500);
</script>

</div>

 

 

Das Tutorial wurde auch um diese beiden Hinweise ergänzt und kann nach wie vor als pdf (439kb) heruntergeladen werden unter:

http://www.scribd.com/doc/50039880/Facebook-iframe-Tabs-Tutorial

oder

http://www.schwindt-pr.com/iframetabs.pdf