Sprawa niby błacha, jednak znalezienie właściwego rozwiązania w sieci nie było proste. Problem dotyczy aplikacji na Facebooka która pojawia się na podstronie fanpage – tak zwany Tab App. O ile dokumentacja do aplikacji canvas jest kompletna i dostarcza wszystkich informacji dotyczących konfiguracji to nieco gorzej jest przy wspomnianym typu appki. Dokładniej pisząc, chodzi o prawidłowe wyświetlanie aplikacji. Wyświetlając naszą aplikację w elemenicie iframe na Facebooku musimy zadbać o to aby nie pojawił się zbędny pasek przewijania (scroll bar) a wysokość wspomnianego elementu była taka aby cała aplikacja była widoczna.

W aplikacji na fanpage w przeciwieństwie do aplikacji canvas nie mamy do dyspozycji ustawień  wysokości aplikacji (static, fluid etc.). Jedyne co możemy zmienić to ustawienie szerokości aplikacji między 520px a 810px. Osobiście preferuję drugą opcję, gdyż 510px jest stanowczo za wąskim obszarem i źle wygląda przy obecnym wyglądzie Facebooka.

Jak pozbyć się paska przewijania i dopasować wysokości iframe do wysokości aplikacji?

Odpowiednio wykonujemy dwie czynności. Aby pozbyć się paska ustalamy nowe style dla elementu html:

body{
  overflow: hidden;
}

Powoduje to usunięcie paska przewijania który bardzo źle prezentuje się na tle reszty elementów Facebooka. Pewnie też dlatego sam Facebook postanowił u siebie wprowadzić własny wygląd tych „kontrolek”.

W momencie kiedy pozbyliśmy się paska, część naszej aplikacji może być niewidoczna. To jest powód dlaczego powinniśmy zmieniać wysokość elementu iframe na Facebooku. Aby tego dokonać należy użyć FB.Canvas.setAutoGrow(); . Cały kod razem z inicjalizacją api Facebooka wygląda następująco:

window.fbAsyncInit = function() {
 // init the FB JS SDK
 FB.init({
 appId : '', // App ID from the App Dashboard
 channelUrl : '', // Channel File for x-domain communication
 status : true, // check the login status upon init?
 cookie : true, // set sessions cookies to allow your server to access the session?
 xfbml : true, // parse XFBML tags on this page?
 oauth : true,
 });
 FB.Canvas.setAutoGrow();
 };

(function(d, debug){
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
 ref.parentNode.insertBefore(js, ref);
 }(document, /*debug*/ false));

Wcięcia w kodzie zostaną poprawione w przyszłości. Kod może się różnić w zależności od zmian które mogły pojawić się w międzyczasie. Należy pamiętać aby najlepiej przekopiować kod ze strony dokumentacji Facebooka.

Polecam na koniec również śledzić komunikaty z konsoli podczas uruchamiania aplikacji. W moim przypadku pojawiła się np. informacja o braku deklaracji obiektu FB. Pomimo tego, że nie znalazłem nigdzie literówki i kopiowałem kod z jakiejś strony to skopiowanie kodu bezpośrednio z dokumentacji Facebooka pomogło rozwiązać wszelkie problemy.