Wichtiges Scollbar-Update + Nie wieder Scrollbalken im Profil-Reiter


– 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

Stephan Alber
Stephan Alberhttp://about.me/stephanalber
Stephan Alber ist Entwickler, Designer, Unternehmer und (angehender) Buchautor. Hierbei arbeitet er mit Fortune 500 Kunden wie Nestle, Intel, Unilever, J.P. Morgan Chase & Co. Kuriose Bekanntheit erreichte er mit seiner Facebook App zur Anti-Atomkraft-Bewegung. Über das Netzphänomen berichteten u.a. der Focus und sowie das ZDF. Zur Zeit schreibt er in Zusammenarbeit mit O'Reilly Media (Deutschland) an seinem ersten Buch "Facebook Anwendungsentwicklung". Zu Zeit ist er bei der Social Media Agentur Deep Focus (New York City) tätig.

Neueste Artikel

Weekly Newsletter abonnieren. Kostenlos. Jederzeit kündbar!

Ähnliche Artikel

16 Kommentare

  1. 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.

  2. 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.

  3. 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).

  4. 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.

  5. 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!

  6. @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.

  7. 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.

  8. 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.

  9. 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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein