Fancybox with Facebook markup - Doesn't load

Question

Why I try to load a fancybox, the content isn't loaded. The problem only occur when I use facebook markup.

I also try with colorbox and got the same result. Is there anything I missing ?

I got the following :

<script type="text/javascript">
    $(document).ready(function () {
        $("#shareWithFriends").fancybox({
            'titlePosition': 'inside',
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
    });
</script>

<a class="inline" id="shareWithFriends" href="#inline1">Share with your friends</a>

<div style="display: none;">
            <div id="inline1" style="width:500px;height:550px;">
                <fb:serverfbml width="615">
                    <script type="text/fbml">
                        <fb:request-form action="..."
                                            method="POST"
                                            invite="true"
                                            type="..."
                                            content=...<fb:req-choice url='...' label='....' />
                            <fb:multi-friend-selector showborder="false"
                                                    bypass="cancel"
                                                    cols=4
                                                    rows=1
                                                    actiontext="..."/>
                        </fb:request-form>
                    </script>
                </fb:serverfbml>
            </div>
        </div>

Answer 1

I find an sample code for <fb:serverFbml>:

<fb:serverFbml style="width: 755px;">  
     <script type="text/fbml">
        <fb:fbml>
            <fb:request-form
                action="<URL for post invite action, see fb:request-form docs for details>"
                method="POST"
                invite="true"
                type="XFBML"
                content="This is a test invitation from XFBML test app
                <fb:req-choice url="see fb:req-choice docs for details."
                    label="Ignore the Facebook test app!" />
             ">
             </fb:request-form>
                <fb:multi-friend-selector
                    showborder="false"
                    actiontext="Invite your friends to use Facebook." />
         </fb:fbml>
    </script>
</fb:serverFbml>

But there are some differences between yours and the sample by facebook.

• at sample code,<fb:request-form> tag closed before <fb:multi-friend-selector> starts.
• the content property of <fb:request-form>
  Yours : content=...<fb:req-choice url='...' label='....' />
  what should be : "content=...<fb:req-choice url='...' label='....' />" (with brackets)
• Your code doesnt have a <fb:fbml> tag.and i think, this is the main issue that must be fixed to run the code.

Answer 2

Try make your fb markup in a remote page and load it with the iframe feature or ajax feature in Fancybox.