fb:serverfbml won't render on Opera and IE

I asked the same question in Facebook developer forum, but for some reasons I want to repost it here. I hope that's okay.

I have the following fb:serverfbml snippet.

<fb:serverfbml id="invite_friends_form" style="width: 100%">
  <script type="text/fbml">
    <fb:fbml><p>Testing FBML rendering</p></fb:fbml>
  </script>
</fb:serverfbml>

<script>
    $(document).ready(function()
    {
        // Parse XFBML tags
        FB.XFBML.parse();
    });
</script>

It renders correctly in Firefox and Chrome. I got the usual Facebook loading animation for a moment, and then the sentence "Testing FBML rendering" is displayed.

BUT, when I test this on Opera 10 and Internet Explorer 8, it doesn't work. I do see the Facebook loading animation, but it never finished. When I see my network monitor, I saw a request to http://www.facebook.com/plugins/serverfbml.php with my to-be-rendered FBML passed in the query string.

The request is already completed with proper response from facebook, but still, the loading animation goes on.

Does anyone know, what might be the problem here?

Thanks, Andree.

I have had the same problem for the whole morning, and I finally solved it! :)

Add:

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

...some place inside your body.

Also, add xmlns:fb="http://www.facebook.com/2008/fbml" to the html tag, so that it reads:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

I'm going to post my whole code so that you can compare:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <title></title>
</head>


<body style="margin:0px 0px 0px 0px;overflow:hidden;text-align:center;">

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

    <fb:serverFbml>
        <script type="text/fbml">
            <fb:fbml>
                <fb:request-form
                    method="POST"
                    type="jugar a Mahou Liga Chapas"
                    action="http://mahouligachapas.unusualwonder.com"
                    content='¿ Te echas un partido conmigo? 
                        <fb:req-choice url="http://apps.facebook.com/mahouligachapas" label="Sí" />
                        <fb:req-choice url="http://www.facebook.com" label="No" />' 
                >
                    <fb:multi-friend-selector actiontext="Invita a tus amigos a jugar a Mahou Liga Chapas"/>
                </fb:request-form>
            </fb:fbml>
        </script>
    </fb:serverFbml>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            FB.init({ appId: 'XXXXXXXXXXX', status: true, cookie: true, xfbml: true });
        });

    </script>

</body>
</html>

I had same problem. But in may case action parameter of contained " (double quote). When I added slashes problem gone.

来源：https://stackoverflow.com/questions/3228876/fbserverfbml-wont-render-on-opera-and-ie

标签

internet-explorer-8

facebook

opera

fbml