Hi,
I am developing a Facebook iFrame application for an existing site. I load the web page using the <iframe> code. I also have a tab section, with tab-items Home, InviteFriends etc. But there is a lot of empty space between the tabs and the loaded web page.
This is my index.php file
<?php
require_once 'appinclude.php';
$user_id = $facebook->require_login();
?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<fb:serverfbml style="height:200px; width:760px;">
<script type="text/fbml">
<fb:fbml>
<fb:tabs>
<fb:tab-item href='http://my_site_ip/my_app_folder/' title='Home' selected='true' target="_TOP"/>
<fb:tab-item href='http://my_site_ip/my_app_folder/fav.php' title='My Favorites' target="_TOP"/>
<fb:tab-item href="http://my_site_ip/my_app_folder/invite.php" title="Invite Friends" target="_TOP"/>
</fb:tabs>
</fb:fbml>
</script>
</fb:serverfbml>
<?php echo '<iframe name="qantas" height="640px" width="740px" frameborder="0" resizeable="true" scrolling="no" style="border:none" src="my_url" target="_TOP"></iframe>';?>
<script type="text/javascript">
FB.init("my_api_key", "../channel/xd_receiver.htm");
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init("../channel/xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent();
});
</script>
</body>
</html>
And also when I click on the Invite Friends tab, I get a black box on my screen above the loaded web page in the place of the empty space. And if I click the black area, it navigates to the Invite page. How to remove this black box, and navigate directly to the invite page?
This is my invite.php file:
<?php
require_once 'appinclude.php';
$user_id = $facebook->require_login();
?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript">
</script>
<fb:serverfbml style="width: 776px;">
<script type="text/fbml">
<fb:fbml>
<fb:tabs>
<fb:tab-item href='http://apps.facebook.com/my_canvas_url/' title='Home' selected='true' target="_TOP"/>
<fb:tab-item href='http://apps.facebook.com/my_canvas_url/fav.php' title='My Favorites' target="_TOP"/>
<fb:tab-item href="http://apps.facebook.com/my_canvas_url/invite.php" title="Invite Friends" target="_TOP"/>
</fb:tabs>
<fb:request-form action="http://my_localhost_ip/FacebookApp/"
method="POST"
invite="true"
type="myWEb"
target="_parent"
content="<fb:name uid='$user_id' useyou='false'></fb:name> is a member of myWeb.com and would like to share that experience with you.To register, simply click on the 'Register' button below.<fb:req-choice url='http://apps.facebook.com/my_canvas_url/index.php' label='Register'/>">
<fb:multi-friend-selector showborder="false" actiontext="Invite your Facebook Friends to use myWeb" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
<script type="text/javascript">
FB.init("my_api_key", "../channel/xd_receiver.htm");
</script>
</body>
</html>