Question

I just got my app shown up on facebook canvas. However, since it is an existing app, it’s too big to fit into facebook’s canvas. So I am just thinking should I create a different css file for my facebook app? If I should, how? Or should I do something else?

Thanks in advance.

Answer 1

You’re using the iframe option right? Are you talking about the width of the website or the height? Because the height can be made dynamic. As for the width, I guess you need new style (could be inside a new stylesheet) for that.

The following HTML and Javascript allows you to resize the height of the iframe dynamically. Put it inside your head tag.

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
    FB.Canvas.setAutoResize();
  };
</script>

As for how to check what CSS file to use. You can put some Javascript inside the fbAsyncInit to add a new CSS file. You can also do a check if you’re in an iframe (inside the head):

<script type="text/javascript">
if (top === self) {
  document.write('<%= stylesheet_link_tag "application" %>');
} else { 
  document.write('<%= stylesheet_link_tag "facebook" %>');
}
</script>

I hope it works for you. 🙂