– Gastbeitrag von Stephan Alber –
Wichtige Änderungen – Zunächst für alle die bereits ihre Scrollbars mit dem Facebook JavaScript SDK kontrollieren: Wer an Neujahr auf Kunden-Anrufe verzichten möchte, sollte umgehend alle Apps auf die Verwendung der Funktion „FB.Canvas.setAutoResize“ prüfen. Diese wird am 1.1.2012 durch die Funktion FB.Canvas.setAutoGrow ersetzt! Wird diese Funktion nicht ausgetauscht, muss der Nutzer unter Umständen auf einen Großteil des Contents verzichten. Weitere wichtige Updates zum Jahreswechsel findet ihr im Facebook Developer Blog – Platform Updates: Operation Developer Love.
Tutorial für Neulinge
Um einen eigenen Reiter auf Facebook zu erstellen, brauch man inzwischen nicht mehr zwangsweise einen spezialisierten Web-Entwickler. Doch viele haben Probleme mit den Scrollbalken, die entweder nie verschwinden oder erst nach ein paar Sekunden. Im folgenden haben wir ein paar Code-Schnipsel zusammengestellt, die auch auf allen Browsern von den Scrollbalken befreien sollten.
Der CSS Code:
body {
margin:0;
padding:0;
overflow: hidden;
}body.profile {
width: 520px;
}body.app {
width: 760px;
}
Im Profil/Reiter gebt ihr dem Body die Klasse „profile“:
<body class=“profile“>
In der App die Klasse „app“:
<body class=“app“>
Am Ende eurer HTML Datei fügt ihr vor dem </body> Tag folgenden Code ein:
<div id=“fb-root“></div>
<script type=“text/javascript“>
window.fbAsyncInit = function() {
FB.init({
appId: ‚DEINE_APP_ID‘,
status: true,
cookie: false,
xfbml: true
});// Diese Funktion passt die Größe des Iframes this
// im Interval von X Millisekunden an die Größe des Inhalts an
FB.Canvas.setAutoGrow(100); // Früher: setAutoResize()};
(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>
„DEINE_APP_ID“ muss durch die Anwendungs ID ersetzt werden, Einstellungen wie „cookie“ können an die jeweiligen Bedürfnisse angepasst werden, sie haben keinen Einfluss auf die Darstellung.
Zu guter letzt müsst ihr noch sicherstellen, dass in den Anwendungseinstellungen beim Punkt „Canvas Height“ der Wert „Settable (Default: 800px)“ eingestellt ist.
Imagecredits: jala / photocase.com
bevor jetzt alle nur noch setAutoGrow benutzen weils so simpel ist: bei content mit fixer höhe (d.h. vermutlich bei den meisten tabs) sollte man die funktion NICHT benutzen, sondern die funktion setSize. die überprüft nämlich nicht ständig im hintergrund ob sich die höhe geändert hat.
ausserdem führt overflow:hidden im body bei manchen browsern zu problemen. immer funktionierts wenn man overflow:hidden per css zum html-tag hinzufügt.
Die einfachste Möglichkeit ist immernoch:
#fb-root {
display: none;
}
Der führt trotzdem die Funktion aus, aber läuft im Hintergrund.
Danke für den Beitrag. Sofort in unsere App eingebaut und funktioniert super!
Was ist der Grund für die 760px breite bei .app?
760px betrifft canvas apps, bei fixen („nicht-fluiden“) canvas apps ist die maximalbreite 760px.
fb-root auf display:none zu setzen kann ich nicht empfehlen, das gibt probleme falls man facebook dialoge braucht.
Bislang bei den ganzen Apps keine Probleme gehabt mit Facebook Dialoge, da dies durch Ihr Javascript wieder kurz auf display: block gesetzt wird.
Selbst Apps mit sehr großen Benutzungsgrad und sämtlichen Browsern (IE6 eingeschlossen).
was bringt es aber fb-root auf display:none zu setzen? overflow:hidden sollte man ja sowieso einsetzen, weil jegliche scrollbalken im iframe hässlich sind. das erspart man sich ja nicht dadurch.
Vielleicht eine etwas doofe Frage, aber wie geht das das machen Reiter einer „fast unendliche“ höhe haben? Als wenn die nicht auf 800px beschränkt sind.
Noch ein kleiner Tipp:
Wenn man den Code oben einfach per Copy und Paste übernimmt, bitte unbedingt in eurem Editor noch mal auf die korrekten Hochkommata und Anführungszeichen achten. Die verhauts beim Kopieren nämlich und man checkt es erst nciht so richtig, warum das denn nciht funktioniert. Hat mich 2 Stunden gekostet :) Aber ansonsten tolle Sache!
@Till: Wie im Beitrag beschrieben, zum Beispiel mit der Funktion „FB.Canvas.setAutoGrow“. Oder wenn man genau weiss wie hoch der Content ist, besser mit „FB.Canvas.setSize“. Damit kannst du eine fixe Grösse einstellen und es wird nicht ständig geprüft.
Lässt sich dieses Prinzip auch auf eine eigentlich externe Fanpage anwenden?
Was ist mit einer „externen Fanpage“ gemeint?
Ich möchte eine x-Beliebige Seite (in meinem Fall eine WordPress-startseite) als Fanpage einrichten, sodass man direkt von der Facebookseite aus die WordPressseite sieht.
Zurzeit wird die Seite bei mir nach gut 1400px höhe einfach abgeschnitten.
Vielen dank, funktioniert jetzt perfekt!
Hat sich wohl schon erledigt, aber zur Vervollständigung: Ja, diese Methode funktioniert auch, wenn man einen WordPress Blog oder ähnliches als „Quelle“ für einen Reiter wählt.
Hallo, ich bin noch neu bei facebook und kann einfach nicht begreifen, wo das hin muss.
—- Im Profil/Reiter gebt ihr dem Body die Klasse “profile”:
—
wo soll das hin? In den Quelltext der Seite doch nicht. Wo kann ich das zusätzlich eintragen?
—- In der App die Klasse “app”:
———-
Auch diese Body-Klassifizierung kann ich nicht finden.
Sorry, aber ich steh wohl aufm Schlauch. Kann mir jemand auf die Sprünge helfen?
Danke
Gina