tags:

views:

22

answers:

0

We are trying to have the Facebook invite friends dialog open in a lightbox in our application. Here is the FBML that goes inside the lightbox:

<fb:serverFbml width="760px">
    <script type="text/fbml">
        <fb:request-form method="POST"
                         action="<%: Url.Action("InviteFacebookFriends", "Friends", null, "http") %>" <%-- We use this overload to force it to give the full URL, not the one relative to the root. --%>
                         target="_self"
                         invite="true"
                         type="MyApp"
                         content="Some text.">
            <fb:multi-friend-selector showborder="true"
                                      bypass="cancel"
                                      target="_self"
                                      exclude_ids="1,2,3"
                                      actiontext="Some more text." />
        </fb:request-form>
    </script>
</fb:serverFbml>

And here is the page that the user gets redirected to after the InviteFacebookFriends action takes place. Let's call it CloseFacebook.aspx.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!DOCTYPE html>
<html>
<body>
    <a href="#" class="CloseLightbox" id="CloseFacebookInvite"></a>
    <script>
        // This removes the lightbox, when using lightbox_me.js.
        parent.document.getElementsByClassName("lb_overlay")[0].removeModal(true);
    </script>
</body>
</html>

The idea is that after either the user clicks Cancel or he invites users, the Facebook iframe should load CloseFacebook.aspx, which then closes the lightbox.

However, this does not work. Because if you set target="_self" on both the <fb:request-form /> and the <fb:multi-friend-selector />, no FBML renders.

  • If you set it on <fb:request-form /> only, then clicking the "Cancel" buttons inside the friends selector opens CloseFacebook.aspx in a new window, instead of loading it into the Facebook iframe. But if you go through with the entire invite process, it will work, loading CloseFacebook.aspx into the iframe.
  • Conversely, if you set the target attribute on <fb:multi-friend-selector /> only, then the Cancel buttons correctly redirect to CloseFacebook.aspx, but if you complete the invite process, it opens in a new window.

What the hell? Why can't it work on both at the same time? Any ideas, perhaps of a better way to get Facebook to work in a lightbox? Especially ones that you've tested and found to actually work?

I'm tempted at this point to use a custom Facebook friend selector, since ideally we'd make the friend request happen through Ajax anyway, but none of the ones I've found on the internet have all of the features of the official Facebook one...

related questions