Facebook connect breaks mobile websites

I’ve had a really frustrating problem on the mobile version of a website that I am working on. This error has taken me hours debugging and the problem and solution is really simple. I am using the header <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> for scaling. However the page doesn’t scale to my Android phones window. The page width is wider then the screen and it looks really awful.

The problem was related to html-code from Facebook Connect that my site is using. This code snippet comes from Facebook so I really dont have any clue why it is needed and how it works. All I can say is that it breaks webpages using viewport in smartphones.

The problem is the following

<div id="fb-root"></div>

Change it to this and the problem is solved

<div id=fb-root" style="display:none"></div>

Elitserien på Facebook

Igår kväll så roade jag mig med att tillverka min första Facebook-applikation. Efter att ha följt instruktionerna på http://developers.facebook.com/ så tog det inte lång tid innan jag hade en applikation up and running.

För att göra något vettigt så gjorde jag en applikation som hämtar upp den senaste elitserietabellen på HockeySnack. Denna kan sedan användarna lägga till på sin egen profil.

För att installera Elitserien på din profil så går du till adressen http://apps.facebook.com/elitserien/ och följer instruktionerna. Om du gillar applikationen så får du gärna sprida den till dina hockeypolare.

Exempel på bilden nedan:

Facebook app

Eftersom det inte är särskilt svårt att göra en Facebook applikation så var det här troligen inte den sista som jag tillverkar. Om man lyckas göra en bra svensk applikation så tror jag att man kan få en väldigt stor spridning med tanke på användarantalet på FB.

Elitserien på Facebook