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.