How do I use FB.Connect.streamPublish in an iframe facebook app?

Question

I'm making a simple iframe-based facebook app. I have the following code to size my iframe:

FB_RequireFeatures(["Connect"], function(){

FB.XdComm.Server.init('/xd_receiver.htm'); FB.CanvasClient.startTimerToSizeToContent(); FB.CanvasClient.syncUrl(); });

I want to add a link that will display a popup which will allow the user to post an app-defined image/link to the user's wall. To get things working initially, I tried just using the following code on a click event:

FB.Connect.streamPublish('');

However, nothing happens. I've tried adding:

FB.init(<?=API_KEY?>, '/xd_receiver.htm');

both inside the FB_RequireFeatures function, before it, after it... no luck. Nothing happens. No errors are thrown. Nothing. Any ideas?

Answer 1

Check that you have: (some from http://wiki.developers.facebook.com/index.php/Connect/Setting_Up_Your_Site#Referencing_Facebook_Connect_on_Your_Site)

• Created xd_receiver.htm, and that it is in the root of your domain
• Included the FeatureLoader.js.php at the top of the BODY of your document
• Added the javascript in the question (e.g. FB_RequiresFeatures, etc) to the bottom of your document

An example of code that is currently running okay in my app:

<script type="text/javascript">
   window.onload = function() {
        FB_RequireFeatures(["XFBML", "Connect"], function() {
           FB.Facebook.init("...my api key...","xd_receiver.htm");
           FB.CanvasClient.syncUrl();
        });
   };
</script>

You can omit the "XFBML" from the FB_RequireFeatures call, and change the path to xd_receiver.htm too, and it should work okay.

In addition, double-check that the application's Connect URL (as set up via the Developer App in Facebook) points to a parent of the xd_receiver.htm file. So, if your app is hosted on http://www.mydomain.com, then looking at your code examples, your xd_receiver.htm will be at http://www.mydomain.com/xd_receiver.htm, and you'll want to have http://www.mydomain.com as the Connect URL.

If this still doesn't work, try installing Firebug (or similar tool) to have a look at the net traffic. When I was getting this to work, the Facebook Javascript API would fail silently, and it was only by inspecting the requests going back-and-forth that I spotted that Facebook didn't like my Connect URL.

In order to test that it's all working, I'd be tempted to use

FB.Connect.streamPublish();

rather that the line you posted, as it should pop-up a dialog, and is clearly given as a working example. I'm not sure what will happen if you just pass an empty string as an argument.

Finally, there are lots of IFrame-based Facebook apps out there - if you spot one that is doing something that you like, you can always have a look at their Javascript to find out how they achieved it. Or in other words, Facebook is full of example IFrame app code.

Answer 2

You have to set your connect url in order to use the javascript libraries. Try setting your bookmark URL to http://apps.facebook.com/yourapp and see if that helps.

Answer 3

@Cyphus

Yes, when I say 'going to the app' I mean going to the app's page on facebook (apps.facebook.com/myapp). Currently, I have my callback URL set to the canvas only. As soon as I tried using my callback URL for both the canvas AND the Connect URL, any time I tried to go to the app, instead of loading in an iframe within facebook, I was redirected to the actual callback URL itself. I don't request it directly from my server, since that somewhat defeats the purpose of having a facebook app.

Answer 4

Check out this page for complete instructions on setting up Stream publishing with iFrame apps using Connect:

http://thetechnicalexperience.blogspot.com/2010/02/how-to-use-fbconnectstreampublish.html

Answer 5

maybe you have need this :

FB.init("API CODE", "LINK DOCMENT ROOT/xd_receiver.htm");

link text