Using facebook javascript sdk in an iframe application

Question

I am wondering how to use the facebook javascript in an canvas application (which is using the facebook c# sdk).

I want to sent the user to a request form with a call like

FB.ui({
   method: 'apprequests',
   message: 'You should learn more about the',
}, Log.info.bind('send-to-many callback'));

In my Site Masterpage i have the following code before the end body tag:

<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
    FB.init({
        appId: 'AppId', cookie: true,
        status: true, xfbml: true
    });

</script>

But somehow it breaking the whole application. The app is not in the iframe of facebook anymore.

It just get's loaded as own website.

What's the best way to integrate the js sdk in such an canvas application (ASP.NET MVC 2)?

The default action for FB.ui () is to open a popup dialog window for sending requests. You are somehow breaking out of the facebook iframe, probably using top.location.href in the callback somewhere. There are no extra steps to use the js sdk for an canvas application that I'm aware of. — DannyKK

firepol firepol · Accepted Answer · 2011-05-06T09:11:46

I just tried your scenario in my Canvas App. I tried both to click my "Send App Requests" link from both the App url http://apps.facebook.com/myappname and also from my server url: http://myserver/mypage.aspx. For me they both work. When clicking that button I get the dialog and I can invite my friends to use the App (I'm not redirected outside of the Canvas).

I don't know how your logger ( Log.info.bind('send-to-many callback')); ) works, but I would try to remove it from your code.

Here is the code I use in my MasterPage:

<body>
<div id="fb-root"></div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({ appId: '<%= ConfigurationManager.AppSettings["fbAppId"].ToString() %>',
                status: true,
                cookie: true,
                xfbml: true
            });

            //Autoresize iFrame                
            FB.Canvas.setAutoResize();
        };
    (function () {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
        document.getElementById('fb-root').appendChild(e);
    } ());

function sendAppRequest() {
    FB.ui(
            {
                method: 'apprequests',
                message: 'Learn more'
            }
            );
        }
    </script>
    <div id="content">
        <a href="javascript:void(0);" onclick="sendAppRequest()">Send App Requests</a>
    </div>
</body>

Maybe for me it works, because I use fbAsyncInit... don't know, hope this helps...

Using facebook javascript sdk in an iframe application

1 Answers