Thursday, May 2, 2013

Facebook page tab custom dimensions


Problem:
When creating a new page tab containing an iframe for a Facebook App, custom width/height is not allowed, creating unwanted scroll bars.

Solution:

Add this code to your body. Make sure the call to facebook javascript is https since some browsers will block non-https calls on a https URL (e.g. Google Chrome).
 <script type="text/javascript">
 window.fbAsyncInit = function() {
 FB.Canvas.setSize();
 }
 // Do things that will sometimes call sizeChangeCallback()
 function sizeChangeCallback() {
 FB.Canvas.setSize();
 }
 </script>
 
 <div id="fb-root"></div>
 <script src="https://connect.facebook.net/en_US/all.js"></script>
 <script>
 FB.init({
 appId : 'PLACE_YOUR_APP_ID_HERE',
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml : true // parse XFBML
 });
 </script>

Resources:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

http://stackoverflow.com/questions/4998519/setting-the-height-of-iframe-tabs-for-facebook-profile-pages

No comments:

Post a Comment