Geek Answers Handbook

Facebook Connect on a page expanding mobile site

The examples for Facebook mobile use the script: http://connect.facebook.net/en_US/all.js . This script adds fb-root to the div. My mobile site is 320 pixels wide and I am using the viewport meta-setting. Enabling the Facebook script causes a lot of extra space on the right side of the actual content as it sets its width to 575 pixels. I tried to include code to replace 575px with 320px ("# fb-root"). Val (). Replace ("575px", "320px"); but that didn't help - maybe I'm doing it wrong (using jQuery).

Does anyone know how to limit this to 320 pixels?

Update: Found an error about this with two workarounds:

  • Set the status to false in FB.init. I can verify that this fixes the problem for me, but violates the ability of users to log in.

  • Move <div id="fb-root"></div>directly under <body>. This did not work for me.

Source: http://bugs.developers.facebook.net/show_bug.cgi?id=18528

+5
source share
4 answers

I used the following CSS style rule to beat this 575px # fb-root width issue:

#fb-root > div { left:-575px !important; }

This works because if you find # fb-root node in, say, a Firebug HTML tree-viewer, you find that it contains a child div that looks like this:

position: absolute; top: -10000px; height: 0pt; width: 0pt;
+5
source

Here is my solution, hope this works for you:

I just set this to css by default

#fb-root{display:none}

FB ( FB.ui), :

$('#fb-root').show();

FB.ui,

$('#fb-root').hide();

:

var inviteFriend = function (msg) {
    $('#fb-root').show();
    FB.ui({
        method: 'apprequests',
        message: msg
    }, function (response) {
        $('#fb-root').hide();
        console.log('sendRequest response: ', response);
    });
},

, .

+1

The code you provided only replaces the value in the code that is already running at this point. You can try setting the width using the jquery.css () method on fb-root. Make sure it starts after fb js sdk is turned on or fits in the callback method during asynchronous loading.

0
source

Or just wrap it in another div, set its height and width, and put overflow: hidden;

0
source

More articles:


All Articles