We currently have an iframe-based Facebook canvas application in the works. The canvas portion is working fine and doesn’t really touch the Facebook API at all, since we don’t really need any permissions from users in terms of accessing their social graph; the data we’re using comes entirely from outside of Facebook.
What we would like to do is allow users to add an FBML version of our app to their profiles as a tab. However, it isn’t clear how we are supposed to go about enabling that functionality using the current Facebook APIs.
The canvas page and callback settings are set up and working correctly, and we currently have a tab name and URL set up in our Application Settings (and hitting the tab URL directly will load our minimal test page), but there’s no obvious way to offer users the ability to add this tab to their profiles.
Our initial thought was that we would need to add our own “Add Profile Tab” button in xfbml as mentioned at http://wiki.developers.facebook.com/index.php/Fb:add-profile-tab
But even when we reduce the iframe to something as barebones as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
<fb:add-profile-tab></fb:add-profile-tab>
<script type="text/javascript">
FB.init("<our secret key>", "xd_receiver.htm");
</script>
</body>
</html>
the xfbml element fails to render. Safari and Chrome both list the following error in the console: “Unsafe JavaScript attempt to access frame with URL [our app url on facebook] from frame with URL [URL our iframe loads from]. Domains, protocols and ports must match.”
We do have the Connect URL pointing at our app in the Connect tab of the application settings page. The xd_receiver.htm file is located in the same directory as the iframe page and its contents are
<!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" >
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
which seems to be what all of the relevant documentation recommends. The browser is definitely loading it as verified through the relevant debugging panes (web inspector, firebug, etc).
So the question is, is this the proper way of going about adding “add to profile tab” functionality to our application? If so, how do we resolve the cross-domain error? If not, what should we be doing instead? The current documentation seems to focus heavily on the Graph and Authentication APIs, neither of which really mention profile tabs.
It turned out that
<fb:add-profile-tab>simply doesn’t render without the user having first allowed the app to connect to them via something like<fb:login-button>