Einen Tab auf Facebook so einrichten, dass er sich an die Höhe des Inhalts anpasst

Wenn man in einer Facebook Seite einen eigenen Tab macht wird der eigene Inhalt dort in einem iframe angezeigt. Wenn der Inhalt länger ist als der iframe wird mitten auf Facebook um den Inhalt eine Scrollbar angezeigt. Das ist unpraktisch und sieht nicht gut aus.

Mit einem kleinen Javascript am Ende unseres Inhalts kann man Facebook dazu bringen, den iframe genauso groß zu machen wie der Inhalt auch tatsächlich ist:

<div id="fb-root"></div>
<script type="text/javascript">
   window.fbAsyncInit = function() {
       FB.init({
           appId: 'HIER_DEINE_APP_ID_EINTRAGEN',
           status: true,
           cookie: true,
           xfbml: true
       });
       FB.Canvas.setAutoResize(100);
   };
   (function() {
       var e = document.createElement('script');
       e.async = true;
       e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
       document.getElementById('fb-root').appendChild(e);
   }());
</script>

Trag bei appId die ID deiner Facebook App im Tab ein und vergiss den div über dem Script nicht, den braucht das Facebook-JavaScript unbedingt.

Info: in Firefox 7 scheint der autoResize nicht mehr richtig zu funktionieren. Ich umgehe das derzeit damit, dass ich statt dem autoresize fixe Größen mit einer ellenlangen Höhe angebe:

FB.Canvas.setSize({ width: 520, height: 1500 });

Wenn jemand eine bessere Lösung weiß, bitte posten!