xfbml in iframe apps

Feb 4, 2010 at 10:19 AM

My iframe app was fine, until I decided to try using xfbml, and it just won't render. I've replaced it with the sample app, and this doesn't work either! I must have read 100 articles on this now.

Here's the master page code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="IFrameMaster.Master.cs" Inherits="IFrameSample.IFrameMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <asp:ContentPlaceHolder ID="head" runat="server" />
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

    <asp:ContentPlaceHolder ID="body" runat="server">
    <script type="text/javascript">
        <script type="text/javascript">FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init('<%=ConfigurationSettings.AppSettings["APIKey"] %>', "xd_receiver.htm"); });</script>


Here's the xd_receiver.htm in the root:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Cross-Domain Receiver Page</title>

    <script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>


Here's the default.aspx page:

<%@ Page Language="C#"  AutoEventWireup="true" MasterPageFile="~/IFrameMaster.Master" CodeBehind="Default.aspx.cs" Inherits="IFrameSample.Default" %>

<%@ MasterType VirtualPath="~/IFrameMaster.Master" %>

<asp:Content runat="server" ContentPlaceHolderID="head">
    <script type="text/javascript">
        function pickColor(color) {
            saveColor(color); // this function generated by Page_Load method
            var templateData = new Object();
            templateData.color = color;
            FB.Connect.showFeedDialog("101489467051", templateData, null, "", null, FB.RequireConnect.require, feedSent);

        function feedSent() {
            submitForm(); // this function dynamically generated by Page_Load method

<asp:Content runat="server" ID="content" ContentPlaceHolderID="body">
    <form action="Default.aspx" id="form" runat="server">
        <h2><fb:name firstnameonly="true" useyou="false" linked="false" uid="loggedinuser"></fb:name>, what is your favorite color?</h2>
            <li onclick="pickColor('red')">
                <div style="background-color: Red"></div>
            <li onclick="pickColor('orange')">
                <div style="background-color: Orange"></div>
            <li onclick="pickColor('yellow')">
                <div style="background-color: Yellow"></div>
            <li onclick="pickColor('green')">
                <div style="background-color: Green"></div>
            <li onclick="pickColor('blue')">
                <div style="background-color: Blue"></div>
            <li onclick="pickColor('purple')">
                <div style="background-color: Purple"></div>
        <asp:Panel ID="emailPermissionPanel" runat="server">
            <p>If you would like this application to send you e-mail messages, please <fb:prompt-permission perms="email">click here</fb:prompt-permission>.</p>
        <asp:HiddenField runat="server" ID="colorInput" />

And here's my settings:

Canvas Page URL     http://apps.facebook.com/zombiescourge/

Canvas Callback URL  http://facebook.zombiescourge.com/

Render Method           IFrame

Connect URL               http://facebook.zombiescourge.com/

Note: I have changed my settings, quite a few times (I didn't have connect url set initially) to experiment, to see what the problem was. I'm not sure how long it takes to propagate the changes, but it's been an hour or so...

If anyone can help me sort out what I'm doing wrong, I will be eternally grateful. I've not had any trouble developing for fb yet, but this one's set me back about a day (so far!)


Feb 4, 2010 at 2:44 PM

Well, I haven't changed anything, but now I get: 

FacebookException: Invalid parameter

Feb 4, 2010 at 6:23 PM

I suppose that you have not set Connect url in Developer application.


Feb 4, 2010 at 7:01 PM

Hi vatlab - thanks for posting. I've set connect url, the same as Canvas Callback URL - these are all at the bottom of the post, 'settings'.

The invalid parameter error seems to be because I hadn't logged in to facebook, nothing to do with the code.

But fear not, I'll be making a purchase of the FVK tomorrow, and hopefully this will all be resolved. I can't see what I've done wrong for the life of me, but something's gone astray.I'm just concerned that if I've made an error in settings, buying the FVK will still leave me with an issue!

Thanks again,


Feb 9, 2010 at 1:33 PM

I´m note sure whats causing your problems but I noticed that you might want to replace your HTML tag with;

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


"Note: The xmlns:fb attribute (xmlns:fb="http://www.facebook.com/2008/fbml") is required for proper rendering on IE. (Namespaces don't have to point to a valid page, they just need to be a valid Internationalized Resource Identifier (IRI)."

Feb 16, 2010 at 6:53 PM

One issue, for XFBML you need script in body not header ....

There are two pieces of JavaScript that are needed on the master page, within the <body> tag. One comes before the XFBML content:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

 And the other must come after:

<script type="text/javascript">

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

       FB.Facebook.init("c1aefc3e1eb232d9e8ca1e25ea583b69", "channel/xd_receiver.htm");