thewidelensHi,
I'm using my wordpress site to store some iframe facebook tabs to show on facebook pages.
Everything works OK - besides one thing, when viewing the tabs on Iphone using "full site" mode - the iframe canvas isn't showing.
For example-
Tab URL: http://www.facebook.com/itraveljerusalem?sk=app_209175899097577
Iframe Canvas URL: http://apto.co.il/iframes/itravel-jerusalem-welcome/
Page template I'm using for the canvas pages:
<?php
/**
/**
* Template Name: FB iFrame
*/
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<?php wp_head(); ?>
<style type="text/css">
body { margin: 0; padding: 0; font: 13px/1.5 "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; background: none !important; border: none; width: 520px; }
img {border: 0;}
.canvas {width: 520px;}
</style>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body>
<div class="canvas">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="postwrapper clearfix">
<div class="post_content">
<?php echo the_content(); ?> </div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true,
cookie : true,
xfbml : true
});
</script>
</body>
</html>
Any help or ideas will be appreciated.
Toby