I got a problem while developing my first facebook api, I am using fb:tabs in my api.
But I got some problems.
<div>
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:tabs>
<fb:tab-item href="http://apps.facebook.com/myapi/invite.php" title="Invite Friends" selected="true"/>
<fb:tab-item href="http://apps.facebook.com/myapi/inbox.php" title="inbox"/>
<fb:tab-item href="http://apps.facebook.com/myapi/sent.php" title="sent"/>
title="comm" align="right"/>
</fb:tabs>
</fb:fbml>
</script>
</fb:serverfbml>
<div id="center-border">
</div>
</div>
I used the above code to render tabs.
- I use the div with id= "center-border" to render the rest of the page, though a big gab appears between tabs and the content of the page, when I check it with fire bug it was iframe. note: the above problem does not appear when the rest of the page be fb: elements inside .
- when switching between tabs facebook logo appears, and I must click it to redirect me to the other tab.
- I use the above code at every page to render the tabs, is there any other ways
update: I solved the second problems by replacing the links in tabs by actual reference in my case it was local host like that:
<fb:tab-item href="http://localhost/facebook......./invite.php" title="Invite Friends" />
update: I searched in that problem again, now I can restate it more clearly, I will divide it to steps to be more clear.
when use fb:tabs like above code it seems that each fb:tab-item has its own iframe that the "href" link is rendered on it (I guessed that by using firebug)
when clicking a tab the linked page appears without problems, the problem is the tabs disappear.
to prevent tabs from disappearing, I have to put the above code at every page and change the selected tab.
then the gap that appears between the tabs bar and the content of the page, is the iframe of the tabs, that render no thing, and the contents are rendered in the "correct" iframe below.
as I mentioned above that problem does not happen when render the "built in" facebook invite page in the same .
one of the solutions that I thought of is to found a fb:"X" that can render a HTML element " for example" so that I can get around this problem, but I did not find such a thing.
update: I could fix problem 3, by putting the above code in php file and include it when needed, we can change selected tabs like that:
<?php $page = basename($_SERVER['PHP_SELF']);?>
<fb:tabs>
<fb:tab-item href="http://localhost/facebook......./invite.php" title="Invite Friends" <?php if ($page == 'invite.php'):?>selected="true"<?php endif;?>/>
<fb:tab-item href="http://localhost/facebook......./inbox.php" title="inbox" <?php if ($page == 'inbox.php'):?>selected="true"<?php endif;?>/>
<fb:tab-item href="http://localhost/facebook......./sent.php" title="sent" <?php if ($page == 'sent.php'):?>selected="true"<?php endif;?>/>
</fb:tabs>
very sorry about the long post.
any help will be appreciated. Thanks in advance